关于css+div页面布局的问题，望各位大神能帮忙解决！
期末作业，要求用css+div完成一个首页！
我自己写的首页页面代码（body部分）如下
<body> <div id="container"><!--网页盒子--> <div id="header">header<!--页面头部--> </div> <div id="pageBody"><!--页面主体盒子--> <div id="leftside">leftside<!--页面左侧内容--> </div> <div id="righttop">righttop<!--页面右侧上部内容--> </div> <div id="contact">contact<!--页面右侧联系方块--> </div> <div id="footer">footer<!--页面底部--> </div> </div> </div> </body>
下面是css的代码
/*基本信息*/
body {
font:12px;
Tahoma;margin:0px;
text-align:center;
background:#FFF;
}
/*网页盒子*/
#container {
width:100%;
background:#CCC;
}
/*页面头部*/
#header {
float:none;
width:800px;
margin:0 auto;
height:100px;
background:#FFCC99;
}
/*页面主体盒子*/
#pageBody {
width:800px;
margin:0 auto;
height:800px;
background:#CCFF00;
}
/*页面主体左侧*/
#leftside {
float:left;
width:50%;
margin:0 auto;
height:800px;
background:#ffcc00;
}
/*页面主体右侧上部*/
#righttop{
float:right;
width:50%;
height:500px;
background:#0F0;
}
/*页面主体右侧下部联系方式*/
#contact{
float:right;
width:50%;
height:300px;
background:#F0F;
}
/*页面底部*/
#footer {
width:800px;
margin:0 auto;
height:50px;
background:#300;
}页面效果
页面上的div没有置顶在网页上！
然后div与div之间会有一个间距！
后面footer部分好像也有点问题！
急求各位大神解答，小弟马上要交期末作业！
木子十八浏览 1882回答 1
1回答
-
webfz
<!DOCTYPE html> <html> <head> <title> 事件</title> <style>/*基本信息*/ *{ padding:0px; margin:0px;} body { font:12px; margin:0px; text-align:center; background:#FFF; } /*网页盒子*/ #container { width:100%; background:#CCC; } /*页面头部*/ #header { float:none; width:800px; margin:0 auto; height:100px; background:#FFCC99; } /*页面主体盒子*/ #pageBody { width:800px; margin:0 auto; height:800px; background:#CCFF00; } /*页面主体左侧*/ #leftside { float:left; width:50%; margin:0 auto; height:800px; background:#ffcc00; } /*页面主体右侧上部*/ #righttop{ float:right; width:50%; height:500px; background:#0F0; } /*页面主体右侧下部联系方式*/ #contact{ float:right; width:50%; height:300px; background:#F0F; } /*页面底部*/ #footer { width:800px; margin:0 auto; height:50px; background:#300; }</style> </head> <body> <div id="container"><!--网页盒子--> <div id="header">header<!--页面头部--> </div> <div id="pageBody"><!--页面主体盒子--> <div id="leftside">leftside<!--页面左侧内容--> </div> <div id="righttop">righttop<!--页面右侧上部内容--> </div> <div id="contact">contact<!--页面右侧联系方块--> </div> </div> <div id="footer">footer<!--页面底部--> </div> </div> </body> </html>你把footer放到pageBody里面了，我建议你以后养成格式化的习惯
随时随地看视频慕课网APP
Html/CSS
CSS3