期末作業(yè)，要求用css+div完成一個(gè)首頁(yè)！我自己寫的首頁(yè)頁(yè)面代碼（body部分）如下?<body>
????<div?id="container"><!--網(wǎng)頁(yè)盒子-->
???? <div?id="header">header<!--頁(yè)面頭部-->
???? </div>
???? <div?id="pageBody"><!--頁(yè)面主體盒子-->
???? <div?id="leftside">leftside<!--頁(yè)面左側(cè)內(nèi)容-->
???? </div>
???? <div?id="righttop">righttop<!--頁(yè)面右側(cè)上部?jī)?nèi)容-->
???? </div>
????????<div?id="contact">contact<!--頁(yè)面右側(cè)聯(lián)系方塊-->
???? </div>
???? <div?id="footer">footer<!--頁(yè)面底部-->
??????</div>
???? </div>
????</div>
??</body>下面是css的代碼/*基本信息*/
body?{?
font:12px;
Tahoma;margin:0px;
text-align:center;
background:#FFF;
}
/*網(wǎng)頁(yè)盒子*/
#container?{
width:100%;?
????background:#CCC;
}
/*頁(yè)面頭部*/
#header?{
float:none;
width:800px;
margin:0?auto;
height:100px;
background:#FFCC99;
}
/*頁(yè)面主體盒子*/
#pageBody?{
width:800px;
margin:0?auto;
height:800px;
background:#CCFF00;
}
/*頁(yè)面主體左側(cè)*/
#leftside?{
float:left;?
width:50%;?
margin:0?auto;?
height:800px;?
background:#ffcc00;
}
/*頁(yè)面主體右側(cè)上部*/
#righttop{
float:right;
width:50%;
height:500px;
background:#0F0;
}
/*頁(yè)面主體右側(cè)下部聯(lián)系方式*/
#contact{
float:right;
width:50%;
height:300px;
background:#F0F;
}
/*頁(yè)面底部*/
#footer?{
width:800px;
margin:0?auto;
height:50px;
background:#300;
}頁(yè)面效果頁(yè)面上的div沒(méi)有置頂在網(wǎng)頁(yè)上！然后div與div之間會(huì)有一個(gè)間距！后面footer部分好像也有點(diǎn)問(wèn)題！急求各位大神解答，小弟馬上要交期末作業(yè)！
1 回答
webfz
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
<!DOCTYPE?html>
<html>
?<head>
??<title>?事件</title>??
?<style>/*基本信息*/
?*{?padding:0px;?margin:0px;}
body?{?
????font:12px;
????margin:0px;
????text-align:center;
????background:#FFF;
}
?
/*網(wǎng)頁(yè)盒子*/
#container?{
????width:100%;?
????background:#CCC;
}
?
/*頁(yè)面頭部*/
#header?{
????float:none;
????width:800px;
????margin:0?auto;
????height:100px;
????background:#FFCC99;
}
?
/*頁(yè)面主體盒子*/
#pageBody?{
????width:800px;
????margin:0?auto;
????height:800px;
????background:#CCFF00;
}
?
/*頁(yè)面主體左側(cè)*/
#leftside?{
????float:left;?
????width:50%;?
????margin:0?auto;?
????height:800px;?
????background:#ffcc00;
}
?
/*頁(yè)面主體右側(cè)上部*/
#righttop{
????float:right;
????width:50%;
????height:500px;
????background:#0F0;
}
?
/*頁(yè)面主體右側(cè)下部聯(lián)系方式*/
#contact{
????float:right;
????width:50%;
????height:300px;
????background:#F0F;
}
?
/*頁(yè)面底部*/
#footer?{
????width:800px;
????margin:0?auto;
????height:50px;
????background:#300;
}</style>
?</head>?
?<body>
<div?id="container"><!--網(wǎng)頁(yè)盒子-->
<div?id="header">header<!--頁(yè)面頭部-->
</div>
<div?id="pageBody"><!--頁(yè)面主體盒子-->
????????????<div?id="leftside">leftside<!--頁(yè)面左側(cè)內(nèi)容-->
????????????</div>
????????????<div?id="righttop">righttop<!--頁(yè)面右側(cè)上部?jī)?nèi)容-->
????????????</div>
????????????<div?id="contact">contact<!--頁(yè)面右側(cè)聯(lián)系方塊-->
????????????</div>
???? </div>
???? <div?id="footer">footer<!--頁(yè)面底部-->
???? </div>
????</div>
?</body>
</html>你把footer放到pageBody里面了，我建議你以后養(yǎng)成格式化的習(xí)慣
-
木子十八非常感謝，footer部分已經(jīng)修改了。 但是div之間的間距如何去除 就是說(shuō)，像 header和 pageBody 這兩個(gè)div之間，在頁(yè)面上存在一個(gè)間距 是必須應(yīng)該存在的嗎？可以去除嗎？ -
qq_我的心想蘇醒_04136244可以去除，格式化一下
添加回答
舉報(bào)
0/150
提交
取消