PC端布局02

 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>