CSS教程-使用ul进行网页的多列布局
网站建设 2025-06-14 05:19www.dzhlxh.cn网站建设
近日我在尝试使用CSS实现三列布局时,脑海中闪现出一个新颖的想法。虽然这个想法有些激进,但我仍想与大家分享并寻求宝贵的建议。
通常,我们在创建三列布局时,可能会选择使用嵌套的DIV元素。这种方式虽然能减少出错的可能性,但在后期维护和调整时可能会稍显复杂。而我们常常使用无序列表`
- `来布局导航,那么是否可以用它来布局整个页面的多列内容呢?
- 这是左边
-
- 这是中间的上部
- 这是中间的下部
- 这是右边
这是一个固定宽度的布局设计,也就是说它的流动性不是特别强。对于流动性的布局,我尚未进行尝试,但计划在未来进行。
以下是我为这种布局所写的代码示例:
```html
{margin:0; padding:0;}
body {width:100%; height:100%; background:ddedfb;}
mainContent {width:600px; margin:10px auto;}
header, footer {background:8AC7FA; height:80px; clear:both;}
footer {clear:both; padding-top:10px;}
content {height:300px; margin:10px auto;}
content ul {list-style:none; height:100%;}
content ul li {width:150px; height:100%; background:8AC7FA; float:left;}
content ul lili2 {width:280px; margin:0 10px;}
content ul lili2 ul li {width:270px; height:140px; margin:5px; background:0581F0;}
这是头部