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>PC端布局</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .top, 15 .banner, 16 .main, 17 .footer { 18 width: 960px; 19 margin: 0 auto; 20 border: 1px dashed #cccccc; 21 text-align: center; 22 background: pink; 23 } 24 25 .top { 26 height: 120px; 27 } 28 29 .banner { 30 height: 150px; 31 } 32 33 .main { 34 height: 400px; 35 } 36 37 .left { 38 width: 360px; 39 height: 400px; 40 background: rebeccapurple; 41 float: left; 42 } 43 44 .right { 45 width: 590px; 46 height: 400px; 47 float: right; 48 background: honeydew; 49 } 50 51 .footer { 52 height: 80px; 53 } 54 </style> 55 </head> 56 57 <body> 58 <div class="top">top</div> 59 <div class="banner">banner</div> 60 <div class="main"> 61 <div class="left">left</div> 62 <div class="right">right</div> 63 </div> 64 <div class="footer">footer</div> 65 </body> 66 67 </html>
