educoder实训平台----网页布局页面的制作
第1关:网页布局的结构设计
<! doctype html >
< html>
< head>
< meta charset = " utf-8" >
< title> 网页布局</ title>
</ head>
< body>
< div id = " top" > </ div>
< div id = " nav" > </ div>
< div id = " banner" > </ div>
< div id = " content" >
< div class = " content_left" > </ div>
< div class = " content_middle" > </ div>
< div class = " content_right" > </ div>
</ div>
< div id = " footer" > </ div>
</ body>
</ html>
第2关:网页布局的样式设计
<! doctype html >
< html>
< head>
< meta charset = " utf-8" >
< title> 网页布局</ title>
< style type = " text/css" >
body {
margin : 0; padding : 0; }
div {
width : 980px;
margin : 0 auto;
}
#top {
height : 40px; background : url ( https://www.educoder.net/api/attachments/2141326) }
#nav {
height : 60px; background : url ( https://www.educoder.net/api/attachments/2141327) }
#banner {
height : 200px; background : url ( https://www.educoder.net/api/attachments/2141342) }
#content {
height : 300px; }
.content_left {
width : 200px;
height : 300px;
background-color : #CCC;
float : left;
margin : 0;
background : url ( https://www.educoder.net/api/attachments/2141349)
}
.content_middle {
width : 570px;
height : 300px;
background-color : #CCC;
float : left;
margin : 0 0 0 5px;
background : url ( https://www.educoder.net/api/attachments/2141352)
}
.content_right {
width : 200px;
background-color : #CCC;
float : right;
height : 300px;
margin : 0;
background : url ( https://www.educoder.net/api/attachments/2141351)
}
#footer {
height : 90px;
background : url ( https://www.educoder.net/api/attachments/2141353)
}
</ style>
</ head>
< body>
< div id = " top" > </ div>
< div id = " nav" > </ div>
< div id = " banner" > </ div>
< div id = " content" >
< div class = " content_left" > </ div>
< div class = " content_middle" > </ div>
< div class = " content_right" > </ div>
</ div>
< div id = " footer" > </ div>
</ body>
</ html>