html网页分上下左右,div+CSS完成网页布局(上下左右)_html/css_WEB-ITnose

当前位置：Gxlcms > html代码 > div+CSS完成网页布局(上下左右)_html/css_WEB-ITnose

div+CSS完成网页布局(上下左右)_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：44人阅读

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />

< title > 无标题文档 title >

< style type ="text/css" >

body {

margin : 0 ;

padding : 0 ;

}

#head {

height : 40px ;

background-color : #0033CC ;

width : 800px ;

margin : 0 ;

}

#content {

width : 800px ;

background : #CCCCCC ;

height : 200px ;

margin : 0 ;

}

#left {

top : 40px ;

width : 150px ;

height : 200px ;

background : #CCCC66 ;

float : left ;

margin : 0 ;

}

#c {

width : 500px ;

height : 200px ;

background : #FFFFFF ;

margin : 0 ;

}

#right {

width : 150px ;

height : 200px ;

background : #339966 ;

float : right ;

margin : 0 ;

}

#foot {

width : 800px ;

background : #0099CC ;

height : 40px ;

margin : 0 ;

}

style >

head >

< body >

< div id ="head" > head div >

< div id ="content" >

< div id ="left" > left div >

< div id ="c" > content div >

< div id ="right" > rigth div >

div >

< div id ="foot" > foot div >

body >

html >