麻烦老师看下是否有误 有无改进的地方
来源：4-6 自由编程
dww1
2021-08-24 00:17:38
css：
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
/* 头部 */
header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .main-top{
width: 1200px;
margin: 0 auto;
/*清除浮动 */
overflow: hidden;
}
header .main-top .logo{
float: left;
height: 48px;
padding-top: 16px;
}
header .main-top .main-nav{
float: right;
height: 48px;
padding-top: 16px;
}
header .main-top .main-nav ul{
width: 600px;
height: 48px;
margin: 0 auto;
}
header .main-top .main-nav ul li{
float: left;
margin-right: 20px;
text-align: center;
line-height: 48px;
}
header .main-top .main-nav ul li:last-child{
margin-right: 0;
}
header .main-top .main-nav ul li a{
display: block;
color: #fff;
font-size: 16px;
}
/* banner区域 */
.banner{
position: relative;
width: 100%;
height: 600px;
}
.banner .banner-img{
width: 100%;
height: 600px;
}
.banner .hidden{
position: absolute;
width: 100%;
height: 600px;
top: 0;
left:0;
background-color: rgba(0, 0, 0, .6);
}
.banner .center{
position:absolute;
width: 506px;
top: 100px;
left: 50%;
margin-left: -252px;
text-align: center;
}
.banner .center form input{
width: 504px;
height: 40px;
margin-bottom: 20px;
border: 1px solid #808080;
background:none;
color: #808080;
}
.banner .center textarea{
width: 504px;
height: 110px;
border: 1px solid #808080;
background:none;
color:#808080;
}
.banner .center .input-sub{
width: 200px;
height: 40px;
margin-top: 20px;
}
html：
<!-- 页面头部 -->
<header>
<div class="main-top">
<!-- logo -->
<div class="logo">
<a href=""><img src="images/logo.png" alt=""></a>
</div>
<!-- 导航条 -->
<nav class="main-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>
</nav>
</div>
</header>
<!-- banner区域 -->
<section class ="banner">
<!-- 图片 -->
<img src="images/banner3.jpg" class="banner-img"alt="">
<!-- 遮罩层 -->
<div class="hidden"></div>
<div class="center">
<!-- 表单 -->
<form action="" method="POST">
<input type="text" placeholder="your Name"/>
<input type="text" placeholder="your phone" />
<input type="email" placeholder="your phone" />
<textarea cols="50" rows="6">Write your Comment here</textarea>
<input type="submit" class="input-sub"value="SEND MESSAGE" />
</form>
</div>
</div>
</section>
2回答
-
好帮手慕久久
2021-08-26
同学你好，解答如下：
如果不给banner设置固定高度，则意思是让图片将banner的高度撑开。由于img标签底部默认存在间隙，所以导致遮罩的高度要比图片大一点：
可以将图片转成行内元素，消除间隙：
祝学习愉快！
0 -
好帮手慕久久
2021-08-24
同学你好，代码可做如下优化：
1、头部优化，请参考https://class.imooc.com/course/qadetail/301222
2、表单水平居中有误差。建议调整一下margin-left的值：
3、单行文本框、多行文本框的部分样式是一样的；建议将相同样式复用，减少代码冗余：
祝学习愉快！
0hpre class="brush:css;toolbar:false">.banner{
position: relative;
width: 100%;
/* height: 600px; */
}
.banner .banner-img{
width: 100%;
height: 600px;
}
.banner .hidden{
position: absolute;
width: 100%;
height: 600px;
top: 0;
left:0;
background-color: rgba(0, 0, 0, .6);
}在没有给.banner 设置高度是 是表示让图片内容撑开吗 而且遮罩层包裹图片的时候 .banner的高度是604px，而不是600px
h021-08-25
相似问题