ntv.js框架(第三章) - 機頂盒HTML和CSS編寫注意事項

時間 2019-11-17

標籤 ntv.js ntv 框架第三機頂盒 html css 編寫注意事項欄目 JavaScript 简体版

原文原文鏈接

UI設計：
javascript

機頂盒的輸出設備爲電視機，電視機的圖像重現率比計算機的顯示器小，靠近邊緣部分的文字與圖像可能會在電視機中沒法看到，因此在進行應用界面設計時，文字與圖像儘可能設計在屏幕中間的部位。爲了保證頁面上的內容能夠徹底顯示在電視機上，須要設置一個安全顯示區域。各類型號的電視機，其重現率都是不一樣的，所以對於安全顯示區沒有固定的大小，推薦的安全顯示區域分辨率爲1120×620，即左右各保留80，上下各保留50。css

1. 機頂盒瀏覽器的顯示分辨率是1280×720像素。html

2. 設計圖上下各保留25px，左右各保留40px的距離，再也不安全顯示距離的範圍內擺放元素。java

CSS樣式：瀏覽器

機頂盒支持基礎的CSS樣式屬性和派生選擇器，例如:margin, padding, float, position, line-height等，各廠商對於基礎樣式屬性的渲染差別性也不大。安全

不支持的CSS樣式列表（這裏只列舉在PC平臺瀏覽器上經常使用的CSS屬性）：app

1. 僞類，例如: ":active", ":focus", ":visited"等。機頂盒上使用的是遙控器，因此鼠標懸停之類的行爲無效。ide

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

本文展現的源代碼會在後續章節對代碼進行解讀並提供源代碼下載。