|
下面以“1-2-1”布局为基础制作“1-3-1”布局。这里仍然使用浮动方式来排列横向并排的3栏，效果如图1所示。  图1 “1-3-1”布局 这种布局同样可以用两种方法制作，案例文件分别位于网页学习网CSS教程资源“第13章\1-3-1-absolute.htm”和“第13章\1-3-1-float.htm”。 对于这个页面，要在“1-2-1”布局的基础上修改HTML的结构，只需在container中的左边增加一列即可，这里将新增加的列命名为navi。 相信读者已经可以自己写出相应的HTML代码，并使用“绝对定位法”和“浮动法”实现所需的效果，这里就不再赘述了。这里仅给出“浮动法”的CSS样式关键代码。lodidance.com 折叠CSS 代码复制内容到剪贴板
#navi、#content和#side这3栏都使用浮动方式．3列的宽度之和正好等于总宽度。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/943.html |
