/* CSS Document */ /*基本信息*/ body{ margin:0px; /*外边距*/ text-align:center; /*文字居中对齐*/ background:#E1D0BB; /*背景色*/ } /*页面层容器*/ #container{ width:80%; height:100%; margin-left:10%; margin-right:10%; background:#ABE0F1; } /*头部*/ #header{ width:100%; height:15%; margin:0px; background:#FF0000; } #logo{ float:left; /*浮动属性,居左对齐,使其可以在同一行显示*/ width:60%; height:80%; margin:0px; background:#E18CDD; clear:left; /*取消左侧浮动*/ } #banner{ float:right; /*浮动属性,居右对齐,使其可以在同一行显示*/ width:38%; height:80%; margin:0px; background:#8376D8; clear:right; /*取消右侧浮动*/ } #menu{ width:100%; height:5%; margin:0px; background:#00FF00; } #pageBody{ width:100%; height:70%; margin:0px; background:#00FFFF; } #footer{ width:100%; height:10%; margin:0px; background:#FFFF00; }
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> </div> <div id="footer"> footer </div> </div> </body> </html>
/* CSS Document */ /*基本信息*/ body{ margin:0px; /*外边距*/ text-align:center; /*文字居中对齐*/ background:#E1D0BB; /*背景色*/ } /*页面层容器*/ #container{ width:80%; height:100%; margin-left:10%; margin-right:10%; background:#ABE0F1; } /*头部*/ #header{ width:100%; height:15%; margin:0px; background:#FF0000; } #logo{ float:left; /*浮动属性,居左对齐,使其可以在同一行显示*/ width:60%; height:80%; margin:0px; background:#E18CDD; clear:left; /*取消左侧浮动*/ } #banner{ float:right; /*浮动属性,居右对齐,使其可以在同一行显示*/ width:38%; height:80%; margin:0px; background:#8376D8; clear:right; /*取消右侧浮动*/ } #menu{ width:100%; height:5%; margin:0px; background:#00FF00; } #pageBody{ width:100%; height:70%; margin:0px; background:#00FFFF; -moz-column-count:4; /*多栏布局:火狐浏览器中需要的格式,表示列数*/ -moz-column-gap:10px; /*列之间的间隔*/ -moz-column-rule:1px solid red; /*在列之间加一条红色的线*/ -webkit-column-count:4; /*多栏布局:safari和chrome需要的格式*/ -webkit-column-gap:10px; /*列之间的间隔*/ -webkit-column-rule:1px solid red; /*在列之间加一条红色的线*/ } #footer{ width:100%; height:10%; margin:0px; background:#FFFF00; }
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> 内容省略 </div> <div id="footer"> footer </div> </div> </body> </html>
/* CSS Document */ /*基本信息*/ body{ margin:0px; /*外边距*/ text-align:center; /*文字居中对齐*/ background:#E1D0BB; /*背景色*/ } /*页面层容器*/ #container{ display:-moz-box; display:-webkit-box; } #left_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#FF0000 } #center_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#00FF00 } #right_side{ width:200px; height:200px; margin:20px; padding:50px; background-color:#FFFF00; } #left_side,#center_side,#right_side{ /*实现盒子布局*/ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #down_left{ -moz-box-flex:1; /*可根据内容自动调整大小,实现弹性盒子,此为火狐下的格式*/ -webkit-box-flex:1; padding:20px; margin:20px; background-color:blue; } #down_left{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }hexi.html
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>布局</title> <link href="style/hezi.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="left_side"> 百度 </div> <div id="center_side"> 谷歌 </div> <div id="right_side"> 淘宝 </div> <div id="down_left"> 亚马逊 </div> </div> </body> </html>
#container{ display:-moz-box; display:-webkit-box; -moz-box-orient:vertical; /*垂直分布*/ -webkit-box-orient:vertical; }
玩转CSS3(一)----CSS3实现页面布局,布布扣,bubuko.com
原文地址:http://blog.csdn.net/u012116457/article/details/28710173