CSS_常见布局
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 }
效果图: