CSS框架(1)

最新推荐文章于 2024-05-04 15:47:11 发布

dfgd8989

最新推荐文章于 2024-05-04 15:47:11 发布

阅读量53

点赞数

原文链接：http://www.cnblogs.com/zyh-bg/archive/2012/08/08/2629116.html

版权

老师讲CSS时一定提到过可以用CSS设置div来构建框架，展示一下我构建的~~

用CSS构建框架

 1 <style type="text/css">
 2 div{
 3 border:1px solid #000;
 4 }
 5 width{
 6 width:800px;
 7 margin:2px auto;
 8 }
 9 /*banner*/
10 .banner{
11 height:100px;
12 width:800px;
13 margin:2px auto;
14 }
15 /*menu*/
16 .menu{
17 height:50px;
18 width:800px;
19 margin:2px auto;
20 }
21 /*box1*/
22 .box1{
23 height:500px;
24 width:800px;
25 margin:2px auto;
26 }
27 
28 .same{
29 height:495px;
30 }
31 .left{
32 width:374px;
33 float:left;
34 }
35 /*box2*/
36 .box2{
37 width:420px;
38 float:right;
39 margin-left:2px;
40 }
41 .right1{
42 width:200px;
43 float:left;
44 }
45 .right2{
46 width:214px;
47 float:right;
48 }
49 .center{
50 height:495px;
51 }
52 .clear{
53 clear:both;
54 }
55 </style>
56 </head>
57 
58 <body>
59 <div class="banner "></div>
60 <div class="menu "></div>
61 <div class="box1 " style="border:none;">
62   <div class="left same">a </div>
63   <div class="box2" style="border:none;">
64     <div class="right1 center">b</div>
65     <div class="right2 center">c</div>    
66   </div>
67   <div class="clear" style="border:none;"></div>
68 </div>
69 </body>
70 </html>