Heim > Web-Frontend > HTML-Tutorial > 一个CSS+div高度自适应布局模型_html/css_WEB-ITnose

一个CSS+div高度自适应布局模型_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:31:55
Original
1065 Leute haben es durchsucht

近日查看了一些资料自己研究写了一个网站布局,采用高度自适应,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" >

    无标题页        
       
                       
           
                                                                                                                                                                                                                                                                              
                                                   
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
                       
               
           
           
               
                                               
               
               
               
               
               
               
                   
                   
                     
               
           
           
           
                                                                                                                                                                                                                                                                                                                 
                               
                                                                                                                                                                                                                                一个CSS+div高度自适应布局模型_html/css_WEB-ITnose系统设置一个CSS+div高度自适应布局模型_html/css_WEB-ITnose关于
           
                   
   
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage