CSS使用浮动属性和边距设计3行3列定宽的布局
下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面。
实例
设计步骤如下：
1. 制作3行3列定宽布局的XHTML部分。源代码如下：
<!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=gb2312" />
<title>CSS使用浮动属性和边距设计3行3列定宽的布局实例-www.baike369.com</title>
</head>
<body>
<div id="main">
<div id="header">这里是#header</div>
<div id="menu">
<ul>
<li>菜单项目1</li>
<li>菜单项目2</li>
<li>菜单项目3</li>
<li>菜单项目4</li>
<li>菜单项目5</li>
</ul>
</div>
<div id="content">
<p>主要的内容。</p>
<p>主要的内容。</p>
<p>主要的内容。</p>
<p>主要的内容。</p>
<p>主要的内容。</p>
<p>主要的内容。</p>
</div>
<div id="other">
<ul>
<li>其他内容</li>
<li>其他内容</li>
<li>其他内容</li>
</ul>
</div>
<div id="footer">这里是#footer</div>
</div>
</body>
</html>
2. 制作3行3列定宽布局的CSS部分。
由于中间3列的宽度固定，因此可以设定3列左浮动。CSS代码如下：
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
font:small/1.5 "宋体",serif;
background:#FFF;
}
li{
list-style:none;
padding-left:15px;
}
#main{
width:770px;
margin:auto;
padding:3px;
border:2px solid #999;
background:#FFC;
}
#header{
line-height:50px;
background:#c6c;
margin-bottom:5px;
height:50px;
}
#menu{
width:200px;
float:left;
margin-right:5px;
background:#9f9;
}
#content{
width:390px;
float:left;
margin-right:5px;
margin-bottom:5px;
background:#9cf;
}
#other{
width:170px;
float:left;
background:#fc6;
}
#footer{
line-height:50px;
background:#c6c;
clear:both;
height:50px;
}
-->
</style>
不浮动的footer层出现在content层的右边，因此需要对footer层设定clear属性。
设定clear属性后，footer层不仅位于所有浮动层之下，同时，父层main的高度也能包含所有子元素。但是，此时footer层和content层之间没有边距，因此需要为content层添加下边距。
3. 代码运行后，页面的显示效果如下图所示：
提示
本例只是一个理想状态下的基础步骤，在实际应用中，还需要根据具体情况进行调整。
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
