DIV+CSS布局示例_html/css_WEB-ITnose

第一种:左菜单右边内容自动变宽的布局

Code

body{ margin:5px; padding:0px; border:0px;}
.nav{ background-color:#aaa; height:80px; width:100%; overflow:hidden;}
.nav_stat{ background-color:#888; height:30px; width:100%; overflow:hidden;}
.page{ width:100%; height:100%;}
.page .ctr{background-color:#00ff00; width:100%; height:100%; float:right; margin-left:-100px;}
.page .ctr .cnt{margin-left:100px; height:100%;}
.page .menu{width:100px; background-color:#ff0000; float:left;}
.foot{background-color:#0000ff; width:100%; clear:both; margin:0px auto; padding-top:10px;}

Code

立即学习“前端免费学习笔记（深入）”；

第二种，页宽度固定，分栏显示内容

body { text-align : center ; padding : 0px ; margin : 5px ; border : 0px ; }
.topWrap { overflow : hidden ; padding : 5px 0px 0px 0px ; background : #ccc ; }
.headerBox { margin : 0px auto ; width : 950px ; background-color : #aaa ; height : 30px ; }
.banner { margin : 0px auto ; width : 950px ; background-color : #888 ; height : 80px ; }
.wrap { margin : 0px auto ; width : 950px ; padding : 1px 0px 0px 0px ; background : #000 ; }
.p_1 { overflow : hidden ; text-align : left ; margin-bottom : 1px ; }
.p_1 .p_l_left { width : 340px ; background-color : #ff0000 ; float : left ; }
.p_1 .p_1_middle { width : 340px ; background-color : #00ff00 ; float : left ; margin-left : 10px ; }
.p_1 .p_1_right { width : 250px ; background-color : #0000ff ; float : left ; margin-left : 10px ; }

立即学习“前端免费学习笔记（深入）”；

Code

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；