期末作業(yè),要求用css+div完成一個(gè)首頁(yè)!我自己寫(xiě)的首頁(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í)慣
添加回答
舉報(bào)
0/150
提交
取消