1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title></title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         
14         ul {
15             list-style: none;
16         }
17         
18         .top,
19         .banner,
20         .main,
21         .footer {
22             margin: 0 auto 10px;
23             border: 1px dashed #ccc;
24             text-align: center;
25         }
26         
27         .top {
28             background: red;
29             height: 100px;
30         }
31         
32         .banner {
33             width: 960px;
34             height: 200px;
35             background: green;
36         }
37         
38         .main {
39             width: 960px;
40             height: 300px;
41             background: pink;
42         }
43         
44         .main ul li {
45             width: 240px;
46             height: 300px;
47             background-color: aquamarine;
48             float: left;
49         }
50         
51         .main ul li:nth-child(even) {
52             background-color: brown;
53         }
54         
55         .footer {
56             height: 100px;
57             background-color: azure;
58         }
59     </style>
60 </head>
61 
62 <body>
63     <div class="top">top</div>
64     <div class="banner">bnaner</div>
65     <div class="main">
66         <ul>
67             <li>1</li>
68             <li>2</li>
69             <li>3</li>
70             <li>4</li>
71         </ul>
72     </div>
73     <div class="footer">footer</div>
74 
75 </body>
76 
77 </html>