1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >盒子模型的应用</ title >
     < link  href = "index.css"  type = "text/css"  rel = "stylesheet" >
</ head >
< body >
     < div  class = "top" >
         < div  class = "top_content" ></ div >
     </ div >
 
     < div  class = "body" >
         < div  class = "body_img" ></ div >
         < div  class = "body_content" >
             < div  class = "body_no" ></ div >
         </ div >
     </ div >
 
     < div  class = "footing" >
         < div  class = "footing_content" ></ div >
         < div  class = "footing_subSav" ></ div >
     </ div >
</ body >
</ html >


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
*{
     margin: 0px;
     padding: 0px;
}
 
.top{
     width: 100%;
     height: 50px;
     background-color: black;
}
 
.top_content{
     width: 75%;
     height: 50px;
     margin: 0px auto;
     background-color: blue;
}
 
.body{
     margin: 20px auto;
     width: 75%;
     height: 1500px;
     background-color: blanchedalmond;
}
 
.body_img{
     width:100%;
     height: 400px;
     background-color: darkorange;
}
 
.body_content{
     width: 100%;
     height: 1100px;
     background-color: blueviolet;
}
 
.body_no{
     width: 100%;
     height: 50px;
     background-color: aqua;
}
 
.footing{
     width: 75%;
     height: 400px;
     background-color: indigo;
     margin: 0px auto;
}
 
.footing_content{
     width: 100%;
     height: 300px;
     background-color: darkseagreen;
}
 
.footing_subSav{
     width: 100%;
     height: 100px;
     background-color: black;
}