有几个问题,麻烦老师帮我看看
<header>
<div class="top">
<a href="HTMLHOMEWORK.html"><img src="img/logo.jpg"></a>
<nav>
<a href="#">HOME</a>
<a href="#">PORIFOLTO</a>
<a href="#">TEAM</a>
<a href="#">CONTACTUS</a>
</nav>
</div>
<section class="banner">
</header>
<img src="img/banner.jpg">
<!--遮罩层定位在img上-->
<div class="layer">
<h1>WELCOME TO WEBSITE</h1>
<P>Lorem ipsum dolor sit amet, consectetar adipiscing elit,sed do eiusmodtempor incididunt Ut labore et dolore magna aliqua Ut enim and</p>
</div>
</section>
*{margin:0;
padding: 0;
font-family: Microsoft YaHei UI;
}
header{
height: 80px;
width:1900px;/*切换成手机端后发现超出屏幕，如何让它自适应？试过换成百分比也不行*/
background-color:#2e2e2e;
margin:0 auto;
}
header>.top>a{
display:block;
float: left;
margin-top:20px;
margin-left:165px;
}
a:hover{ /*鼠标经过时，导航项的背景颜色变为红色，且文字颜色也发生变化.无效，加了header和top依旧无效*/
background-color:#f00;
color: #f00;}
header>.top>nav{
float:right;
margin-right: 131px;
}
header>.top>nav>a{
font-size: 14px;
float: left;
text-align: center;
color:#ffffff;
line-height: 80px;
margin-right:15px;
text-decoration: none;
}
.banner>img{
height:656px;
width:1900px;
}
/*为何遮罩层无效，改z-index为999也不行*/
.banner>.layer{
height:656px;
width:1900px;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:1;
opacity:0.5;
}
.banner>.layer>h1{
font-size: 48px;
color:#ffffff;
text-align: center;
}
.banner>.layer>p{
font-size: 14px;
color:#ffffff;
text-align: center;
}
1用谷歌审查后发现手机端的话，导航条会出去，如何自适应？
2鼠标经过无效，为什么呢？
3遮罩层无效，该如何修改
正在回答
宽度设置100%贯穿全屏和鼠标移入事件是可以实现的,同学可以清除一下缓存或者使用火狐浏览器试一试,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Microsoft YaHei UI;
}
header {
height: 80px;
width: 100%;
/*切换成手机端后发现超出屏幕，如何让它自适应？试过换成百分比也不行*/
background-color: #2e2e2e;
margin: 0 auto;
}
header>.top>a {
display: block;
float: left;
margin-top: 20px;
margin-left: 165px;
}
a:hover {
/*鼠标经过时，导航项的背景颜色变为红色，且文字颜色也发生变化.无效，加了header和top依旧无效*/
background-color: #f00;
color: #f00;
}
header>.top>nav {
float: right;
margin-right: 131px;
}
header>.top>nav>a {
font-size: 14px;
float: left;
text-align: center;
color: #ffffff;
line-height: 80px;
margin-right: 15px;
text-decoration: none;
}
.banner>img {
height: 656px;
width: 100%;
}
/*为何遮罩层无效，改z-index为999也不行*/
.banner>.layer {
height: 656px;
width: 100%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
}
.banner>.layer>h1 {
font-size: 48px;
color: #ffffff;
text-align: center;
}
.banner>.layer>p {
font-size: 14px;
color: #ffffff;
text-align: center;
}
.banner{
position: relative;
}
</style>
</head>
<body>
<header>
<div class="top">
<a href="HTMLHOMEWORK.html">
<img src="img/logo.jpg">
</a>
<nav>
<a href="#">HOME</a>
<a href="#">PORIFOLTO</a>
<a href="#">TEAM</a>
<a href="#">CONTACTUS</a>
</nav>
</div>
</header>
<section class="banner">
<img src="img/banner.jpg">
<!--遮罩层定位在img上-->
<div class="layer">
<h1>WELCOME TO WEBSITE</h1>
<P>Lorem ipsum dolor sit amet, consectetar adipiscing elit,sed do eiusmodtempor incididunt Ut labore et dolore magna
aliqua Ut enim and</p>
</div>
</section>
</body>
</html>
目前阶段我们暂时不需要考虑手机端和响应式等问题,等我们学习过了移动端课程会有专门练习知识点的作业和习题同学不需要着急哦,但是在电脑端建议需要宽度贯穿全屏显示的部分设置宽度100%哦,banner图片部分,是要求全屏显示的,建议同学宽度也要设置为100%显示,还有一些小问题,同学可以在完成整个作业做成压缩包上传作业,会有专门的批改作业的老师给出更专业的建议
经过测试代码,鼠标经过的效果是可以实现的,请同学使用谷歌或者火狐浏览器重新测试一下哦
同学所问的不是遮罩层吧,应该是banner图片上的文字吧,可以参考下图所示思路哦:
如果可以解决你的疑惑,一定要记得采纳我哦~
祝学习愉快!
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星