2-10作业 请老师帮助完善，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;
padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
.container{
width: 100%;
margin: 0 auto;
}
/*顶部*/
.header{width: 100%;
background: #07cbc9;
position:fixed;
overflow: hidden;
zoom:1;
}
.header .logo{width: 300px;
height: 50px;
float: left;
margin: 0 60px;
line-height: 50px;
}
.header .nav{float: right;
overflow: hidden;
zoom:1;
}
.header .nav ul{display:block;
margin-right: 100px;
}
.header .nav ul li{float: left;
width: 80px;
height: 50px;
line-height: 50px;
}
.header .nav ul li a{font-family:"Microsoft YaHei ul";
font-size: 8px;
color:#ffffff;
}
.header .nav ul li a:hover{
background-color:#000;
}
/*banner区*/
.banner{width: 100%;
height: 600px;
}
.banner img{width: 100%;
height: 600px;
}
.topLayer{
position: absolute;
background-color:#000；
width: 100%;
height: 600px;
opacity: 0.5;
z-index: 1
}
.banner1{
width:400px;
height:380px;
position: absolute;
top: 140px;
right: 50%;
margin-right:-230px;
z-index:2;
}
.banner1 input,
.banner1 textarea,
.banner1 .submit{
color: #ffffff;
background: rgba(0,0,0,0.5);
font-size: 10px;
font-family: "Microsoft YaHei ul";
font-weight: bold;
}
.banner1 input{
width: 380px;
height: 40px;
}
.banner1 textarea{
width: 380px;
height: 120px;
}
.banner1 .submit{
width: 120px;
height: 40px;
margin-left:130px;
}
.banner1 .submit:hover{
color: #ffffff;
border-style: none;
background:#07cbc9;
}
.banner1 input:hover,
.banner1 textarea:hover{
border: 2px solid #07cbc9;
}
/*ABOUT区*/
.about{
width:100%;
height: 200px;
}
.about-top{
width:30px;
height: 40px;
margin: 0 auto;
padding-top: 20px;
font-size:30px;
font-weight: bold;
padding-right: 100px;
}
.about .hr{
width: 30px;
margin: 0 auto;
padding-top: 2px;
margin-left: 49%;
margin-top: 5px;
background: #07cbc9;
}
.about-con{
width:550px;
height: 30px;
line-height: 30px;
margin-left: 30%;
margin-top:5px;
}
.about-con p{
text-align: center;
}
/*ABOUT中间部分*/
.about1-main{padding:0 220px 0 200px;
}
.middle {
width: 100%;
}
.middle img{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
margin:auto auto;
width: 500px;
height: 350px;
}
.left,
.middle,
.right{
position: relative;
float: left;
min-height: 300px;
}
.left{
width: 200px;
margin-left: -100%;
left: -200px;
}
.right{
width: 220px;
margin-right: -220px;
}
.left .left1{
width: 200px;
height: 150px;
margin-left: 200px;
margin-top: -20px;
}
.left .left1 p{
text-align: center;
font-size: 30px;
font-family: "Microsoft YaHei ul"
}
.left .left2{
position: relative;
width: 350px;
height: 230px;
border: 1px solid #ccc;
margin-left: 200px;
margin-top: -50px;
}
.left-topLayer{
position: absolute;
background-color:rgba(0,0,0,0.5);
width: 350px;
height: 230px;
opacity: 0.5;
z-index:1;
margin-left: 200px;
margin-top: -230px;
}
.left .left2 p{
height: 20px;
line-height: 20px;
margin: 10px 10px 0 20px;
}
.left .left2 input{
height:50px;
width:120px;
border:none;
font-size:20px;
color: #ffffff;
background:#000;
margin-left: 20px;
margin-top: 10px;
}
.left .left2 input:hover{
background:rgba(0,0,0,0.5);
}
.right .right1{
width: 220px;
height: 150px;
border: 1px solid #07cbc9;
margin-left: -180px;
margin-top: -20px;
margin-bottom: 40px;
}
.right .right1 .one{
width: 220px;
font-size: 25px;
font-weight: bold;
height: 50px;
line-height: 50px;
text-align: center;
padding-top: 20px;
}
.right .right1 .two{
width: 30px;
margin: 0 auto;
padding-top: 1px;
margin-top: 10px;
background: #07cbc9;
}
.right .right1 .three{
width: 220px;
font-size: 20px;
font-weight: bold;
height: 50px;
line-height: 50px;
text-align: center;
}
/*ABOUT底部*/
.about2 table{
width: 100%;
height: 600px;
padding-top: 20px;
}
.about2 table tr td img{
width: 335px;
height: 300px;
}
.about2 table tr td{
width: 320px;
height: 300px;
background: #07cbc9;
color:#ffffff;
font-family: "Microsoft YaHei ul"
}
h3{padding: 10px;
font:normal:24px/54px;
}
p{
font-size: 15px;
font: normal:24px/54px;
}
p1{
font-size:10px;
}
.about2 table tr td input{display: block;
margin: 0 auto;
width: 80px;
height: 40px;
font-size: 10px;
color: #ffffff;
background:#000;
margin-top:10px;
border: none;
}
.about2 table tr td input:hever{
background: #07cbc9;
}
/*GALLERY*/
/*顶部*/
.gallery{
width: 100%
}
.gallery-top{
width:30px;
height: 40px;
margin: 0 auto;
padding-top: 50px;
padding-right: 100px;
font-size:30px;
font-weight: bold;
}
.gallery .hr{
width: 30px;
margin: 0 auto;
padding-top: 2px;
margin-left: 49%;
margin-top: 5px;
background: #07cbc9;
}
.gallery-con {
width:550px;
margin-left: 30%;
margin-top:5px;
}
.gallery-con p{
height: 30px;
line-height: 30px;
text-align: center;
}
/*GALLERY中部*/
.gallery-main{
width: 950px;
height: 600px;
}
.gallery-main dl{
width: 300px;
float: left;
margin: 15px;
}
.gallery-main dl img{
width: 300px;
height: 200px;
}
.gallery-main dl dd{
width: 300px;
height: 50px;
line-height: 50px;
background:#000;
font-size: 16px;
color:#ffffff;
font-weight: bold;
font-family:"Microsoft YaHei ul"
display:block;
margin-top: -4px;
}
</style>
</head>
<body>
<div class="container">
<!--顶部-->
<div class="header">
<div class="logo"><img src="images/logo.png" alt="logo"></div>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!--banner-->
<div class="banner">
<img src="images/banner3.jpg">
</div>
<!--遮罩层-->
<div class="topLayer"></div>
<div class="banner1">
<form>
<input type="text" name="username" placeholder="Your Name"/>
<br/>
<br/>
<input type="text" name="userphone" placeholder="Your Phone"/>
<br/>
<br/>
<input type="text" name="userphone" placeholder="Your Email"/>
<br/>
<br/>
<textarea name="usercomment" placeholder="Write Your Comment Here"></textarea>
<br/>
<br/>
<input type="submit" name="submit" value="SEND MESSAGE" class="submit"/>
<br/>
<br/>
</form>
</div>
<!--ABOUT-->
<div class="about">
<div class="about-top">ABOUT</div>
<div class="hr"> <hr></div>
<div class="about-con">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting </p>
<p> industry.Lorem Ipsum has been the industry's standard dummy</p>
<p> text ever since the 1500s.</p></div>
</div>
<div class="about1-main">
<div class="middle"><img src="images/bb3.jpg" alt="main"></div>
<div class="left">
<div class="left1">
<P>A WORD</P>
<P>ABOUT US</P>
</div>
<div class="left2">
<p>Praesent dignissim viverra est,sed</p>
<p>bibendum ligula congue non.Sed ac nisl</p>
<p>et felis gravida commodo?Suspendisse</p>
<p>eget ullamcorper ipsum.Suspendisse </p>
<p>diam amet.</p>
<input type="button" name="button" value="EXPLORE"/>
</div>
<!--遮罩层-->
<div class="left-topLayer"></div>
</div>
<div class="right">
<div class="right1">
<div class="one">70000</div>
<div class="two"><hr/></div>
<div class="three">Sudents</div>
</div>
<div class="right1">
<div class="one">600</div>
<div class="two"><hr/></div>
<div class="three">Faculty</div>
</div>
</div>
</div>
<!--abuot底部-->
<div class="about2">
<table>
<tr>
<td><img src="images/b1.jpg"></td>
<td>
<h3>Library<h3>
<p>Lorem Ipsum is simply dummy text of the</p>
<p> printing and typesetting industry</p>
<br/>
<p1>Lorem Ipsum has been the industry's standard dummy</p1>
<p1>text ever since the 1500s,when an unknown printer took</p1>
<p1>a galley of type and scrambled it to make a type </p1>
<p1>specimen book.</p1>
<input type="button" name="button" value="EXPLORE"/>
</td>
<td><img src="images/b2.jpg"></td>
<td>
<h3>Computer Lab<h3>
<p>Lorem Ipsum is simply dummy text of the</p>
<p> printing and typesetting industry</p>
<br/>
<p1>Lorem Ipsum has been the industry's standard dummy</p1>
<p1>text ever since the 1500s,when an unknown printer took</p1>
<p1>a galley of type and scrambled it to make a type </p1>
<p1>specimen book.</p1>
<input type="button" name="button" value="EXPLORE"/>
</td>
</tr>
<tr>
<td>
<h3>Conference Hall<h3>
<p>Lorem Ipsum is simply dummy text of the</p>
<p> printing and typesetting industry</p>
<br/>
<p1>Lorem Ipsum has been the industry's standard dummy</p1>
<p1>text ever since the 1500s,when an unknown printer took</p1>
<p1>a galley of type and scrambled it to make a type </p1>
<p1>specimen book.</p1>
<input type="button" name="button" value="EXPLORE"/>
</td>
<td><img src="images/b3.jpg"></td>
<td>
<h3> Play Ground<h3>
<p>Lorem Ipsum is simply dummy text of the</p>
<p> printing and typesetting industry</p>
<br/>
<p1>Lorem Ipsum has been the industry's standard dummy</p1>
<p1>text ever since the 1500s,when an unknown printer took</p1>
<p1>a galley of type and scrambled it to make a type </p1>
<p1>specimen book.</p1>
<input type="button" name="button" value="EXPLORE"/>
</td>
<td><img src="images/b4.jpg"></td>
</tr>
</table>
</div>
<!--GALLERY-->
<div class="gallery">
<div class="gallery-top"> GALLERY</div>
<div class="hr"><hr></div>
<div class="gallery-con">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy text</p>
<p>ever since the 1500s.</p></div>
<div class="gallery-main">
<dl>
<dt><img src="images/03-01.jpg"></dt>
<dd > SCIENCE LAB</dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg"></dt>
<dd>INDOOR STADIUM</dd>
</dl>
<dl>
<dt><img src="images/03-03.jpg"></dt>
<dd>TRANSPORTATION</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg"></dt>
<dd>KIDS ROOM</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg"></dt>
<dd> MEDITATION CLASSES</dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg"></dt>
<dd>KIDS PLAY GROUND</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星