简单的网页布局(注释就不写了,看看就懂了,不懂看前面的两个博文都有详细讲解)
效果图:
网页布局.html
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>网页布局</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="first">导航</div>
<div id="second">
<div id="left">左边框</div>
<div id="center">中间边框</div>
<div id="right">右边框</div>
</div>
<div id="third">版权信息</div>
</body>
</html>
style.css
@charset "gb2312";
/* CSS Document */
#first,#second,#third{
width:1366px;
margin:0 auto;
}
#first{
height:150px;
background:#009;
color:#FFF;
padding-top:75px;
padding-left:683px;
}
#second{
height:200px;
background:#996;
margin-top:5px;
}
#third{
height:100px;
background:#CFF;
margin-top:5px;
}
#left{
width:455px;
height:200px;
border:1px solid #333;
float:left;
margin-right:5px;
background:#FFF;
}
#center{
width:450px;
height:200px;
border:1px solid #333;
float:left;
margin-right:5px;
background:#0C3
}
#right{
width:440px;
height:200px;
border:1px solid #333;
float:left;
background:#93C
}