当前位置:Gxlcms >
html代码 >
div+CSS完成网页布局(上下左右)_html/css_WEB-ITnose
div+CSS完成网页布局(上下左右)_html/css_WEB-ITnose
时间:2021-07-01 10:21:17
帮助过:150人阅读
< 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 >