文档章节

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

coton_chen
 coton_chen
发布于 2015/01/28 11:18
字数 1518
阅读 1058
收藏 1

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;}

 

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

© 著作权归作者所有

coton_chen
粉丝 23
博文 25
码字总数 16358
作品 0
静安
架构师
私信 提问
ntv.js框架(第四章) - 机顶盒Javscript编写和调试方法

在我们编写Javscript时,首先要分清楚2个概念,1是使用W3C标准来处理HTML DOM元素(例如修改标签HTML、文本、状态、形状等),2是使用中间件规范接口来处理音视频等业务功能(例如播放音视频...

coton_chen
2015/02/02
0
3
ntv.js框架(第二章) - 源代码目录结构

源代码目录结构: css // 包含一些标签默认样式重置、常用class、组件所需的css样式 images // 包含了2张透明图,具体用处后续介绍(可选目录) js // 框架核心代码 js/effect // 框架提供的...

coton_chen
2015/01/27
0
0
ntv.js框架源码解读 - 4navigation.js

4navigation.js源代码: ntv.navigation类,处理页面焦点移动和确认、刷新等操作动作。 在讲解框架处理焦点移动前,先讲解下机顶盒上焦点移动的工作原理,以便开发者能更好的了解框架采用这种...

coton_chen
2015/04/29
0
4
ntv.js框架源码解读 - 1common.js和2core.js

1common.js源代码: 全局 $ 对象,类似于jQuery框架的命名形式,用于缩短函数名,精简代码。此文件只包含提供全局作用域的常用对象。 var $ = function(selector){}; // Id选择器的函数封装。...

coton_chen
2015/02/04
0
0
ntv.js框架源码解读 - 3key.js

3key.js源代码: ntv.key类,遥控器键值和系统消息的监听代理接口及遥控器键值的绑定。 ntv.key = function(){}; ntv.key.init = function(){ this.listener_keyevent(); // 键值事件监听,监...

coton_chen
2015/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

进程命令pgrep

命令pgrep 名称缩写: Process Grep 用途: 进程检索,以名称为依据从运行进程队列中查找进程,并显示查找到的进程id 语法: ]# pgrep [选项] 参数 选项: -d, --delimiter <string> 指定输出分...

迷失De挣扎
5分钟前
0
0
rest 的理解

rest:表现层状态转移。 什么是restful协议?https://en.wikipedia.org/wiki/Representational_state_transfer 使用restful的好处。 Rest是一种体系结构样式,他定义了一组用于创建web服务的...

xiaoxiao_go
12分钟前
0
0
聊聊spring cloud的CachingSpringLoadBalancerFactory

序 本文主要研究一下spring cloud的CachingSpringLoadBalancerFactory CachingSpringLoadBalancerFactory spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/o......

go4it
昨天
4
0
一篇文章搞定——JDK8中新增的StampedLock

一、StampedLock类简介 StampedLock类,在JDK1.8时引入,是对读写锁ReentrantReadWriteLock的增强,该类提供了一些功能,优化了读锁、写锁的访问,同时使读写锁之间可以互相转换,更细粒度控...

须臾之余
昨天
4
0
Android Camera原理之CameraDeviceCallbacks回调模块

在讲解《Android Camera原理之openCamera模块(二)》一文的时候提到了CameraDeviceCallbacks回调,当时没有详细展开,本文我们详细展开讲解一下。 CameraDeviceCallbacks生成过程: 《Android...

天王盖地虎626
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部