上次交作业，老师看错文档了，把我之前初步的作业构架看了。这是我根据老师的意见修改了一点之后的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0;margin:0;}
body{font-family: "Microsoft YaHei UI";margin:0 auto;}
/*顶部*/
.header{
width: 100%;
height:100px;
background-color: #07cbc9;
overflow: hidden;
position: fixed;
top:0;
z-index: 999;
}
.header img{
float: left;
height: 60px;
width:200px;
padding-top: 20px;
padding-left: 80px;
}
.header ul{
float: right;
margin-right: 100px;
}
.header ul li{
list-style: none;
float: left;
line-height: 100px;
margin-left: 30px
}
.header ul li a{
text-decoration: none;
height: 100px;
color:white;
font-size: 15px;
display: block;
padding:0 10px;
}
.header ul li a:hover{
background-color: black;
}
/*-------banner区*/
.maintop{
position: relative;
margin-top: 100px;
}
.maintop .banner{
height: 600px;
width: 100%;
}
.maintop .banner img{
height: 600px;
width: 100%;
}
.maintop .bannerladyer{
height: 600px;
width: 100%;
background-color:black;
position: absolute;
top:0px;
left:0px;
opacity: 0.5;
z-index: 2;
}
.maintop .mainform{
width: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -127.5px;
z-index: 5;
}
.maintop .mainform form input{
color: white;
display: block;
margin-top: 10px;
height: 30px;
width: 400px;
background: 0;
border:2px solid gray;
}
.maintop .mainform form textarea{
color: white;
width: 400px;
height: 60px;
margin-top: 10px;
background: 0;
border:2px solid gray;
}
.maintop .mainform button{
background: 0;
width: 100px;
height:30px;
color: white;
border:2px solid gray;
margin-top: 15px;
margin-left: 150px;
}
.maintop .mainform form input:hover,.maintop .mainform form textarea:hover{
border-color:#07cbc9;
}
.maintop .mainform button:hover{
background-color: #07cbc9;
border: none;
}
/*------about区上部*/
.abouttop{
padding-top: 50px;
width: 80%;
margin:0 auto;
background-color:#ffffff;
}
.abouttop .des1{
text-align: center;
font-weight: bold;
font-size: 30px;
}
.abouttop .des2{
text-align: center;
}
.abouttop .kong{
width: 40px;
margin:10px auto;
border-top:2px #07cbc9 solid;
}
/*about区中间*/
.aboutmid{
width: 1000px;
padding-top: 50px;
margin:0 auto;
}
.aboutmid .box1,.box2,.box3{
float: left;
}
}
.aboutmid .box1{
width:300px;
border: 1px blue solid;
}
.aboutmid .box1 .worda{
font-size: 30px;
margin-left: 10px;
}
.aboutmid .box1 .wordb{
width: 300px;
border: 1px gray solid;
background-color: #ffffff;
height: 200px;
position: absolute;
background:rgba(0,0,0,0.5);
z-index: 2;
}
.aboutmid .box1 .wordb div{
margin-left: 10px;
margin-top:10px;
}
.aboutmid .box1 button{
background-color: #000;
width: 100px;
height:30px;
color: white;
border: none;
margin-top:10px;
margin-left: 10px;
margin-bottom: 10px;
z-index: 9999;
}
.aboutmid .box1 button:hover{
background: 0;
border: 1px #000 solid;
z-index: 99999;
}
.aboutmid .box2{
width: 400px;
height: 300px;
}
.aboutmid .box2 img{
width:400px;
height: 300px;
margin-left: 20px;
}
.aboutmid .box3{
width: 200px;
height: 200px;
}
.aboutmid .box3 .boxa{
border:2px #07cbc9 solid;
width: 150px;
text-align: center;
margin-bottom: 10px;
margin-left:40px;
}
.aboutmid .box3 .math{
font-weight: bold;
font-size: 20px;
margin-top:8px ;
}
.aboutmid .box3 .word{
margin-bottom: 8px;
font-size: 15px;
}
.aboutmid .kong{
width: 30px;
margin:8px auto;
border-top:2px #07cbc9 solid;
}
/*about区底部*/
.aboutbottom{
background-color:#ffffff;
width: 100%;
overflow: hidden;
padding-top: 50px;
}
.aboutbottom div div img{
width: 300px;height: 300px;
}
.aboutbottom div .div1,.aboutbottom div .div2{
background-color:#07cbc9;
width: 300px;height: 300px;
}
.aboutbottom div{
float: left;
}
.aboutbottom .ab1 .sj1{
width:0px;
height:0px;right: 0px;
border-top: 15px solid transparent;
border-right: 26px solid #07cbc9;
border-bottom: 15px solid transparent;
z-index: 99;
}
.aboutbottom .ab2 .sj2{
width:0px;
height:0px;
border-top: 15px solid transparent;
border-left: 26px solid #07cbc9;
border-bottom: 15px solid transparent;
z-index: 99;
}
.aboutbottom .ab1 .sj1,.aboutbottom .ab2 .sj2{
margin-top: 137px;
}
.aboutbottom .ab2 .sj2{
position: absolute;
right: -26px;
}
.aboutbottom .aq{
margin-left: -26px;
}
.aboutbottom div .aw{
margin-right: 0px;
position: relative;
}
.aboutbottom .texa{
font-size: 20px;
color: #ffffff;
padding-top: 20px ;
padding-left: 20px;
}
.aboutbottom .texb{
font-size: 15px;
color: #ffffff;
padding-top: 20px;
padding-left: 20px;
line-height: 20px;
}
.aboutbottom .texc{
font-size:10px;
color: #ffffff;
padding-top: 20px;
padding-left: 20px;
line-height: 15px;
}
.aboutbottom button{
background-color: #000;
width: 100px;
height:30px;
color: white;
border: none;
margin-top:30px;
margin-left: 100px;
}
.aboutbottom button:hover{
background: 0;
border: 1px #000 solid;
}
/*gallery区*/
.gallery{
padding: 50px 0;
width: 1000px;
margin:0 auto;
background-color: #ffffff;
overflow: hidden;
}
.gallery .text1{
text-align: center;
font-weight: bold;
font-size: 30px;
}
.gallery .text2{
text-align: center;
}
.gallery .kong{
width: 40px;
margin:10px auto;
border-top:2px #07cbc9 solid;
}
.gallery .imge{
border: 1px none black;
margin: 50px auto;
}
.gallery .imge div{
float: left;
margin:10px;
}
.gallery .imge .img1{
background-color: #000;
height: 250px
}
.gallery .imge div img{
width: 300px;height:200px;background-color: #000;
}
.gallery .imge div p{
color: #ffffff;
margin:10px 10px ;
}
/*页脚区*/
.footer{
width: 100%;
height:100px;
background-color:#07cbc9;
}
.footer p{
text-align: center;
line-height: 100px;
color: white;
font-size: 14px
}
</style>
</head>
<body>
<!--顶部-->
<div class="header">
<img src="img/logo.png">
<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>
<!--banner区-->
<div class="maintop">
<!--banner-->
<div class="banner">
<img src="img/banner3.jpg">
</div>
<!--遮罩层-->
<div class="bannerladyer"></div>
<!--表单-->
<div class="mainform">
<form>
<input type="text" name="username" placeholder="your Name">
<input type="text" name="phone" placeholder="your Phone">
<input type="text" name="email" placeholder="yourEmail">
<textarea type ="text" name="comment" placeholder="Write Your Comment Here" rows="6"></textarea>
</form>
<button>SEND MESSAGE</button>
</div>
</div>
<!--ABOUT区-->
<!--ABOUT区顶部-->
<div class="abouttop">
<div class="des1">ABOUT</div>
<div class="kong"></div>
<div class="des2">Lorem Ipsum is simply dummy text of the printing and typesetting<br/> industry.Lorem Ipsum has been the industy's standard dummy<br/> text ever since the 1500s.</div>
</div>
<!--ABOUT区-中间-->
<div class="aboutmid">
<div class="box1">
<div class="worda">A WORD<br/>ABOUT US</div>
<div class="wordb">
<div>Prasent dignissin viverra est,sed<br/>bibendum ligula conguenon.Sed ac nisl<br/>ei felis gravda commodo?Suspendisse<br/>eget ullamcorper ipsum.Suspendisse<br/>diam amet. </div>
<button>EXPLORE</button>
</div>
</div>
<div class="box2">
<img src="img/bb3.jpg">
</div>
<div class="box3">
<div class="boxa">
<div class="math">70000</div>
<div class="kong"></div>
<div class="word">Stusents</div>
</div>
<div class="boxa">
<div class="math">600</div>
<div class="kong"></div>
<div class="word">Faculty</div>
</div>
</div>
</div>
<!--about区底部-->
<div class="aboutbottom">
<div class="ab1">
<div class="img1"><img src="img/b1.jpg"></div>
<div class="aq">
<div class="sj1"></div>
<div class="div1">
<div class="texa">Library</div>
<div class="texb">Lorem Ipsum simply dummy of the<br/>printing and typesetting industry</div>
<div class="texc">Lorem Ipsum had been the industry's standard dummy<br/>text ever since the 1500s,when an unknow print took<br/>a galley of type and scrambled it to make a type<br/>specimen book.</div>
<button>EXPLORE</button>
</div>
</div>
</div>
<div class="ab1">
<div class="img2"><img src="img/b2.jpg"></div>
<div class="aq">
<div class="sj1"></div>
<div class="div1">
<div class="texa">Computer Lab</div>
<div class="texb">Lorem Ipsum simply dummy of the<br/>printing and typesetting industry</div>
<div class="texc">Lorem Ipsum had been the industry's standard dummy<br/>text ever since the 1500s,when an unknow print took<br/>a galley of type and scrambled it to make a type<br/>specimen book.</div>
<button>EXPLORE</button>
</div>
</div>
</div>
<div class="ab2">
<div class="aw">
<div class="div2">
<div class="texa">Conference Hall</div>
<div class="texb">Lorem Ipsum simply dummy of the<br/>printing and typesetting industry</div>
<div class="texc" >Lorem Ipsum had been the industry's standard dummy<br/>text ever since the 1500s,when an unknow print took<br/>a galley of type and scrambled it to make a type<br/>specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="sj2"></div>
</div>
<div class="img3"><img src="img/b3.jpg"></div>
</div>
<div class="ab2">
<div class="aw">
<div class="div2">
<div class="texa">Play Ground</div>
<div class="texb">Lorem Ipsum simply dummy of the<br/>printing and typesetting industry</div>
<div class="texc">Lorem Ipsum had been the industry's standard dummy<br/>text ever since the 1500s,when an unknow print took<br/>a galley of type and scrambled it to make a type<br/>specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="sj2"></div>
</div>
<div class="img4"><img src="img/b4.jpg"></div>
</div>
</div>
<!--gallery区-->
<div class="gallery">
<div class="text1">GALLERY</div>
<div class="kong"></div>
<div class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting<br/> industry.Lorem Ipsum has been the industy's standard dummy text<br/> ever since the 1500s.</div>
<div class="imge">
<div class="img1">
<img src="img/03-01.jpg">
<p>SCIENCE LAB</p>
</div>
<div class="img1">
<img src="img/03-02.jpg">
<p>INDOOR STADIUM</p>
</div>
<div class="img1">
<img src="img/03-03.jpg">
<p>TRANSPORTATION</p>
</div>
<div class="img1">
<img src="img/03-04.jpg">
<p>KIDS ROOM</p>
</div>
<div class="img1">
<img src="img/03-05.jpg">
<p>MEDITATION CLASSES</p>
</div>
<div class="img1">
<img src="img/03-06.jpg">
<p>KIDS PLAY GROUND</p>
</div>
</div>
</div>
<!--页脚区-->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学 , 如果不重新上传作业的话 , 批复老师是没有办法给你批复的 .同学下次提交作业的时候 ,一定要注意 , html文件要写上后缀 . html , 不然的话这个文件并不是html文件 , 批复老师并不知道这是你要交的版本 ,请同学理解 . 如下加上后缀名 :
另外 , 老师根据你上传的代码对比了一下 , 有很多相同的问题 还没有按照批复文档改过来, 例如导航 ,表单按钮 , about区域下部分 . 建议同学先根据批复文档 ,把相同的问题先改过来 . 然后修改之后 , 如果不想上传作业 , 可以在问答区域重新提问 , 上传完整代码 . 老师根据你修改之后帮助你指导 .
祝学习愉快 !
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星