繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:使用ul进行网页的多列布局
- CSS样式表
- 推荐一篇利用th,colgroup,col定义表格样式
- 都是IE惹的祸多浏览器兼容问题
- dl,dt,dd制作的CSS垂直菜单
- 推荐css打造经典鼠标触发显示选项
- div+css中Class与ID的区别
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- 让iframe自适应高度（支持xhtml）IE firefox兼容
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- CSS控制文本自动换行的问题
- 把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
- 仿客齐集首页导航条DIV+CSS+JS [代码实例]
- 关于margin-left的示例代码
- CSS优化2-(常用CSS缩写语法总结)
- font和line-height之CSS代码书写顺序不同，导致显示效果不一样
- 推荐三种简洁的Tab导航（网页选项卡）简析
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
- 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
- CSS2实现的隔行换色
- CSS中几种常见的注释
- dhtml shtml xhtml的区别解析
CSS样式表 中的 CSS教程:使用ul进行网页的多列布局
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 129 ::
收藏到网摘: n/a
几天在用CSS写三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方请各位不吝指教。
当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式：
使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用<ul>列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用<ul>来进行页面的多列布局。
这是一个固定宽度的布局，也就是说流动性不强，流动性的布局目前还没有试验过，等有时间了再试验一下，下面贴上这个布局的代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>使用UL进行多列布局</title>
<style type=”text/css”>
* {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 li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head><body>
<div id=”mainContent”>
<div id=”header”>这是头部</div>
<div id=”content”>
<ul>
<li>这是左边</li>
<li id=”li2″>
<ul>
<li>这是中间的上部</li>
<li>这是中间的下部</li>
</ul>
</li>
<li>这是右边</li>
</ul>
</div>
<div id=”footer”>这是底部</div>
</div>
</body>
</html>
这段代码在IE7及FF3下都能正常显示，其他浏览器未做测试，如果你有更好的方法不妨提出来。
评论 (0) All
