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. 在无 标签的页面不使用 标签，因为在机顶盒上浏览器会将 a 标签定义为可通过遥控器选择的元素。（这样会出现很多问题，后续章节说明原因）
应用代码样例：
应用界面：
HTML代码:
商品首页