老师 您看下我的页面脚部（.footer）是怎么回事。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<!-- <style type="text/css"> -->
<link href="样式.css" rel="stylesheet"/>
<!-- </style> -->
</head>
<body>
<!-- 这是header区 -->
<div class="header">
<img src="images/logo.png"/>
<ul>
<li>wbcsh</li>
<li>rweuv</li>
<li>usbe</li>
<li>euib</li>
<li>ivbi iuev</li>
<li>eviei</li>
</ul>
</div>
<!-- 这是banner图区 -->
<div class="banner">
<img src="images/banner3.jpg"/>
</div>
<div class="toplayer"></div>
<div class="form">
<form>
<input type="text" placeholder="bvhbjsb iuwiub bib" class="text1"><br/>
<input type="text" placeholder="bvhbjsb iuwiub bibbtt tbeyb" class="text2"><br/>
<input type="password" placeholder="bvhbjsb iuwiub bib" class="password"><br/>
<input type="txet" placeholder="bvhbjsb iuwiub bib" class="text3"><br/>
<input type="submit" name="efvbub" value="ivnui" class="submit">
</form>
</div>
<!-- 这是ABOOUT区 -->
<div class="ABOUT">
<div class="ABOUTtop">
<div class="one">
<h3>ABOUT</h3>
<span>veuzhuh hiuvuibbsub iubisdbzibiuvbvh<br/>
zvbui bjxb sdhb ijbsb hs usb hsh hs <br/>
sb bsh vhvy vh sh</span>
</div>
<div class="two">
ABOUTBDB<br/>
BVYEH BBWB
<div class="intwo">
<span>bavbuebv eabvuebh e e veh hhbeh bh vehah eh eajh gh</span>
<form><input type="submit" name="hjebv" value="gevgh"/></form>
</div>
</div>
<div class="three">
<img src="images/bb3.jpg"/>
</div>
<div class="four">
70000<hr/>
erivbeu<hr/>
uevyevhvb
</div>
</div>
<div class="clear"></div>
<div class="ABOUTbottom">
<div class="aa"><img src="images/b1.jpg"/></div>
<div class="bb">ebtbtebe</div>
<div class="cc"><img src="images/03-01.jpg"/></div>
<div class="dd">tetev</div>
<div class="ee">4bg4b4betb</div>
<div class="ff"><img src="images/b2.jpg"/></div>
<div class="gg">btb6b6b6</div>
<div class="hh"><img src="images/b4.jpg"/></div>
</div>
</div>
<div class="clear"></div>
<!-- 这是GALLERY区 -->
<div class="GALLERY">
<div class="GALLERYtop">
<h3>GALLERY</h3>
<span>
vebiueib eaviueb ievibuyvwv aebvuyeh<br/>
vbserbvhebsuvbebvhebsveyvhesvehvhebuyveuy<br/>
sfbvjfb jbvj b sjbvjebvj
</span>
</div>
<div class="GALLERYbottom">
<div class="big">
<div class="one">
<dl>
<dt><img src="images/03-04.jpg"/></dt>
<dd>dynnd</dd>
</dl>
</div>
<div class="two">
<dl>
<dt><img src="images/03-02.jpg"/></dt>
<dd>dtndndn nbrr</dd>
</dl>
</div>
<div class="three">
<dl>
<dt><img src="images/03-03.jpg"/></dt>
<dd>brbrtntyn</dd>
</dl>
</div>
<div class="four">
<dl>
<dt><img src="images/03-06.jpg"/></dt>
<dd>netntdtdn</dd>
</dl>
</div>
<div class="five">
<dl>
<dt><img src="images/03-05.jpg"/></dt>
<dd>ndtntdn</dd>
</dl>
</div>
<div class="six">
<dl>
<dt><img src="images/03-01.jpg"/></dt>
<dd>tdntdnn</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 这是尾部 -->
<div class="footer">ytnrbevwty</div>
</body>
</html>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
*{margin:0; padding:0;}
.clear:{clear:both;}
.header{width:100%; height:70px; background-color:#07cbc9;}
.header img{width:100px; height:60px; float:left; position:absolute; margin-top:5px; margin-left:30px;}
.header ul{float:right; margin-right:50px;}
.header ul li{float:left; list-style:none; width:100px; line-height:70px;}
.banner{width:100%;}
.banner img{width:100%; height:400px;}
.toplayer{position:absolute; top:70px; left:0; width:100%; height:400px; background-color:black; opacity:0.2;}
.form{position:absolute; width:400px; height:250px; top:145px; left:50%; margin-left:-200px; /*background-color:red; */z-index:2;}
.form form{text-align:center; padding-top:60px;}
.text1,.text2,.text3,.password{width:200px; margin-top:10px;}
.text1,.text2,.password{height:20px;}
.text3{height:40px;}
.submit{width:80px; height:20px;}
.ABOUTtop{width:100%; position:relative;}
.ABOUTtop .one{width:100%; height:80px; text-align:center; /*line-height:80px;*/}
.ABOUTtop .one h3{font-family:"微软雅黑"; font-size:10px; font-weight:bolder;}
.ABOUTtop .one span{font-style:italic; font-size:4px; color:gray;}
.ABOUTtop .two{width:400px; height:300px; position:absolute; top:100px; left:400px; border:1px red solid;}
.ABOUTtop .two .intwo{width:400px; height:200px; background-color:#ffffff; opacity:1; z-index:3;}
.ABOUTtop .three{position:absolute; top:100px; left:50%; margin-left:-200px;}
.ABOUTtop .three img{width:400px; height:300px;}
.ABOUTtop .four{width:300px; height:300px; position:absolute; top:100px; right:250px; border:1px red solid;}
.ABOUTbottom{width:100%; height:482.4px; position:relative;top:350px;}
.aa,.bb,.cc,.dd,.ee,.ff,.gg,.hh{width:25%;height:241.2px; float:left;}
.aa img{width:100%; height:241.2px;}
.cc img{width:100%; height:241.2px;}
.ff img{width:100%; height:241.2px;}
.hh img{width:100%; height:241.2px;}
.bb,.dd,.ee,.gg{background-color:#07cbc9;}
.GALLERY{position:relative; top:370px;}
.GALLERY .GALLERYtop{text-align:center;}
.GALLERY .GALLERYbottom{width:100%; margin-top:30px; text-align:center;}
.GALLERY .GALLERYbottom .big{width:900px; margin:40px auto;}
.GALLERY .GALLERYbottom .one{width:300px; height:200px; float:left; }
.GALLERY .GALLERYbottom .two{width:300px; height:200px; float:left;}
.GALLERY .GALLERYbottom .three{width:300px; height:200px; float:left;}
.GALLERY .GALLERYbottom .four{width:300px; height:200px; float:left;}
.GALLERY .GALLERYbottom .five{width:300px; height:200px; float:left;}
.GALLERY .GALLERYbottom .six{width:300px; height:200px; float:left;}
.GALLERY .GALLERYbottom .one img{width:300px; height:180px;}
.GALLERY .GALLERYbottom .two img{width:300px; height:180px;}
.GALLERY .GALLERYbottom .three img{width:300px; height:180px;}
.GALLERY .GALLERYbottom .four img{width:300px; height:180px;}
.GALLERY .GALLERYbottom .five img{width:300px; height:180px;}
.GALLERY .GALLERYbottom .six img{width:300px; height:180px;}
.footer{width:100% height:80px; position:relative; top:800px; background-color:#07cbc9;}/* background-color:#07cbc9; text-align:center; position:relative; top:600px;}*/
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星