3.拓展阅读：焦点图
3.1 焦点图
焦点图，从应用的角度来说就是将企业的主打产品、服务和企业核心经营理念等以大版面的图片方式呈现在网站上。呈现的图片通常是最新、最热门的产品或者服务，让用户一进入网站，视线就紧紧地被抓住。在使用焦点图时需要注意的事项有：
（1）图片要经过精心的设计和挑选。焦点图图片内容不能太复杂，要能聚焦到用户想要传达的信息。图片要精心设计与制作，不能使用网站一些通用的素材图片。
（2）在使用响应模式设计的网站上，需要单独为移动终端配置图片，确保在手机、iPad等移动端上也有良好的显示效果。
（3）网站焦点图需要经常测试与跟踪，统计网站浏览用户的转化率，不断地更新图片。
3.2 网页字体大小单位的选择
图3-18 字体大小
3.2.1 px
px像素，是绝对长度单位的一种，它的大小是根据用户屏幕显示器的分辨率决定的（因此不同的设备显示相同的像素值也可能会有不同的结果）。如果网页设计人员使用px作为字体单位，那么其字体大小将不能被更改。
3.2.2 em
em的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是16px，未经调整的浏览器显示1em=16px。但是有一个问题，如果设置1.2em 则变成19.2px，问题是px表示大小时数值会忽略掉小数位的。而且1em=16px 并不容易转换，因此，我们常常人为地使1em=10px。这里要借助字体的%来作为桥梁。
因为默认字体16px=100%，则有10px=62.5%，所以首先在body中全局声明font-size=62.5%=10px，也就是定义了网页body 默认字体大小为10px。由于em有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了body 默认字体大小1em=10px。
但是由于em是相对于其父级字体的倍数的，当出现有多重嵌套内容时，使用em分别给它们设置字体大小往往要重新计算。比如说你在父级中声明了字体大小为1.2em，那么在声明子元素的字体大小时设置1em 才能和父级元素内容字体大小一致，而不是1.2em（避免1.2×1.2=1.44em），因为此em非彼em。
3.2.3 rem
有了rem，再也不用担心还要根据父级元素的font-size 计算em值了，因为它始终是基于根元素（<html>）的。比如默认的html font-size=16px，那么想设置12px 的文字就是：12÷16=0.75（rem）。
需要注意的是，为了兼容不支持rem的浏览器，我们需要在各个使用了rem的地方的前面写上对应的px值，这样不支持rem的浏览器就可以优雅降级兼容性详情了。
选择使用什么字体单位主要由具体项目来决定，如果你的用户群都使用最新版的浏览器，推荐使用rem；如果要考虑兼容性，那就使用px，或者两者同时使用。