Heim > Web-Frontend > HTML-Tutorial > 常用网页布局(div+css)之一_html/css_WEB-ITnose

常用网页布局(div+css)之一_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:31:41
Original
1175 Leute haben es durchsucht

乘着闲暇时间,自己弄了个web,主界面是用div+css布局,用ajax+javascript进行界面控制及获取数据!
我就说说其中的div+css布局。
整个页面分为三大块,可以称之为:页眉(站标+横幅),主体(左边菜单+右边内容),页脚(显示版权及备案等信息)。三大块我用position:relative;相对定位来设置,这样有个好处,就是当某一块内容太多要阔涨时,其它部分也会相应的调整位置。
每一块内部采用float为left或right布局;在主体中,我左边为

#divLeft
{} {
    width:228px;
    height:400px;
    left:26px;
    float:left;
    padding:0;
    margin:0;
    filter:revealTrans(duration=2,transition=3)  progid:DXImageTransform.Microsoft.Gradient(startColorStr=#adde21, endColorStr=#d8e7c2, gradientType=0);

}

右边为

#divRight
{} {    float:left;
    left:286px;
    width:744px;
    height:400px;
    padding:0;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#f5efda, endColorStr=#F7f7f7, gradientType=0);

}

请注意,在这两部分布局中我都采用了float:left;,这样当我左边divLeft部分隐藏时,右边divRight部分会自动往左移动,如果#divRight用float:right;right:0;则达不到这样的效果!
点此下载源码
Verwandte Etiketten:
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