div+css格局之固定浮动布局
日期：2014-05-17 浏览次数：20792 次
div+css布局之固定浮动布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定浮动布局-三列</title>
<link rel="stylesheet" style="text/css" href="style2.css">
</head>
<body>
<div id="header"><h1>上标题</h1></div>
<div id="body">
<div id="navl">左导航</div>
<div id="main">中内容</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>下版权</p></div>
</body>
</html>
?
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{
border:1px solid black;
width:600px;
height:60px;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
height:60px;
line-height:60px;
font-size:16px;
text-align:center;
}
#body{
width:600px;
margin:0 auto;
}
#navl{
border:1px solid black;
width:150px;
height:500px;
float:left;
margin-bottom:10px;
background:lightcyan;
}
#main{
border:1px solid black;
width:294px;/*边框也算一个像素*/
height:500px;
float:left;
margin-bottom:10px;
background:lightblue;
}
#navr{
border:1px solid black;
width:150px;
height:500px;
float:right;
margin-bottom:10px;
background:lightyellow;
}
#footer{
border:1px solid black;
width:600px;
height:60px;
line-height:60px;
margin:0 auto;
text-align:center;
clear:both;
}
?
效果如下：
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
