ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项

2019独角兽企业重金招聘Python工程师标准>>>

UI设计：

机顶盒的输出设备为电视机，电视机的图像重现率比计算机的显示器小，靠近边缘部分的文字与图像可能会在电视机中无法看到，所以在进行应用界面设计时，文字与图像尽量设计在屏幕中间的部位。为了保证页面上的内容可以完全显示在电视机上，需要设置一个安全显示区域。各种型号的电视机，其重现率都是不同的，因此对于安全显示区没有固定的大小，推荐的安全显示区域分辨率为1120×620，即左右各保留80，上下各保留50。

1. 机顶盒浏览器的显示分辨率是1280×720像素。

2. 设计图上下各保留25px，左右各保留40px的距离，不再安全显示距离的范围内摆放元素。

CSS样式：

机顶盒支持基础的CSS样式属性和派生选择器，例如:margin, padding, float, position, line-height等，各厂商对于基础样式属性的渲染差异性也不大。

不支持的CSS样式列表（这里只列举在PC平台浏览器上常用的CSS属性）：

1. 伪类，例如: ":active", ":focus", ":visited"等。机顶盒上使用的是遥控器，所以鼠标悬停之类的行为无效。

2. min-width/height, max-width/height 设置元素最大/最小宽带/高度的属性，无效。

3. display: inline, list-item, table等，不建议使用。各厂商中间件渲染差异非常大。

4. z-index，无效。

CSS3和动画效果：

在支持上各厂商偏差较大，由于机顶盒属弱终端类型（硬件资源弱），内置支持的动画功能有限，而且也不是运营商目前强制要求支持的功能。同样就目前网内的应用设计要求上来讲，使用到CSS3及动画的应用非常少，大多停留在实验室演示阶段。

HTML标签：

1. 避免嵌套层级过深，嵌套层级越深CSS渲染偏差越大，元素位置越难控制。

2. 使用绝对定位来布局(div + position: absolute;) ，因为机顶盒有固定的分辨率。在PC平台浏览器上不建议使用绝对定位的原因是因为多分辨率，但这种问题不存在于机顶盒上，而且使用绝对定位来布局复杂结构时更容易控制。

3. 横竖列表形式的布局使用 ul+li+float 而不推荐使用 table，因为 table 内元素样式不容易控制。

4. 在无 <input />标签的页面不使用 <a /> 标签，因为在机顶盒上浏览器会将 a 标签定义为可通过遥控器选择的元素。（这样会出现很多问题，后续章节说明原因）

应用代码样例：

应用界面：

HTML代码:

<!DOCTYPE html>
<html><head><title> 商品首页 </title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="page-view-size" content="1280*720"><link rel="stylesheet" href="../ntv/css/ntv.css"><link rel="stylesheet" href="../css/app.css"></head><body><div class="container product-index"><section class="layout-top-bar"><div class="pos-abs logo"><img src="../images/common/logo.png" alt=""></div><div class="pos-abs banner"><img src="../images/common/banner.png" alt=""></div><div class="pos-abs nav-bar"><ul><li><img src="../images/common/nav_item1.png" alt="11" name="sale.html"></li><li><img src="../images/common/nav_item6.png" alt="12" name="product-index.html"></li><li><img src="../images/common/nav_item2.png" alt="13" name="cart.html"></li><li><img src="../images/common/nav_item3.png" alt="14" name=""></li><li><img src="../images/common/nav_item4.png" alt="15" name=""></li><li><img src="../images/common/nav_item5.png" alt="16" name="help.html"></li></ul><div class="float-clear"></div></div></section><section class="layout-content"><div class="pos-abs content"><div class="category"><div class="pre-btn"><img src="../images/product/pre_btn.png" alt=""></div><ul><li><img src="../images/test/category1.png"></li><li><img src="../images/test/category2.png"></li><li><img src="../images/test/category3.png"></li><li><img src="../images/test/category4.png"></li><li><img src="../images/test/category5.png"></li></ul><div class="pos-rel next-btn"><img src="../images/product/next_btn.png" alt=""></div><div class="float-clear"></div></div><div class="line"></div><div class="ad"><ul><li><img src="../images/test/product_index_ad1.png"></li><li><img src="../images/test/product_index_ad2.png"></li><li><img src="../images/test/product_index_ad3.png"></li></ul><div class="float-clear"></div></div></div></section><!-- 页面焦点元素 start --><section class="layout-focus"><div class="pos-abs category-f"><ul><li><img src="../images/product/category_item.png" alt="21" name="product-list.html"></li><li><img src="../images/product/category_item.png" alt="22" name="product-list.html"></li><li><img src="../images/product/category_item.png" alt="23" name="product-list.html"></li><li><img src="../images/product/category_item.png" alt="24" name="product-list.html"></li><li><img src="../images/product/category_item.png" alt="25,26" name="product-list.html"></li></ul><div class="float-clear"></div></div><div class="pos-abs ad-f"><ul><li><img src="../images/product/ad_item.png" alt="31,32"></li><li><img src="../images/product/ad_item.png" alt="33,34"></li><li><img src="../images/product/ad_item.png" alt="35,36"></li></ul><div class="float-clear"></div></div></section><!-- 页面焦点元素 end --></div>
<!--Script
====================================================== --><script type="text/javascript" src="../ntv/js/1common.js"></script><script type="text/javascript" src="../ntv/js/2core.js"></script><script type="text/javascript" src="../ntv/js/3key.js"></script><script type="text/javascript" src="../ntv/js/4navigation.js"></script><script type="text/javascript" src="../ntv/js/5page.js"></script><script type="text/javascript" src="../ntv/js/6ipanel.js"></script><script type="text/javascript" src="../ntv/js/6ngb_h.js"></script><script type="text/javascript" src="../ntv/js/6pc.js"></script><script type="text/javascript" src="../ntv/js/6shdv.js"></script><script type="text/javascript" src="../ntv/js/7msg.js"></script><script type="text/javascript" src="../ntv/js/8stb.js"></script><script type="text/javascript" src="../ntv/js/effect/effect-slidemenu.js"></script><script type="text/javascript">(function(){ntv.log.console("/page/product-index.html onload");})();</script></body>
</html>

CSS代码：

/*!** Copyright 2014-2015 ...**//*-- common
====================================================== */
.logo{left:45px; top:30px;}
.banner{left:0px; top:100px;}
.nav-bar{left:800px; top:40px;}
.nav-bar li{float: left; height: 45px; height: 45px; margin: 0px 30px 0px 0px;}/*-- page/product-index.html
====================================================== */
.product-index{background-image: url("../images/common/bg.png"); background-repeat: no-repeat;}.product-index .content{left:0px; top: 170px; height: 550px; width: 1280px; background-image: url("../images/product/list_bg.png"); background-repeat: no-repeat;}.product-index .content .category {margin: 10px 0px;}
.product-index .content .category .pre-btn{float: left; width:25px; height: 270px; margin: 0px 10px 0px 50px;}
.product-index .content .category .pre-btn img{margin-top:90px;}
.product-index .content .category li{float: left; height: 260px; width: 181px; margin: 0px 18px 0px 18px;}.product-index .content .category .next-btn{float: left; width:25px; height: 270px; top: -3px;}
.product-index .content .category .next-btn img{margin-top:90px;}.product-index .line{height:2px; width:1280px; background-image: url("../images/product/line.png"); background-repeat: no-repeat;}.product-index .content .ad {margin: 20px 0px 0px 20px;}
.product-index .content .ad li{float: left; height: 223px; width: 358px; margin: 0px 20px 0px 20px;}/* 页面焦点元素 */
.product-index .category-f {left:85px; top:180px;}
.product-index .category-f li{float: left; height: 260px; width: 181px; margin: 0px 18px 0px 18px;}
.product-index .ad-f {left:41px; top:471px;}
.product-index .ad-f li{float: left; height: 223px; width: 358px; margin: 0px 19px 0px 20px;}

本文展示的源代码会在后续章节对代码进行解读并提供源代码下载。

转载于:https://my.oschina.net/cotonchen/blog/372600

ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项相关推荐

已知函数func的C语言代码框架,第三章习题-ddg..doc
第三章习题-ddg. 习题 1．给出以下概念的解释说明. 机器语言程序机器指令汇编语言汇编指令汇编语言程序汇编助记符汇编程序反汇编程序机器级程序通用寄存器定点通用寄存器栈指针寄存器指令指针 ...
NUXT.JS框架打版后生成静态页面CSS太长解决方法
在开发我们公司的恒相产品画册项目时,使用VUE框架开发SEO就无法优化了,最后采用UNXT.JS框架开发此项目.项目第一阶段开发完毕后,打版上线也没有注意CSS的问题,在使用站长工具查询时,抓取页面数 ...
【无标题】Java面向对象第三章知识总结
1.运算符 *,/,%,++x(--x)表示在使用x之前,先使x的值增(减)1,x++(x--)表示在使用x之后,使x的值增(减)1. 2.运算结果由计算过程中精度的高低决定,结果与精度最高的相同. ...
简述JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景
随着web2.0的彪悍发展,以及浏览器端所承载的工作越来越大(在不是很影响性能的情况下,开发者都习惯把能用浏览器做的事儿都让浏览器做,以减轻服务器的压力和带宽费用等).所以Javascript已经成为 ...
list 分组_Todo List(源码已上传git): 待办事项自定义分组 - 第三章
点击右上方红色按钮关注"web秀",让你真正秀起来前言有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义 ...
jQuery系列第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
node.js Next框架的三种渲染方式：客户端渲染、SSG、SSR
前言 next是一款用JS开发的全栈框架,它是基于express框架基础上开发而成,可以用react写客户端,node.js写服务端.一份代码可在前后端同时运行,这在next中称之为同构! 一些nex ...
WebAssembly第三章 JavaScript调用C\C++ 关键字：wasm emcc js c++ c
系列文章目录第一章 WebAssembly概念第二章 Emscripten详解第三章 JavaScript调用C\C++ 第四章 C\C++调用JavaScript WebAssembly第三章 ...
华为数字化转型之道方法篇第三章数字化转型框架
第三章愿景驱动的数字化转型规划一个好的规划应该对准业务战略,既能描绘出企业数字化的愿景和蓝图,使公司上下形成方向上的共识,又能定义出具体的举措.路标和项目,明确责任主体并指导实施. "凡 ...

ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项

ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项相关推荐

最新文章

热门文章