一、上中下一栏式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0px;margin: 0px;} .box{width: 800px;margin: 0 auto;text-align: center;} header{height: 100px;background-color: #0a2;} section{height: 700px;background-color: #eee;} footer{height: 100px;background-color: #234;} </style> </head> <body> <div class="box"> <header>header</header> <section>section</section> <footer>footer</footer> </div> </body> </html>
二、左右两栏式
1.浮动+普通流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .box{ width: 80%;/*用%的形式，便于使屏幕自适应*/ margin: 0px auto; } .aside{ width: 20%; height: 1000px; background-color: #9af; float: left;/*采取向左浮动*/ } .article{ height: 1000px; background-color: #fe8; margin-left: 20%; } </style> </head> <body> <div class="box"> <aside class="aside">aside</aside> <article class="article">article</article> </div> </body> </html>
2.纯浮动式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .box{ width: 80%;/*用%的形式，便于使屏幕自适应*/ margin: 0px auto; overflow: hidden;/*浮动元素不会撑开父级高度，加上清除浮动*/ } .aside{ width: 20%; height: 1000px; background-color: #9af; float: left;/*采取向左浮动*/ } .article{ height: 1000px; width:80%; background-color: #fe8; float: left; } </style> </head> <body> <div class="box"> <aside class="aside">aside</aside> <article class="article">article</article> </div> </body> </html>
3.绝对定位式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .box{ width: 80%;/*用%的形式，便于使屏幕自适应*/ margin: 0px auto; position: relative;/*父级相对定位*/ } .aside{ width: 20%; height: 1000px; background-color: #9af; position: absolute;/*左边绝对定位*/ } .article{ height: 1000px; width:80%; background-color: #fe8; margin-left: 20%;/*留出左边的位置*/ } </style> </head> <body> <div class="box"> <aside class="aside">aside</aside> <article class="article">article</article> </div> </body> </html>
三、左右两栏加页眉页脚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .box{ margin: 0 auto; width: 80%; text-align: center; } .header{ height: 50px; background-color: #810; } .content{ height: 500px; } .aside{ width: 20%; float: left; height:100%; background-color: #f65; } .article{ background-color: #fcc; height: 100%; } .footer{ height: 100px; background-color: #000; } </style> </head> <body> <div class="box"> <header class="header"> 这是头部 </header> <div class="content"> <aside class="aside">这是左边</aside> <article class="article">这是右边</article> </div> <footer class="footer">这是尾部</footer> </div> </body> </html>
四、左中右三栏式布局
要求：随着屏幕的改变，两边宽度不变，中间屏幕大小随之改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } .box{ width: 80%; margin: 0px auto; } .left,.right{ width: 200px; height: 500px; } .left{ background-color: #fcc; float: left;/*左边左浮动*/ } .right{ background-color: #cfc; float: right;/*右边又浮动*/ } .article{ background-color: #ccf; height: 500px; margin: 0px 200px;/*将左右两边留出来*/ } </style> </head> <body> <div class="box"> <aside class="left">左边</aside> <div class="right">右边</div> <article class="article">中间</article><!-- 注意：中间的那一部分要最后写，因为左右两边浮动，脱离文档流，最后写中间的部分，能够与浮动的其他元素位于一行 --> </div> </body> </html>