老师，我之前作业写了不到一半就交了，这次是完整版，请老师点评一下，图片和html文件一个路径
来源：2-10 作业题
Jeremy_Li7
2019-12-09 21:02:40
<!doctype html>
<html><!--根标签-->
<head<!--不可视区域-->
<meta charset="UTF-8"><!--国际编码-->
<!--网页三要素-->
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>2-10作业</title>
<link rel="stylesheet" href="xincss.css">
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none;
font-family:"Microsoft YaHei UI";
}
a{text-decoration:none;}
.clear{clear:both;}
.header{
width:100%;
height:80px;
background:#07cbc9;
position:fixed;
overflow:hidden;
zoom:1;
top:0;
z-index:99;
}
.logo{
margin:0 55px;
float:left;
padding-top:16px;
}
.header .logo .img{
width:260px;
height:48px;
display:block;
}
.nav{
height:80px;
float:right;
padding-right:30px;
}
.header .nav li{
float:left;
height:80px;
margin-right:25px;
}
.header .nav li a{
display:block;
height:80px;
line-height:80px;
padding:0 10px;
font-size:20px;
color:#fff;
}
.header .nav li a:hover{color:blue;}
.container{
overflow:hidden;
zoom:1;
}
.container .banner{
width:100%;
overflow:hidden;
zoom:1;
}
.banner img{
width:100%;
height:800px;
top:80px;
}
.banner layout{
background:black;
width:100%;
height:800px;
position:absolute;
top:80px;
opacity:0.3;
z-index:2;
}
.banner .form{
width:509px;
height:315px;
position:absolute;
top:323px;
left:50%;
margin-left:-255px;
z-index:3;
}
.banner input{
width:505px;
height:39px;
border:2px solid white;
background:transparent;
margin-bottom:10px;
}
.banner textarea{
width:505px;
height:115px;
border:2px solid white;
margin-bottom:10px;
background:transparent;
color:gray;
font-size:14px;
}
.banner button{
width:125px;
height:39px;
background:transparent;
border:2px solid white;
color:white;
}
.about{
width:100%;
height:auto;
margin-top:40px;
overflow:hidden;
zoom:1;
}
.container .text1 {
font-weight:bold;
font-size: 48px;
text-align:center;
}
.container .line{
background: #07cbc9;
width: 50px;
height: 2px;
margin: 10px auto;
}
.about .text2 {
text-align:center;
margin-bottom: 50px;
}
.about .zituzi{
width:1050px;
height:500px;
margin:0 auto;
overflow:hidden;
zoom:1;
position:relative;
}
.zituzi .zileft{
width:200px;
height:150px;
text-align:center;
float:left;
}
.zituzi .zileft h3{
font-size:28px;
text-align:center;
}
.zituzi .ziright{
width:200px;
float:right;
}
.zituzi .tu{
width:575px;
height:380px;
float:left;
margin:0 30px;
}
.zituzi .tu img{
width:575px;
height:380px;
}
.ziright > div{
border:1px solid #07cbc9;
width:198px;
padding:40px 0;
text-align:center;
}
.ziright .top{
margin-bottom:30px;
}
.zituzi .praesent{
position:absolute;
left:0;
top:80px;
width:300px;
padding:10px;
border:1px solid #888;
/* 通过rgba设置背景透明度 */
background:rgba(255, 255, 255, 0.6);
}
/* 按钮的样式 */
.zituzi .praesent .button{
width:100px;
height:45px;
margin-top:8px;
border:1px solid gray;
padding:0 20px;
background:#000;
color:#fff;
}
/*设置整个about下区的宽和高*/
.four{
width:100%;
height:800px;
position:relative;
overflow:hidden;
zoom:1;
}
/*分成两行，宽100%，高400px;*/
.four .firstrow,.four .secondrow{
width:100%;
height:400px;
overflow:hidden;
zoom:1;
}
.four .t1{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t2{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t3{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t4{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t5{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t6{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t7{width:25%;height:400px;float:left;background:#07cbc9;}
.four .t8{width:25%;height:400px;float:left;background:#07cbc9;}
.four img{width:100%;height:400px;}
.four button{
width:80px;
height:40px;
display:block;
margin:0 auto;
background:#000;
color:white;
border:none;
}
.four .p1,.p2,.p3{
margin:10px 20px;
}
.four .p1{font-size:20px;font-weight:bold;color:white;}
.four .p2{font-size:15px;color:white;}
.four .p3{font-size:10px;color:pink;}
.gallery .text1{margin-top:50px;}
.gallery .text2{text-align:center;}
.gallery .six{
width:1160px;
height:628px;
margin:50px auto 130px auto;
}
.gallery img{display:block;}
.gallery .one,.gallery .two{
width:360px;
height:300px;
float:left;
margin:0 10px;
}
.gallery .one{margin-bottom:20px;}
.gallery .textlast{
height:24px;
background:#000;
padding:20px;
color:white;
text-align:left;
}
.footer{
width:100%;
height:80px;
line-height:80px;
text-align:center;
background:#07cbc9;
position:fixed;
bottom:0;
}
</style>
</head>
<body<!--可视化区域-->
<!--下面是顶部图下面是顶部图-->
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<ul class="nav">
<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>
<!--container部分-->
<div class="container">
<!--banner区域-->
<div class="banner">
<img src="images/banner3.jpg">
<div class="layout"></div>
<div class="form">
<form>
<input type="text" name="name" placeholder="your Name"><br>
<input type="text" name="name" placeholder="your Hobby"><br>
<input type="text" name="name" placeholder="your Email"><br>
<textarea name="write" placeholder="Write Your Comments Here"></textarea><br>
<button name="button" value="SEND MASSAGE">SEND MESSAGE</button>
</form>
</div>
</div>
<!--about区域-->
<div class="about">
<!--标题-->
<div class="text1">ABOUT</div>
<!--下划线-->
<div class="line"></div>
<!--文字内容-->
<div class="text2">Lorem ipsum is simply dummpy text of the printing and typesetting <br>industy. Lorem
Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</div>
<!--文本区域-->
<div class="zituzi">
<!--文字-->
<div class="zileft"><h3>A WORD<br>ABOUT US</h3></div>
<div class="tu"><img src="images/bb3.jpg"></div>
<!--右侧内容-->
<div class="ziright">
<div class="top">
<p class="title">7000</p>
<div class="line"></div>
<p>students</p>
</div>
<div class="bottom">
<p class="title">600</p>
<div class="line"></div>
<p>faculty</p>
</div>
</div>
<!--盖在图片上的文字-->
<div class="praesent">
<p>praesent dignissim viverra est,sed<br> bibendum ligsuspendisse<br> diam amet.</p>
<button class="button">EXPLORE</button>
</div>
</div>
<!--4张图片4段话////高度固定为800px-->
<div class="four">
<!--第一排的两图两段-->
<div class="firstrow">
<div class="t1"><img src="images/b1.jpg"></div>
<div class="t2">
<div class="p1">library</div>
<div class="p2">lorem ipsum is simply dummy text of the printing and esetting industry</div>
<div class="p3">apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple apple</div>
<button name="button" value="EXPLORE">EXPLORE</button>
</div>
<div class="t3"><img src="images/b2.jpg"></div>
<div class="t4">
<div class="p1">computer lab</div>
<div class="p2">lorem ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="p3">banana banana banana banana banana banana banana banana banana banana banana banana </div>
<button name="button" value="EXPLORE">EXPLORE</button>
</div>
</div>
<!--第二排的两图两段-->
<div class="secondrow">
<div class="t5">
<div class="p1">conference hall</div>
<div class="p2">lorem ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="p3">cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat cat </div>
<button name="button" value="EXPLORE">EXPLORE</button>
</div>
<div class="t6"><img src="images/b3.jpg">
</div>
<div class="t7">
<div class="p1">play ground</div>
<div class="p2">lorem ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="p3">dog dpg dog dog dog dpg dog dog dog dpg dog dog dog dpg dog dog dog dpg dog dog dog dpg dog dog</div>
<button name="button" value="EXPLORE">EXPLORE</button>
</div>
<div class="t8"><img src="images/b4.jpg">
</div>
</div>
</div>
</div>
<!--下面是GALLERY区-->
<div class="gallery">
<div class="text1">GALLERY</div>
<div class="line"></div>
<div class="text2">apple banana cat dog pple banana<br>cat dog apple banana cat dog apple banana cat dog apple<br> banana cat dog apple</div>
<div class="six">
<div class="one">
<img src="images/03-01.jpg">
<div class="textlast">SCIENCE LAB</div>
</div>
<div class="one">
<img src="images/03-02.jpg">
<div class="textlast">INDOOR STADIUM</div>
</div>
<div class="one"><img src="images/03-03.jpg">
<div class="textlast">TRANSPORTATION</div>
</div>
<div class="two"><img src="images/03-04.jpg">
<div class="textlast">KIDS ROOM</div>
</div>
<div class="two"><img src="images/03-05.jpg">
<div class="textlast">MEDITATION CLASSES</div>
</div>
<div class="two"><img src="images/03-06.jpg">
<div class="textlast">KIDS PLAY GROUND</div>
</div>
</div>
</div>
<!--下面是页脚区-->
<div class="footer">©2016imooc.com 京ICP备13046642号</div>
</body>
</html>写回答
1回答
-
同学你好，老师看了下同学的代码，问题还是有点多的哦，老师这边可能要写好几页的文档。老师会帮同学催一下批复作业的老师，会有详细的批复文档帮助同学改正，同学可以参照批复文档一一比对。如果我这边给同学批改，批复作业的老师也给同学批改，很可能给同学造成混乱。另外我们的作业都是有两次提交的机会，同学可以等第一次的作业批复完，改正之后再提交第二个，同样会有老师给同学批复作业，这个过程中同学有什么不理解的，都可以在问答区进行提问。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题