分享两个布局模型 之前看过YUI的CSS框架，觉得非常神奇。 在后面的工作，中渐渐的觉得一个好的布局（可扩展性）对于整体网站架构的重要性。 于是写了下面两个布局模型，分别为 普通页面布局，管理界面布局 当然这也有利于你偷懒 下载地址 <input value="查看" type="button"> <!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 > <div > <br/><br/><br/>css 布局模型 header<br/><br/><br/> </div> <div > <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 ><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你调整正确就可以查看了。 下载地址 相关文章： 2022-02-24 2021-05-17 2022-12-23 2021-07-02