CSS使用浮动属性和边距设计3行3列定宽的布局实例
2016-07-17 23:36
701 查看
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. 代码运行后，页面的显示效果如下图所示：
提示
本例只是一个理想状态下的基础步骤，在实际应用中，还需要根据具体情况进行调整。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 