老师您好,麻烦看下有什么需要改进的?
来源:4-6 自由编程
goonight
2020-11-12 15:16:31
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择【代码语言】突出显示
/* banner区 */
.banner{
position: relative;
width: 100%;
height: 600px;
/*background-color: orange;*/
}
.banner img {
width: 100%;
height: 600px;
}
.banner ul {
position: absolute;
top: 100px;
left: 50%;
margin-left: -14%;
}
.banner ul li {
margin-bottom: 20px;
}
.banner ul li input{
display: block;
margin: 0 auto;
width: 504px;
height: 40px;
color: #808080;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
/* 去掉鼠标点击时的蓝色边框 */
outline: none;
}
.banner ul li textarea {
display: block;
margin: 0 auto;
width: 504px;
height: 100px;
color: #808080;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
/* 去掉鼠标点击时的蓝色边框 */
outline: none;
}
.banner ul li button {
display: block;
width: 200px;
height: 40px;
margin: 0 auto;
color: #808080;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #808080;
/* 设置触碰时候的鼠标指针的样式 */
cursor: pointer;
/* 去掉鼠标点击时的蓝色边框 */
outline: none;
}
<!-- banner -->
<div class="banner">
<img src="images/banner3.jpg" alt="">
<ul>
<li><input type="text" placeholder="your Name"></li>
<li><input type="text" placeholder="your Phone"></li>
<li><input type="text" placeholder="your Email"></li>
<li><textarea name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea></li>
<li><button>SEND MESSAGE</button></li>
</ul>
1回答
同学你好,修改建议如下:
1、在效果中没有设置遮罩层,可以添加一个空div,设置高度(与图片宽高一致), 然后设置背景透明度,最后使用定位属性让它覆盖到图片上。


2、表单整体没有实现水平居中的方式,如下:

修改如下:
设置margin-left:负宽度的一半;表单整体的宽度是508px,那么负宽度的一半就是-254px;

整体效果:

3、表单代码优化:
标签元素建议使用form标签包裹,这样代码会更规范,参考下图:

祝学习愉快!
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1