用浮动的方式实现一个网站的整体规划

 

要实现的样子：

实现的样子：

清除浮动的实现不再是用父元素加高度的方式去实现的，而是用的隔墙法和overfllow：hidden结合的方式去实现的。

在css的设计中，层次很重要，一定要分好层。然后一层一层去实现。

overflow:hidden;除了可以防止后一组的元素去追前一组的元素之外，还可以使得父元素有高。

比如，在这次的小程序中，如果不加下面这句话，

本来应该在底部的深绿色的盒子就会跑到上面来，像下图这样：（因为深绿色的盒子没有浮动，因为main盒子里面的子元素都浮动了，所以main盒子就相当于没有高度，所以深绿色的盒子就上去了。）

          

 

 

 

 

 

 

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         *{
  8             padding:0;
  9             margin:0;
 10         }
 11         body{
 12             width:970px;
 13             margin:0 auto; 
 14         }
 15         .cl{
 16             clear:both;
 17         }
 18         .h10{
 19             height:10px;
 20         }
 21         .header{
 22             overflow:hidden;
 23         }
 24         .header .logo{
 25             float:left;
 26             width:277px;
 27             height:103px;
 28             background-color: red;
 29         }
 30         .header .language{
 31             float:right;
 32             width:137px;
 33             height:49px;
 34             background-color: lightgreen;
 35             margin-bottom: 8px;
 36         }
 37         .header .nav{
 38             float:right;
 39             width:679px;
 40             height:46px;
 41             background-color: lightgreen;
 42         }
 43         .content{
 44 
 45         }
 46         .content .banner{
 47             float:left;
 48             width:310px;
 49             height:435px;
 50             background-color: orange;
 51             margin-right: 10px;
 52         }
 53         .content .rightpart{
 54             float:left;
 55             width:650px;
 56         }
 57         .content .rightpart .main{
 58             overflow: hidden;
 59         }
 60         /* 在rightpart这个盒子里就一组浮动的元素，所以不用考虑清除浮动 */
 61         .content .rightpart .main .news{
 62             float:left;
 63             width:450px;
 64             margin-right:10px;
 65         }
 66         .content .rightpart .main .news .news1{
 67             width:450px;
 68             height:240px;
 69             background-color: skyblue;
 70             margin-bottom: 10px;
 71         }
 72         .content .rightpart .main .news .news2{
 73             width:450px;
 74             height:110px;
 75             background-color: skyblue;
 76             margin-bottom:10px;
 77         }
 78         .content .rightpart .main .news .news3{
 79             width:450px;
 80             height:30px;
 81             background-color: skyblue;
 82         }
 83         .content .rightpart .main .hotpic{
 84             float:right;
 85             width:190px;
 86             height:400px;
 87             background-color: purple;
 88         }
 89         .content .rightpart .links{
 90             width:650px;
 91             height:25px;
 92             background-color: green;
 93             margin-top: 10px;
 94         }
 95         .footer{
 96             width:970px;
 97             height:35px;
 98             background-color: darkblue;
 99         }
100     </style>
101 </head>
102 <body>
103     <div class="header">
104         <div class="logo">logo</div>
105         <div class="language">语言选择</div>
106         <div class="nav">导航条</div>
107     </div>
108     <div class="cl h10"></div>
109     <div class="content">
110         <div class="banner">大广告</div>
111         <div class="rightpart">
112             <div class="main">
113                 <div class="news">
114                     <div class="news1"></div>
115                     <div class="news2"></div>
116                     <div class="news3"></div>
117                 </div>
118                 <div class="hotpic">热点</div>
119             </div>
120             <div class="links">链接</div>
121         </div>
122     </div>
123     <div class="cl h10"></div>
124     <div class="footer">
125         
126     </div>
127 </body>
128 </html>
View Code

 

posted @ 2017-03-09 15:39  小瑶瑶218  阅读(263)  评论(0)    收藏  举报