网页常见布局

网页主流布局的类型
静态布局(static)
　　【一列布局】
　　　　1、页面内容区域有一个固定宽度
　　　　2、页面内容区域在浏览器窗口中自适应居中
　　　　3、实现办法
　　　　　　页面内容区域box{ 自定义宽度;margin:0 auto;}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>一列布局，一列自适应居中</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11           html,body{
12                 height: 100%;
13             }
14         .container{
15             background-color:#8FE083;
16             height:100%;
17         }
18 
19         .container{
20             width: 970px;
21             margin: 0 auto;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="container">页面主体内容最外围大盒子</div>
27 </body>
28 </html>

View Code

　　【两列布局】
　　　　1、一列固定宽，一列自适应宽
　　　　2、固定宽度的列:通常称为边栏(左右均可)，主要放置一些固定性的内容，如导航，菜单之类
　　　　3、自适应宽的列:根据浏览器窗口的大小自动判断宽度，主要放置主体内容
　　　　4、实现办法
　　　　　　固定列容器{固定数值;float:left/right;}
　　　　　　自适应列容器{margin-方向:数值=固定列宽;}

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两列布局:一列固定宽，一列自适应</title> 6 <style> 7 *{margin: 0;padding: 0; } 8 html,body{height: 100%} 9 aside,.main{height:100%;} 10 aside{background-color: #72C7A1;} 11 .main{background-color: #E0C569;} 12 13 aside{width: 200px;float: left;height: 200px;} 14 .main{margin-left:210px;padding-left: 10px;} 15 16 </style> 17 </head> 18 <body> 19 <aside>边栏导航</aside> 20 <div class="main">主体box</div> 21 </body> 22 </html>

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局:左右固定列宽，中间列自适应</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 html,body{height: 100%;} 9 .main,.sidebox-left,.sidebox-right{height: 100%;} 10 .main{background-color: #1A2F90;color:#fff;} 11 .sidebox-left{width:200px;background-color:#CDE36D; } 12 .sidebox-right{width:300px;background-color: #FB81E7;} 13 14 15 .main,.sidebox-left,.sidebox-right{float: left;} 16 .main{width:100%;box-sizing:border-box;padding-left: 200px;padding-right:300px;} 17 .sidebox-left{margin-left:-100%;} 18 .sidebox-right{margin-left:-300px;} 19 20 </style> 21 </head> 22 <body> 23 <div class="main">中间主体main内容</div> 24 <aside class="sidebox-left">左边的边栏</aside> 25 <aside class="sidebox-right">右边的边栏</aside> 26 </body> 27 </html>

网页常见布局

相关推荐