之前看过YUI的CSS框架，觉得非常神奇。
在后面的工作，中渐渐的觉得一个好的布局（可扩展性）对于整体网站架构的重要性。
于是写了下面两个布局模型，分别为 普通页面布局，管理界面布局
当然这也有利于你偷懒 下载地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台布局模型</title> <mce:style type="text/css"><!-- root,html,body{height:100%; padding:0; margin:0;} #doc{min-height:100%;+height:100%;position:relative;}/*背景颜色*/ #hd{ border-bottom:1px solid #CCC;} #hd,#fd{width:100%;position:absolute; overflow:hidden;height:30px;background:#eee;}/* header footer 高度以及背景颜色*/ #bd{min-height:100%;overflow:hidden;} #bd-in{ margin-top:30px;}/* maring-top #hd 高度一致*/ #fd{bottom:0;border-top:1px solid #CCC;} .clear{*zoom:1;} .clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;} /* 以上不用改变 */ /* y-t1, y-t2 背景颜色就是主体部分颜色 */ .y-t1{background:#f8f8f8;} .y-t1 #bd-in{margin-bottom:30px;}/* maring-bottom #fd 高度一致*/ .y-t1 .side{width:200px;float:left;} .y-t1 .main{width:100%;float:right;margin-left:-200px;} .y-t1 .main-in{ margin-left:200px;} .y-t2{background:#f8f8f8;} .y-t1 #bd-in{margin-bottom:30px;}/* maring-bottom #fd 高度一致*/ .y-t2 .side{width:200px;float:right;} .y-t2 .main{width:100%;float:left;margin-right:-200px;} .y-t2 .main-in{ margin-right:200px;} /* footer 高度将填充 剩余的页面高度， 此要求body的背景颜色 与 fd的背景颜色一直 */ .y-t3{background:#eee;} .y-t3 #fd{bottom:auto;} .y-t3 #bd{background:#f8f8f8;} .y-t3 .side{width:200px;float:right;} .y-t3 .main{width:100%;float:left;margin-right:-200px;} .y-t3 .main-in{ margin-right:200px;} --></mce:style><style type="text/css" _mce_bogus="1"><!-- root,html,body{height:100%; padding:0; margin:0;} #doc{min-height:100%;+height:100%;position:relative;}/*背景颜色*/ #hd{ border-bottom:1px solid #CCC;} #hd,#fd{width:100%;position:absolute; overflow:hidden;height:30px;background:#eee;}/* header footer 高度以及背景颜色*/ #bd{min-height:100%;overflow:hidden;} #bd-in{ margin-top:30px;}/* maring-top #hd 高度一致*/ #fd{bottom:0;border-top:1px solid #CCC;} .clear{*zoom:1;} .clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;} /* 以上不用改变 */ /* y-t1, y-t2 背景颜色就是主体部分颜色 */ .y-t1{background:#f8f8f8;} .y-t1 #bd-in{margin-bottom:30px;}/* maring-bottom #fd 高度一致*/ .y-t1 .side{width:200px;float:left;} .y-t1 .main{width:100%;float:right;margin-left:-200px;} .y-t1 .main-in{ margin-left:200px;} .y-t2{background:#f8f8f8;} .y-t1 #bd-in{margin-bottom:30px;}/* maring-bottom #fd 高度一致*/ .y-t2 .side{width:200px;float:right;} .y-t2 .main{width:100%;float:left;margin-right:-200px;} .y-t2 .main-in{ margin-right:200px;} /* footer 高度将填充 剩余的页面高度， 此要求body的背景颜色 与 fd的背景颜色一直 */ .y-t3{background:#eee;} .y-t3 #fd{bottom:auto;} .y-t3 #bd{background:#f8f8f8;} .y-t3 .side{width:200px;float:right;} .y-t3 .main{width:100%;float:left;margin-right:-200px;} .y-t3 .main-in{ margin-right:200px;} --></style> </head> <body> <div id="doc" class="y-t3"> <div id="hd">hd</div> <div id="bd"> <div id="bd-in" class="clear"> <div class="main"> <div class="main-in"> main<br/> <button onclick="change('y-t1')">布局1</button> <button onclick="change('y-t2')">布局2</button> <button onclick="change('y-t3')">布局3</button> <br/> 1:侧栏在左，高度自适应<br/> 2:侧栏在右，高度自适应<br/> 3:侧栏在有，满屏幕<br/> </div> </div> <div class="side">side</div> </div> </div> <div id="fd">fd</div> </div> <mce:script type="text/javascript"><!-- function change(className){ document.getElementById('doc').className = className; } // --></mce:script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面多栏布局模型</title> <mce:style type="text/css"><!-- /* yahoo reset */ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} /* 必须 */ body{font:13px/1.231 arial,helvetica,clean,sans-serif; text-align:center;} #doc{margin:0 auto; text-align:left;} #doc{}/* 网页宽度 width:100%;*/ #bd,#hd,.clear{*zoom:1;} #bd:after,.clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;} .y-main{width:100%;} .y-u{float:right;} .first{float:left;} /* 侧栏在右边 */ .y-t1 {width:950px;} .y-t1 .y-b{float:right;width:180px;}/* 侧栏宽度 */ .y-t1 .y-u{width:49.3%;} /*中间两栏宽度*/ .y-t1 .first{width:49.3%;} /*中间两栏宽度*/ .y-t1 .y-main{float:left;margin-right:-190px;} /*与侧栏空隙为10px*/ .y-t1 .y-main .y-g{margin-right:190px;}/*与侧栏空隙为10px*/ /* 侧栏在左边 */ .y-t1 {width:1000px;} .y-t2 .y-b{float:left;width:180px;} .y-t2 .y-u{width:49.3%;} .y-t2 .first{width:49.3%;} .y-t2 .y-main{float:right;margin-left:-190px;} .y-t2 .y-main .y-g{margin-left:190px;} /* 没有侧栏 */ .y-t1 {} .y-t3 .y-b{display:none;} .y-t3 .y-u{width:49.3%;} .y-t3 .first{width:49.3%;} /**/ #hd,#fd,.y-b,.y-u{background:#CCC} #bd{margin:10px 0;} --></mce:style><style type="text/css" _mce_bogus="1"><!-- /* yahoo reset */ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} /* 必须 */ body{font:13px/1.231 arial,helvetica,clean,sans-serif; text-align:center;} #doc{margin:0 auto; text-align:left;} #doc{}/* 网页宽度 width:100%;*/ #bd,#hd,.clear{*zoom:1;} #bd:after,.clear:after{content:"\20";display:block;height:0;clear:both;visibility:hidden;} .y-main{width:100%;} .y-u{float:right;} .first{float:left;} /* 侧栏在右边 */ .y-t1 {width:950px;} .y-t1 .y-b{float:right;width:180px;}/* 侧栏宽度 */ .y-t1 .y-u{width:49.3%;} /*中间两栏宽度*/ .y-t1 .first{width:49.3%;} /*中间两栏宽度*/ .y-t1 .y-main{float:left;margin-right:-190px;} /*与侧栏空隙为10px*/ .y-t1 .y-main .y-g{margin-right:190px;}/*与侧栏空隙为10px*/ /* 侧栏在左边 */ .y-t1 {width:1000px;} .y-t2 .y-b{float:left;width:180px;} .y-t2 .y-u{width:49.3%;} .y-t2 .first{width:49.3%;} .y-t2 .y-main{float:right;margin-left:-190px;} .y-t2 .y-main .y-g{margin-left:190px;} /* 没有侧栏 */ .y-t1 {} .y-t3 .y-b{display:none;} .y-t3 .y-u{width:49.3%;} .y-t3 .first{width:49.3%;} /**/ #hd,#fd,.y-b,.y-u{background:#CCC} #bd{margin:10px 0;} --></style> </head> <body> <div id="doc" class="y-t1"> <div id="hd"> <br/><br/><br/>css 布局模型 header<br/><br/><br/> </div> <div id="bd"> <div class="y-main"> <div class="y-g clear"> <div class="y-u first"> <button onclick="change('y-t1')">布局1</button> <button onclick="change('y-t2')">布局2</button> <button onclick="change('y-t3')">布局3</button> <br/> 1:页面整体宽度自动适应<br/> 2:可多栏布局<br/> </div> <div class="y-u"> <br/><br/><br/> module two <br/><br/><br/> </div> </div> </div> <div class="y-b"> <br/><br/>slide<br/><br/> </div> </div> </div> <div id="fd"><br/><br/>footer<br/><br/></div> </body> <mce:script type="text/javascript"><!-- function change(className){ document.getElementById('doc').className = className; } // --></mce:script> </html>
如果打开的页面无法点击 布局 1 布局2 这样的按钮，可能是写文章的时候JS被替换掉了。
文本框的结尾有一个JS你调整正确就可以查看了。 下载地址
