首页 > > 网页制作 > css >

CSS常见布局

2018-06-24 01:43:12来源：未知阅读 ()

1.一列布局——常用于网站首页。

html：

1 <div class="top"></div>
2 <div class="main"></div>
3 <div class='foot'></div>

css：

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a;
 8         }
 9         .main,.foot{
10             width: 800px;
11             margin:0 auto;
12         }
13         .main{    
14             height: 500px;    
15             background-color: #f1b8e4;
16         }
17         .foot{
18             height: 80px;
19             background-color: #f1f1b8;
20         }

效果：

2.两列(固定宽度)，自适应布局

html：

1 <div class="main">
2     <div class="left"></div>
3     <div class="right"></div>
4 </div>

css：

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin: 0 auto;
 8        }
 9        .left,.right{
10            height: 600px;
11        }
12        .left{
13            width: 20%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .right{
18            width: 80%;
19            float: right;
20            background-color: #f1b8e4;
21        }

效果图：

3.三列(固定宽度)，自适应布局

HTML：

1 <div class="main">
2     <div class="left"></div>
3     <div class="middle"></div>
4     <div class="right"></div>
5 </div>

css：

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin: 0 auto;
 8        }
 9        .left,.right,.middle{
10            height: 600px;
11        }
12        .left{
13            width: 33.3%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .middle{
18            width: 33.3%;
19            float: left;
20            background-color:#f1f1b8;
21        }
22        .right{
23            width: 33.3%;
24            float: right;
25            background-color: #f1b8e4;
26        }

效果图：

4.三列布局，中间自适应，两边固定宽度：position:absolute;

HTML：

1 <div class="left"></div>
2     <div class="middle">
3     区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的 新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法[1]  。2016年5月，货币区块链研究中心出版了国内第一本深入浅出介绍区块链的书籍《区块链：定义未来金融与经济新格局》。其中介绍了区块链技术对未来金融与经济带来的影响。区块链（Blockchain）是比特币的一个重要概念，火币联合清华大学五道口金融学院互联网金融实验室、新浪科技发布的《2014—2016全球比特币发展研究报告》提到区块链是比特币的底层技术和基础架构[2]  。本质上是一个去中心化的数据库，同时作为比特币的底层技术。区块链是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一次比特币网络交易的信息，用于验证其信息的有效性（防伪）和生成下一个区块。
4     </div>
5 <div class="right"></div>

css:

 1  body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .left,.right,.middle{
 6            height: 600px;
 7        }
 8        .left{
 9            width: 200px;
10          position:absolute;
11          left: 0;
12          top:0;
13            background-color:#f19b6a;
14        }
15        .middle{
16            margin: 0 310px 0 210px;
17            background-color:#f1f1b8;
18        }
19        .right{
20            width: 300px;
21            position: absolute;
22            right: 0;
23            top:0;
24            background-color: #f1b8e4;
25        }

效果图：

5.混合布局

html：

 1 <div class="top">
 2     <div class="header"></div>
 3 </div>
 4 <div class="main">
 5     <div class="left"></div>
 6     <div class="right">
 7         <div class="sub_left"></div>
 8         <div class="sub_right"></div>
 9     </div>
10 </div>
11 <div class='foot'></div>

css：

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a;
 8         }
 9         .top .header{
10             width: 800px;
11             height: 80px;
12             margin: 0 auto;
13             background-color: #e27386;
14         }
15         .main,.foot{
16             width: 800px;
17             margin:0 auto;
18         }
19         .main{    
20             height: 600px;    
21             background-color: #f1b8e4;
22         }
23         .foot{
24             height: 80px;
25             background-color: #f1f1b8;
26         } 
27         .main .left{
28             width: 200px;
29             height: 600px;
30             float: left;
31             background-color: #dcff93;
32 
33          }
34          .main .right{
35              width: 590px;/*600px没有粉红色缝隙*/
36              height: 600px;
37              float:right;
38              background-color: #b8f1cc;
39          }
40          .sub_left{
41              width: 200px;
42              height: 600px;
43              float: left;
44              background-color: #f2debd;
45          }
46          .sub_right{
47              width: 380px;/*390px没有中间绿色缝隙*/
48              height: 600px;
49              float: right;
50              background-color: #c86f67;
51          }