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>
