老师，我的问题是本节的2-10作业题。

老师，我的问题是本节的2-10作业题。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-10作业</title>
<link rel="stylesheet" href="css/2-10.css">
</head>
<body>
<div class="box">
<!--头部-->
<div class="header">
<div class="logo"><h1><a href="#">Career&nbsp;Builder</a></h1></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="main">
<!--banner-->
<div class="banner">
<div class="top"><img src="images/banner3.jpg"></div>
<div class="banner-opca"></div>
<div class="banner-form">
<form>
<input type="text" name="form" placeholder="your Name" class="form-1">
<input type="text" name="form" placeholder="your First Name" class="form-2">
<input type="text" name="form" placeholder="your Email" class="form-3">
<input type="textarea" name="form" placeholder="Where your hometown" class="form-4">
<input type="submit" name="form" value="SEND MESSAGE" class="form-5">
</form> 
</div>
</div>
<!--ABOUT-->
<div class="about">
<div class="a-top">
<div class="a-top-1"><h1>ABOUT</h1></div>
<div class="a-top-2">————</div>
<div class="a-top-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
</div>
<div class="a-second">
<div class="a-second-left">
<div class="a-second-left-title"><h1>&nbsp;&nbsp;A WORD <br >ABOUT US</h1></div>
<div class="a-second-left-con">
<div class="a-con">Praesent dignissim viverra est, sedbibendum ligula congue non. Sed ac nislet felis gravida commodo?<br>
Suspendisseeget ullamcorper ipsum. Suspendissediam amet.
<br>
<button>EXPLORE</button>
</div>
<div class="banner-opca1"></div>
</div>
<div class="a-second-middle">
<div class="a-pic"><img src="images/bb3.jpg"></div>
</div>
<div class="a-second-right">
<div class="box01">
<p class="word1">70000</p>
<p class="word2">——</p>
<p class="word3">Students</p>
</div>
<div class="box02">
<p class="word1">600</p>
<p class="word2">——</p>
<p class="word3">Students</p>
</div>
</div>
</div>
<div class="a-bottom">
<div class="a-bottom-1">
<div class="pic-1"><img src="images/b1.jpg"></div>
<div class="library">
<div><h1>Library</h1></div>
<div class="word4">Lorem Ipsum is simplay dummy text of the printing and typesetting industry</div>
<div class="word5">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unkown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button class="button">EXPLORE</button>
<div class="arrow"></div>
</div>
<div class="pic-1"><img src="images/b2.jpg"></div>
<div class="computer">
<div><h1>Computer Lab</h1></div>
<div class="word4">Lorem Ipsum is simplay dummy text of the printing and typesetting industry</div>
<div class="word5">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button class="button">EXPLORE</button>
<div class="arrow"></div>
</div>
</div>
<div class="a-bottom-2">
<div class="conference">
<div><h1>Conference Hall</h1></div>
<div class="word4">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="word5">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button class="button">EXPLORE</button>
<div class="arrow"></div>
</div>
<div class="pic-1"><img src="images/b3.jpg"></div>
<div class="play">
<div><h1>Play Ground</h1></div>
<div class="word4">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="word5">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<button class="button">EXPLORE</button>
<div class="arrow"></div>
</div>
<div class="pic-1"><img src="images/b4.jpg"></div>
</div>
</div>
</div>
<!--GALLERY-->
<div class="GALLERY">
<div class="g-top">
<h1>GALLERY</h1>
<div class="hr">————</div>
<div class="g-top-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</div>
<div class="g-middle">
<div class="g-1"><img src="images/03-01.jpg"><div class="g-2">SCIENCE LAB</div></div>
<div class="g-1"><img src="images/03-02.jpg"><div class="g-2">INDOOR STADIUM</div></div>
<div class="g-1"><img src="images/03-03.jpg"><div class="g-2">TRANSPORTATION</div></div>
<div class="g-1"><img src="images/03-04.jpg"><div class="g-2">KIDS ROOM</div></div>
<div class="g-1"><img src="images/03-05.jpg"><div class="g-2">MEDITATION CLASSES</div></div>
<div class="g-1"><img src="images/03-06.jpg"><div class="g-2">KIDS PLAY GROUND</div></div>
</div> 
</div>
</div>
<!--尾部-->
<div class="footer">&copy; 2016 imooc.com 京ICP备13046642号</div>
</div>

</body>
</html>
*{
	padding:0;
	margin:0;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
.box{
	width: 100%;
	margin:0 auto;
}
/* header */
.header{
	width:100%;
	height: 80px;
	background-color: #07cbc9;
	position: fixed;
	/*下面的代码是新加*/
	z-index: 5;
}
.header .logo{
	float: left;
	width:80px;
	height: 60px;
	line-height: 60px;
	padding-top: 10px;
}
.header .logo a{
	padding-left: 70px;
	font-size: 30px;
	color:#fff;
	font-family: "微软雅黑";
}
.header .logo h1 a:hover{
	color:orange;
}
.header .nav{
	float: right;
	padding-right: 70px;
	/* padding-top: 10px; *//*删除*/
} 
.header .nav li{
	float: left;
	width:80px;
	height: 80px;
	line-height: 80px;
	/*新加*/
	text-align: center;
}
.header .nav ul li a{
	font-size: 15px;
	color:#fff;
	font-family: "微软雅黑";
}
/* .header .nav ul li a:hover{
	color:orange;
} */
.header .nav li:hover{
	background-color: #000;
}
/* main */
.main .banner{
	width: 100%;
	height: 600px;
}
/*由于顶部设置固定定位，脱离文档流，banner区域中的图片上移一部分，用外边距来拉开距离*/
.main .banner img{
	width:100%;
	height: 600px;
	margin-top:80px;
}
.main .banner .banner-opca{
	position: absolute;
	top:80px;
	left:0;
	background: #000;
	width:100%;
	height: 600px;
	opacity: 0.5;
}
.main .banner .banner-form input:hover{
	border: 1px solid #07cbc9;
}
.main .banner .banner-form .form-5:hover{
	background-color: #07cbc9;
}
.main .banner .banner-form .form-1{
	width:505px;
	height: 39px;
	border:2px solid #d5d5d4;
	position: absolute;
	top:180px;
	left:50%;
	margin-left: -253px;
	z-index:2;
	line-height: 39px;
	padding-left: 5px;
	color:#ddd;
	font-size:15px;
	font-family: "Microsoft Yahei";
	/* background: rgba(255,255,255,.1); */
	background-color: transparent;
}
.main .banner .banner-form .form-2{
	width:505px;
	height: 39px;
	position: absolute;
	border:2px solid #d5d5d4;
	top:240px;
	left:50%;
	margin-left: -253px;
	z-index:2;
	line-height: 39px;
	padding-left: 5px;
	color:#ddd;
	font-size:15px;
	font-family: "Microsoft Yahei";
	/* background: rgba(255,255,255,.1); */
	background-color: transparent;
}
.main .banner .banner-form .form-3{
	width:505px;
	height: 39px;
	position: absolute;
	border:2px solid #d5d5d4;
	top:300px;
	left:50%;
	margin-left: -253px;
	z-index:2;
	line-height: 39px;
	padding-left: 5px;
	color:#ddd;
	font-size:15px;
	font-family: "Microsoft Yahei";
	/* background: rgba(255,255,255,.1); */
	background-color: transparent;
}
.main .banner .banner-form .form-4{
	width:505px;
	height: 39px;
	position: absolute;
	border:2px solid #d5d5d4;
	top:360px;
	left:50%;
	margin-left: -253px;
	z-index:2;
	line-height: 39px;
	padding-left: 5px;
	color:#ddd;
	font-size:15px;
	font-family: "Microsoft Yahei";
	/* background: rgba(255,255,255,.1); */
	background-color: transparent;
}
.main .banner .banner-form .form-5{
	width:127px;
	height: 39px;
	position: absolute;
	border:2px solid #d5d5d4;
	top:435px;
	left:50%;
	margin-left: -62px;
	z-index:2;
	line-height: 39px;
	padding-left: 5px;
	color:#ddd;
	font-size:15px;
	font-family: "Microsoft Yahei";
	/* background: rgba(255,255,255,.1); */
	background-color: transparent;
}
/* about */
.about{
	width: 100%;
	position: absolute;
	top:700px;
}
.about .a-top .a-top-1{
	height: 20px;
	margin-top: 20px;
	font-family: "Microsoft Yahei";
	text-align: center;
	font-size: 20px;
}
.about .a-top .a-top-2{
	height: 2px;
	margin-top: 40px;
	color:#07cbc9;
	font-family: "Microsoft Yahei";
	text-align: center;
}
.about .a-top .a-top-3{
	height: 40px;
	margin-top: 40px;
	font-family: "Microsoft Yahei";
	text-align: center;
	font-size: 14px;
}
/*新加*/
.about .a-second{
	width:100%;
	margin:0 auto;
}
.about .a-second .a-second-left{
	margin-top: -100px;
	margin-left: 100px;
	z-index: 2;
	background-color:rgba(255,255,255,.1);
	float: left;
}
.about .a-second .a-second-left .a-second-left-title{
	font-weight: normal;
	font-size: 12px;
	font-family: "微软雅黑";
	margin-left: 30px;
}
.about .a-second .a-second-left .a-second-left-con{
	width:370px;
	height: 246px;
	border:1px solid #ddd;
	padding:20px;
	line-height: 30px;
	z-index: 2;
	background: rgba(255,255,255,.4);
}
.about .a-second .a-second-left button{
	width:102px;
	height: 45px;
	margin-top: 40px;
	background: #000;
	color:#fff;
	border:none;
	z-index:4;
}
.about .a-second .a-second-left button:hover{
	background-color: transparent;
	border:1px solid #000;
}
/*新加*/
.about .a-second .a-second-left .banner-opca1{
	position: absolute;
	top:275px;
	left:100px;
	width:370px;
	height: 246px;
	padding: 20px;
	z-index: 3;
	background-color: #fff;
	opacity: 0.5;
}
/*新加*/
.about .a-second .a-second-middle{
	margin-top: -10px;
	z-index: 1;
	/*新加*/
	float: left;
}
.about .a-second .a-second-middle .a-pic{
	width:568px;
	height: 380px;
	margin-top: -340px;
	/* z-index: 1; */
	margin-left: 300px;
}
.about .a-second .a-second-right{
	margin-top: -400px;
	margin-left: 980px;
	float: left;
}
.about .a-second .a-second-right .box01{
	border:1px solid #07cbc9;
	width:200px;
	height: 120px;
	margin-top: 20px;
	padding-top: 20px;
	font-family: "微软雅黑";
}
.about .a-second .a-second-right .box02{
	border:1px solid #07cbc9;
	width:200px;
	height: 120px;
	margin-top: 20px;
	padding-top: 20px;
	font-family: "微软雅黑";
}
.about .a-second .a-second-right .word1{
	font-weight: bold;
	font-size:25px;
	/* margin-left: 80px; */
	text-align: center;
}
.about .a-second .a-second-right .word2{
	color:#07cbc9;
	/* margin-left: 90px; */
	text-align: center;
}
.about .a-second .a-second-right .word3{
	font-weight: bolder;
	/* margin-left: 80px; */
	text-align: center;
}

.about .a-bottom{
	width:100%;
	/* margin-top: 150px; */
	margin-top:150px;
	padding-top: 400px;
}
.about .a-bottom .a-bottom-1,.a-bottom-2{
	width: 100%;
	height: 300px;
	float: left;
	position: relative;
}
.about .a-bottom .library,.computer,.play,.conference{
	width:25%;
	height: 300px;
	background: #07cbc9;
	text-align: center;
	color:#fff;
	float: left;
	
}  
.about .a-bottom .a-bottom-1 .library .arrow{
	width:0;
	height: 0;
	border-style: solid;
	border-width:20px 20px 20px 30px;
	border-color:transparent transparent transparent #07cbc9;
	position: absolute;
	top:130px;
	left:290px;
	z-index: 2;
	transform: rotate(180deg);
}
.about .a-bottom .a-bottom-1 .computer .arrow{
	width:0;
	height: 0;
	border-style: solid;
	border-width:20px 20px 20px 30px;
	border-color:transparent transparent transparent #07cbc9;
	position: absolute;
	top:130px;
	left:963px;
	z-index: 2;
	transform: rotate(180deg);
}
.about .a-bottom .a-bottom-2 .conference .arrow{
	width:0;
	height: 0;
	border-style: solid;
	border-width:20px 20px 20px 30px;
	border-color:transparent transparent transparent #07cbc9;
	position: absolute;
	top:130px;
	left:337px;
	z-index: 2;
}
.about .a-bottom .a-bottom-2 .play .arrow{
	width:0;
	height: 0;
	border-style: solid;
	border-width:20px 20px 20px 30px;
	border-color:transparent transparent transparent #07cbc9;
	position: absolute;
	top:130px;
	left:1010px;
	z-index: 2;
}
.about .a-bottom .pic-1 img{
	width: 25%;
	height: 300px;
	float: left;
}
.about .a-bottom-1 h1{
	font-size:20px;
	font-family: "微软雅黑";
	margin-top:20px;
}
.about .a-bottom-2 h1{

	font-size:20px;
	font-family: "微软雅黑";
	margin-top:20px;
}
.about .a-bottom-1 .word4{
	font-size: 14px;
	font-family: "微软雅黑";
	margin-top:25px;
}
.about .a-bottom-2 .word4{

	font-size: 14px;
	font-family: "微软雅黑";
	margin-top:25px;

}
.about .a-bottom-1 .word5{

	font-size: 10px;
	font-family: "微软雅黑";
	margin-top:20px;

}
.about .a-bottom-2 .word5{

	font-size: 10px;
	font-family: "微软雅黑";
	margin-top:20px;

}
.about .a-bottom .button{
	width:100px;
	height: 30px;
	margin:30px 75px;
	font-size: 14px;
	background-color: #000;
	color:#fff;
}
/*gallery*/
.about .GALLERY{
	width:100%;
	height: 1000px;
	margin-top: 650px;
}
.about .GALLERY .g-top{
	width:100%;
	height: 200px;
	margin-top:20px;
	font-family: "微软雅黑";
	text-align: center;
}
.about .GALLERY .g-top .hr{
	color:#07cbc9;
}
.about .GALLERY .g-top .g-top-1{
	margin-top: 5px;
} 
.about .GALLERY .g-middle{
	/* width:100%; */
	width:1200px;
	height: 700px;
	margin:0 auto;
}
.about .GALLERY .g-middle .g-1{
	width: 360px;
	height: 304px;
	float: left;
	margin:10px;
}
.about .GALLERY .g-middle .g-1 img{
	display: block;
}
.about .GALLERY .g-middle .g-1 .g-2{
	width:350px;
	height: 64px;
	background: #000;
	color:#fff;
	float: left;
	line-height: 64px;
	padding-left: 10px;
}
.footer{
	width:100%;
	height: 80px;
	background: #07cbc9;
	color:#fff;
	position: fixed;
	left:0;
	bottom: 0;
	text-align: center;
	line-height: 80px;
}

老师，鉴于提交两次作业之后还有些小问题没解决，所以在这再请教下老师。我的问题是，一：在我给About区左侧的内容设置遮罩层之后，里面的按钮在鼠标悬停的时候就没有了样式，而且设置z-index也没有用。二：这个作业我大大小小改了5.6次，但还是觉得我的样式写的不好，请老师指正下。
慕斯0469344 2019-08-02
源自：项目：网页布局案例   2-10 作业题
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕嘟嘟 2019-08-02 18:29:06

同学你好，

 1，banner图上的表单鼠标经过时出现晃动的效果。因为表单的边框和鼠标经过时的边框宽度不同导致的。鼠标经过时将边框设置为2px。 

2， About左侧的遮罩层可以去掉。即HTML中<div class="banner-opca1"></div> 删除。然后设置左侧内容定位：

http://img1.sycdn.imooc.com//climg/5d440ea1000146e704290258.jpg

设置之后按钮在鼠标经过时设置文字内容颜色为黑色。

3.同学说的这块区域没有居中。

http://img1.sycdn.imooc.com//climg/5d440f140001119105490151.jpg

 修改如下：

http://img1.sycdn.imooc.com//climg/5d440f35000138ee03880247.jpg

http://img1.sycdn.imooc.com//climg/5d440f5800015b0f02500148.jpg

 4，三角错位。

http://img1.sycdn.imooc.com//climg/5d440f850001961905490172.jpg

 三角定位时是根据文字内容进行的定位。修改如下：

http://img1.sycdn.imooc.com//climg/5d440fb200018d7d04510218.jpg

http://img1.sycdn.imooc.com//climg/5d440fd1000198d205070300.jpg

http://img1.sycdn.imooc.com//climg/5d44101200014cd804980280.jpg

 5，没有居中。

http://img1.sycdn.imooc.com//climg/5d44103300010b3f05560120.jpg

修改如下：

http://img1.sycdn.imooc.com//climg/5d4410570001081502660144.jpg

如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.

如果我的回答帮助了你欢迎采纳,祝学习愉快~



1
收起回答
  • 提问者 慕斯0469344 #1
    老师，这里为什么设置.about .a-second .a-second-left{ width:1240px; height: 450px; } 以及：.about .a-bottom .a-bottom-1 .arrow{ left:-50px; } ？
    2019-08-06 17:19:18
  • 好帮手慕嘟嘟 回复 提问者 慕斯0469344 #2
    同学你好， ① 详见 3，这块区域没有居中。所以进行如下修改哦。 ② 详见4，三角错位所以要这样修改哦。
    2019-08-06 19:11:02
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，我的问题是本节的5-12课程作业。
14 0 3
作业中的问题
2 0 4
请问老师有检查 我的作业吗，为什么反馈回来的东西都是别人的问题文档？
17 0 3
老师，我的有问题不
1 0 3
2-10作业
1 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师