當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/4/15 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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></div> <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编写注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Mongodb副本集配置
下一篇： POJ 1182 食物链 [并查集带权