前段练习 静态网页（三）：文字列表轮播与横向排列

一、等分模块制作

1.1 获取模块宽度

可以清晰的感觉出，模块成三等分。

虽然开始区域和body开始区域相同，但尾部区域略宽于body区域。
若假设，图片的宽度是被控制的，那这一块儿就不在body中，而可以想到，我们有两种方法设定这一组合模块的整体宽度

1. 获取浏览器宽度，然后减去两边的留白宽度
2. 设定整体的mergin-left为body部分留白宽度，然后设置百分比width来逐步调节宽度
   若假设，图片的宽度是没有被控制的，那么我们就只需要考虑内部模块的宽度

我们先假设是后者，该模块是在div.body中的，只是图片的宽度没有被控制好，溢出了。那我们只需要考虑下属模块的宽度
我们先获取到body模块的宽度为885，有两个空隙，将空隙宽度设为15，则三等分的每个模块宽度为285
为了形成横向排列，设定float=left

        <!-- 额外内容部分 -->
        <div class="extra left extraLeftPadding">
            <p class="h2">签约快讯</p>
            <a href="#"><img src="images/top.png" width="100%" /></a>
        </div>
        <div class="extra left extraLeftPadding">
            
            <p class="h2">网络解决方案</p>
            <a href="#"><img src="images/top.png" width="100%" /></a>
        </div>
        <div class="extra left">
            <p class="h2">网络经典案例</p>
            <a href="#"><img src="images/top.png" width="100%" /></a