请老师检查下
来源：2-10 作业题
jaychou涡轮
2020-09-09 20:08:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color:#fff;
}
li{
list-style-type:none;
}
.ye{
width: 100%
height:80px;
background: #07cbc9;
overflow: hidden;
zoom:1;
}
.logo{
float: left;
}
.logo img{
display: block;
margin-top: 15px;
margin-left: 200px;
}
.dao{
float: right;
line-height: 80px;
margin-right: 100px;
}
.dao li{
float: left;
margin-right:20px;
color: #fff;
font-weight: bold;
}
.banner img{
width: 100%;
height:800px;
}
.zhe{
width: 100%;
height:800px;
background: black;
z-index: 1;
top: 80px;
left: 0;
opacity: 0.5;
position: absolute;
}
.center{
width: 500px;
height: 400px;
top: 280px;
z-index: 2;
position: absolute;
right: 50%;
margin-right: -250px;
}
.center input{
width: 505px;
height:39px;
border: 2px solid #aaa;
margin-top:20px;
background: transparent;
}
.center .da{
width: 505px;
height:115px;
}
.center .btn{
width: 123px;
height: 39px;
margin-left:189px;
color:#aaa;
}
.nei{
width: 1000px;
margin:0 auto;
}
.nei h1{
font-size: 50px;
font-weight: bold;
margin-top: 50px;
text-align: center;
margin-bottom: 20px;
}
.heng{
width:40px;
height: 2px;
background: blue;
margin:0 auto;
}
.nei p{
font-size:20px;
color:#888;
margin-top: 20px;
text-align: center;
margin-bottom: 20px;
}
.nei img{
width: 568px;
height: 380px;
float: left;
position:absolute;
margin-left: 210px;
margin-bottom: 20px;
}
.one{
width: 238px;
height: 144px;
border: 1px solid blue;
float: right;
margin-right: -60px;
}
.one p{
color:black;
font-size: 17px;
}
.one .bold{
font-weight: bold;
font-size: 23px;
}
.two p{
color:black;
font-size: 17px;
}
.two .bold{
font-weight: bold;
font-size: 23px;
}
.two{
width: 238px;
height: 144px;
border: 1px solid blue;
float: right;
margin-top: 170px;
margin-right: -240px;
}
.three{
width: 370px;
height: 246px;
border: 1px solid #aaa;
float: left;
position: absolute;
z-index: 99;
margin-top: 80px;
}
.three p{
font-size:16px;
padding:15px 0 0 15px;
text-align: left;
line-height: 30px;
color: black;
}
.three .btn{
width: 102px;
height: 45px;
margin:0 0 0 15px;
background: black;
color: #fff;
border:none;
}
.hun{
width: 100%;
padding-top: 330px;
overflow: hidden;
zoom:1;
}
.hun img{
width: 100%;
height: 100%;
position: relative;
}
.tou1{
position: relative;
background-color: #07CBC9;
}
.hun div{
width: 25%;
float: left;
height: 350px;
}
.tou{
padding:30px 0 0 30px;
color: #fff;
font-size: 30px;
}
.wen1{
padding:8px 30px;
color: #fff;
font-size: 16px;
}
.wen2{
padding:8px 30px;
color: gray;
font-size: 16px;
}
.hun .btn{
width: 102px;
height: 45px;
margin:0 auto;
background: black;
color: #fff;
border: none;
}
.shang{
width: 1180px;
margin: 0 auto;
overflow: hidden;
zoom:1;
}
dl{
float: left;
width: 360px;
margin: 15px 16px;
}
dl img{
width: 360px;
height: 240px;
display: block;
}
.di{
width: 360px;
height: 64px;
background: #000000;
color: #fff;
line-height: 64px;
}
.wei{
width: 100%;
height: 80px;
background: #07cbc9;
color: #fff;
text-align: center;
line-height: 80px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="ye">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="dao">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="tu">
<img src="images/banner3.jpg">
</div>
<div class="center">
<input type="text" name="" placeholder="your Name"><br/>
<input type="text" name="" placeholder="your Phone"><br/>
<input type="text" name="" placeholder="your Email"><br/>
<input class="da" type="text" name="" placeholder="Write Your Comment Here"><br/>
<input class="btn" type="submit" name="" value="SEND MESSAGE">
</div>
</div>
<div class="nei">
<h1>ABOUT</h1>
<div class="heng"></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting<br/>industry.Lorem Ipsum has veen the industry's standard dummy<br/>text ecer since the 1500s.
</p>
<div class="three">
<p>
Praesent dignissim viverra est,sed<br>
bibendum ligula congue non. Sed ax nislet<br>
felis gravida commodo? Suspendisse<br>
diam amet.
</p>
<input class="btn" type="submit" name="" value="EXPLORE">
</div>
<img src="images/bb3.jpg">
<div class="one">
<p class="bold">70000</p>
<div class="heng"></div>
<p>Stubents</p>
</div>
<div class="two">
<p class="bold">600</p>
<div class="heng"></div>
<p>Faculty</p>
</div>
<h2>A WORD<br/> ABOUT US</h2>
</div>
<div class="hun">
<div class="tu">
<img src="images/b1.jpg">
</div>
<div class="tou1">
<p class="tou">Library</p>
<p class="wen1">
Lorem Ipsum is simply dummy text of the Library
printing and typesetting industry
<p>
<p class="wen2">
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</p>
<input class="btn" type="submit" name="" value="EXPLORE">
<div class="top-arrow"></div>
</div>
<div class="tu">
<img src="images/b2.jpg">
</div>
<div class="tou1">
<p class="tou">Computer Lab</p>
<p class="wen1">
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
</p>
<p class="wen2">
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</p>
<input class="btn" type="submit" name="" value="EXPLORE">
<div class="top-arrow"></div>
</div>
<div class="tou1">
<p class="tou">Conference Hall</p>
<p class="wen1">
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
</p>
<p class="wen2">
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</p>
<input class="btn" type="submit" name="" value="EXPLORE">
</div>
<div class="tu">
<img src="images/b3.jpg">
<div class="bottom-arrow"></div>
</div>
<div class="tou1">
<p class="tou">Play Ground</p>
<p class="wen1">
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
</p>
<p class="wen2">
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</p>
<input class="btn" type="submit" name="" value="EXPLORE">
</div>
<div class="tu">
<img src="images/b3.jpg">
<div class="bottom-arrow"></div>
</div>
</div>
<div class="nei">
<h1>GALLERY</h1>
<div class="heng"></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting<br/>industry.Lorem Ipsum has veen the industry's standard dummy<br/>text ecer since the 1500s.
</p>
</div>
<div class="shang">
<dl>
<dt><img src="images/03-01.jpg"></dt>
<dd class="di"> SCIENCE LAB</dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg"></dt>
<dd class="di"> INDOOR STADIUM</dd>
</dl>
<dl>
<dt><img src="images/03-03.jpg"></dt>
<dd class="di"> TRANSPORTATION</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg"></dt>
<dd class="di"> KIDS ROOM</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg"></dt>
<dd class="di"> MEDITATION CLASSES</dd>
</dl>
<dl>
<dt><img src="images/03-06.jpg"></dt>
<dd class="di"> KIDS PLAY GROUND</dd>
</dl>
</div>
<div class="wei">
©2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>
1回答
-
好帮手慕久久
2020-09-10
同学你好，由于作业中可优化点会较多，建议同学将作业提交上来，会有老师专门为同学批复，并给同学优化建议，提交作业的位置如下：
祝学习愉快！
0
相似问题