可以帮忙修改下代码吗？作业区限制提交次数了
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.top {
width: 100%;
height: 80px;
background-color: #07cbc9;
overflow: hidden;
position: fixed;
top:0;
}
.logo img {
height: 80px;
line-height: 80px;
float: left;
margin-left: 100px;
width: 250px;
}
.nav ul {
list-style: none;
float: right;
margin-right: 100px;
}
.nav ul li {
height: 80px;
line-height: 80px;
display: inline-block;
margin-left: 20px;
color: white;
font-weight: bolder;
}
.nav ul li :hover{background:#000}
.nav ul li a {
padding: 0 10px;
display: block;
text-decoration: none;
font-weight: bold;
font-family: "Microsoft YaHei UI";
color: white;
}
.banner {
width: 100%;
margin-top: 80px;
}
.banner img {
width: 100%;
height: 800px;
}
.img-zhezhao {
width: 100%;
height: 800px;
background-color: black;
opacity: 0.3;
position: absolute;
top: 80px;
z-index: 2;
}
.row {
height: 500px;
width: 510px;
position: absolute;
top: 440px;
margin-top: -200px;
right: 50%;
margin-right: -255px;
}
.rowone,
.rowtwo,
.rowthree {
width: 505px;
height: 39px;
line-height: 39px;
border: white solid 2px;
color: white;
margin-bottom: 20px;
/* padding-top: 10px; */
}
.rowfour {
width: 505px;
height: 115px;
border: white solid 2px;
color: white;
margin-bottom: 20px;
padding-top: 10px;
}
.rowfive {
width: 127px;
height: 39px;
border: white solid 2px;
color: white;
/* padding-top: 10px; */
line-height: 39px;
margin: 0 auto;
}
.abouttop {
width: 568px;
text-align: center;
margin: 0 auto;
}
.about .abouttop .abouttopone {
font-size: xx-large;
font-family: "Microsoft YaHei UI";
margin-top: 40px;
}
.line {
background: #07cbc9;
width: 40px;
height: 2px;
margin: 10px auto;
}
.about .abouttop .abouttoptwo {
padding: 5px 0;
margin-bottom: 10px;
}
.about-warp {
width: 1151px;
margin: 0 auto;
/* 设置相对定位，让子元素参考定位 */
position: relative;
/* 清除浮动带来的高度塌陷问题 */
overflow: hidden;
border: 1px solid red;
margin-bottom: 20px;
}
.aboutmiddleleft {
/* width: 370px;
height: 246px;
border: 1px solid #07cbc9; */
float: left;
}
.aboutmiddleone {
font-size: 30px;
font-family: "Microsoft YaHei UI";
}
.aboutmiddletwo {
position: absolute;
width: 370px;
padding: 20px;
margin-top: 20px;
border: 1px solid#888;
background: rgba(255, 255, 255, 0.5);
}
.aboutmiddlethree {
width: 102px;
height: 45px;
line-height: 45px;
font-size: large;
color: white;
background: black;
/* padding-top:10px; */
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
.aboutmiddlethree:hover {
color: #333;
background: transparent;
}
.aboutdoublemiddle {
/* 设置float之后就可以在一排显示了，不用在设置display为inline了 */
/* display: inline; */
float: left;
/* 通过margin-left属性，设置文字与左侧内容的间距，示例：30px 同学也可以调整为其他合适的值*/
margin-left: 100px;
text-align: center;
}
.about-mid-right {
/* float: left; */
float: right;
/* margin-left: 30px; */
}
.about-mid-right-top,
.about-mid-right-buttom {
border: 1px #07cbc9 solid;
width: 236px;
height: 142px;
margin-bottom: 30px;
}
.title3 {
font-size: 40px;
font-family: "Microsoft YaHei UI";
text-align: center;
font-weight: bold;
}
.wenzi2 {
font-size: 25px;
font-family: "Microsoft YaHei UI";
text-align: center;
}
.aboutbottom {
width: 100%;
position: relative;
margin-top: 50px;
}
.picone,
.pictwo,
.picthree,
.picfour {
float: left;
width: 25%;
height: 400px;
}
.containerone,
.containertwo,
.containerthree,
.containerfour {
float: left;
width: 25%;
height: 400px;
padding-left: 20px;
background: #07cbc9;
color: white;
}
.titleone {
font-size: 30px;
padding-top: 10px;
}
.titletwo {
font-size: 20px;
padding-top: 10px;
}
.titlethree {
font-size: 15px;
padding-top: 10px;
}
.button {
width: 102px;
height: 45px;
line-height: 45px;
font-size: large;
color: white;
background: black;
/* padding-top:10px; */
margin: 100px 100px;
border: 1px solid black;
text-align: center;
}
.gallery {
overflow: hidden;
width: 100%;
margin:100px auto;
text-align: center;
}
.galleryone {
margin-top: 100px;
font-size:30px ;
}
.pic-one{float: left;
margin-right:50px;
text-align: center;
}
.pic-one img{
width:360px;
height: 240px;
}
.pic-two{float: left;
margin-right:50px;
text-align: center;
}
.pic-two img{
width:360px;
height: 240px;
}
.explain{background: #000000;
height:64px;
color:white;
width:360px;
margin-top:0;
overflow: hidden;
}
.clear{clear:both;}
.footer{
display:block;
width:100%;
height:80px;
line-height: 80px;
background:#07cbc9
}
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css"/>
<!-- <script>
onload = function(){
console.log(66666)
} -->
<!-- </script> -->
</head>
<body>
<div class="top">
<div class="logo"><img src="./img/logo.png"></div>
<div class="img-zhezhao"></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>
<div class="banner"><img src="./img/banner3.jpg"></div>
<div class="row">
<div class="rowone">your Name</div>
<div class="rowtwo">your Phone</div>
<div class="rowthree">your Email</div>
<div class="rowfour">Write Your Comment Here</div>
<div class="rowfive">SEND MESSAGE</div>
</div>
<div class="about">
<div class="abouttop">
<div class="abouttopone">ABOUT</div>
<div class="line"></div>
<div class="abouttoptwo">
<p>Lorem Ipsum is simply dummy text of the pringting and typesetting</p>
<p></p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<div class="about-warp">
<div class="aboutmiddleleft">
<div class="aboutmiddleone">
<p>A WORD</p> ABOUT US
</div>
<div class="aboutmiddletwo">
<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>
<div class="aboutmiddlethree">EXPLORE</div>
</div>
</div>
<div class="aboutdoublemiddle"><img src="./img/bb3.jpg"></div>
<div class="about-mid-right">
<div class="about-mid-right-top">
<p class="title3">70000</p>
<div class="line"></div>
<p class="wenzi2">Students</p>
</div>
<div class="about-mid-right-buttom">
<p class="title3">600</p>
<div class="line"></div>
<p class="wenzi2">Faculty</p>
</div>
</div>
</div>
<div class="box_container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="aboutbottom">
<div class="picone"><img src="./img/b1.jpg"></div>
<div class="containerone">
<p class="titleone">Libary</p>
<p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>
<p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p class="button">EXPLORE</p>
</div>
</div>
<div class="pictwo"><img src="./img/b2.jpg"></div>
<div class="containertwo">
<p class="titleone">Computer Lab</p>
<p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>
<p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p class="button">EXPLORE</p>
</div>
<div class="containerthree">
<p class="titleone">Conference Hall</p>
<p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>
<p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p class="button">EXPLORE</p>
</div>
<div class="picthree"><img src="./img/b3.jpg"></div>
</div>
<div class="containerfour">
<p class="titleone">Play Ground</p>
<p class="titletwo">Lorem Ipsum is simply dummy text of the pringting and typesetting industry</p>
<p class="titlethree">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p class="button">EXPLORE</p>
</div>
<div class="picfour"><img src="./img/b4.jpg"></div>
<div class="gallery">
<div class="galleryone">GALLERY</div>
<div class="line"></div>
<div class="gallerytwo"><p>Lorem Ipsum is simply dummy text of the pringting and typesetting</p>
<p>industry standard dummy text</p>
<p>ever since the 1500s</p></div>
<div>
<div class="pic-one"><img src="./img/03-01.jpg">
<P class="explain">SCIENCELAB</P>
</div>
<div class="pic-one"><img src="./img/03-02.jpg">
<P class="explain">INDOORSTUDIUM</P>
</div>
<div class="pic-one"><img src="./img/03-03.jpg">
<P class="explain">TRANSPORATAION</P>
</div>
<div class="pic-two"><img src="./img/03-04.jpg">
<P class="explain">KIDS ROOM</P>
</div>
<div class="pic-two"><img src="./img/03-05.jpg">
<P class="explain">MEDITAION CLASSES</P>
</div>
<div class="pic-two"><img src="./img/03-06.jpg">
<P class="explain">KEDS PLAY GROUND</P>
</div>
</div>
<div class="clear"></div>
<div class="footer">©imocc.com 京ICP备13046642号</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，抱歉老师因为搜索的问题没有查到同学已经提交过作业了。假如同学提交过作业之后，对作业还有其他问题的话都可以在问答区中提问。
代码中问题：
（1）顶部的导航样式可以优化：
（2）顶部层级不够，导致滚动的时候，下面的内容会覆盖顶部，建议提高顶部的层级：
(3)banner区遮罩层写错地方了。
(4)表单的宽度设置不合适，如下：
建议去掉宽度设置：
（5）鼠标移入表单项时，要改变边框颜色。
建议：可以给表单元素添加hover伪类，改变border-color属性。
（6）鼠标移入提交按钮时，按钮没有边框，背景颜色及字体颜色都改变。
（7）about中部有红色的边框，建议去掉。
（8）about下部分图文混排区域布局有一些乱，建议修改：
（9）图片与文字之间有空白区域，如下：
建议设置：
(10)文字区域的样式可以修改：
（11）鼠标移入按钮的时候，有背景颜色改变的效果：
（12）缺少每个文字部分的区块指向图片的箭头。
建议：当前的阶段可使用空div，然后设置边框通过定位来完成，实现小三角形之后，将小三角定位到相应的位置即可。老师这里写了个实现三角形的小例子，同学可以参考一下：
（13）gallery区域中没有实现居中效果，且图片和文字之间有间隙，文字没有垂直居中，建议修改：
（14）底部后面还有边距，建议去掉：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星