老师您好,麻烦看下有什么需要改进的?

来源:4-6 自由编程

goonight

2020-11-12 15:16:31

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示


http://img.mukewang.com/climg/5face11109bf191a19650711.jpg

/* 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(0000.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(0000.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(0000.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回答

好帮手慕鹤

2020-11-12

同学你好,修改建议如下:

1、在效果中没有设置遮罩层,可以添加一个空div,设置高度(与图片宽高一致), 然后设置背景透明度,最后使用定位属性让它覆盖到图片上。

http://img.mukewang.com/climg/5face7c8094225d508520387.jpg

http://img.mukewang.com/climg/5face7fc09f54f8404330195.jpg

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

http://img.mukewang.com/climg/5face83d097bc9ef15370436.jpg

修改如下:

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

http://img.mukewang.com/climg/5face89c09f307d603890212.jpg

整体效果:

http://img.mukewang.com/climg/5face8d409acf6b019140597.jpg

3、表单代码优化:

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

http://img.mukewang.com/climg/5face99109dc2baf12960198.jpg

祝学习愉快!

1

0 学习 · 15276 问题

查看课程