首页 > 代码库 > 13.4 ＂1-3-1＂固定宽度布局

13.4 ＂1-3-1＂固定宽度布局

2024-07-08 21:21:13   214人阅读

下面以“1-2-1”布局为基础制作“1-3-1”布局。这里仍然使用浮动方式来排列横向并排的3栏，效果如图1所示。

图1 \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 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:760px;   
  4.  }    
  5.   
  6. #navi{   
  7.     float:left;   
  8.     width:200px;       
  9.     }   
  10.   
  11.   
  12. #content{   
  13.     float:left;   
  14.     width:360px;       
  15.     }   
  16.   
  17. #content img{   
  18.     float:right;   
  19.     }   
  20.   
  21. #side{   
  22.     float:left;   
  23.     width:200px;   
  24.     }   
  25.   
  26. #pagefooter{   
  27.     clear:both;   
  28. }  

#navi、#content和#side这3栏都使用浮动方式．3列的宽度之和正好等于总宽度。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/943.html


联系
我们