一、等分模块制作
1.1 获取模块宽度
可以清晰的感觉出,模块成三等分。
虽然开始区域和body
开始区域相同,但尾部区域略宽于body区域。
若假设,图片的宽度是被控制的,那这一块儿就不在body中,而可以想到,我们有两种方法设定这一组合模块的整体宽度
- 获取浏览器宽度,然后减去两边的留白宽度
- 设定整体的
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