一个CSS+div高度自适应布局模型_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:31:551075浏览
近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，css样式表如下： * { margin:0; padding:0; } BODY { font-size: 12px; font-family: "Verdana" , "Arial" , "细明体" , "sans-serif"; text-align: center; background-image: url(../images/bg.gif); } table { FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "细明体", "sans-serif"; } /*空行*/ .space10{ height:10px; float:left; width:100%; } /*实现自适应高度的层*/ .autoaddheight{ font: 0px/0px sans-serif; clear: both; display: block; } /*顶部小菜单样式*/ #topDiv{ height:100px; width:930px; margin-left:auto; margin-right:auto; border:3px solid gray; } /*主菜单样式*/ #MenuDiv { float:inherit; width:930px; background:#E3ECF3; line-height:normal; margin-left:auto; margin-right:auto; font: bold 14px/1.5em Verdana; height:40px; border:3px solid black; } #outer { margin-top: 0px; padding-left: 1px; margin-bottom: 0px; width: 95%; } #MenuDiv li{ /*子选择器,定义列表的样式*/ } /*网页左边框架样式*/ #leftContent { float: left; width: 220px; text-align: left; border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } /*中部框架层*/ #center { width: 930px; float: none; clear: both; margin: auto; border-right: #330066 2px solid; border-top: #330066 2px solid; border-left: #330066 2px solid; border-bottom: #330066 2px solid; background-color: #ffffff; } /*右边主层*/ #rightbody { width: 702px; float: left; text-align: center; margin: 0px; border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } /*底部样式*/ #bottom{ width:930px; margin-left:auto; margin-right:auto; height:40px; border:3px solid gray; } .Search { border-right: #ccccff thin solid; border-top: #ccccff thin solid; border-left: #ccccff thin solid; border-bottom: #ccccff thin solid; } .tree { background-color: #ffffff; } 网页代码如下： ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" >