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

来源:4-6 自由编程

慕仔3411021

2020-11-09 21:56:29

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/css.css">

</head>

<body>

    <div class="banner">

        <!-- 图片 -->

        <img class="banner-img" src="image/banner3.jpg">

        <!-- 遮罩层 -->

        <div class="banner-shade">

            <!-- 表单 -->

            <form class="form">

                <input type="text" class="text-input input" placeholder="your Name">

                <input type="text" class="text-input input" placeholder="your Phone">

                <input type="text" class="text-input input" placeholder="your Email">

                <textarea class="comment input" placeholder="write Your Comment Here"></textarea>

                <input type="submit" class="submit input" value="SEED MESSAGE">

            </form>

        </div>

    </div>

</body>

</html>


*{

    margin0;

    padding0;

}

.banner{

    width100%;

    height600px;

    background-colororange;

    positionrelative;

}

/* 图片 */

.banner .banner-img{

    width100%;

    height600px;

}

/* 遮罩层 */

.banner .banner-shade{

    width100%;

    height600px;

    background:rgba(0000.5);

    positionabsolute;

    top0;

    left0;

}

/* 表单 */

.banner .banner-shade .form{

    positionabsolute;

    width504px;

    height360px;

    left50%;

    margin-left-252px;

    top100px;

    text-aligncenter;

}

/* 表单所有元素共性 */

.banner .banner-shade .form .input{

    border1px solid #808080;

    color#808080;

    backgroundnone;

    margin-bottom20px;

}


.banner .banner-shade .form .input:last-child{

    margin-bottom0;

}

/* 前三个元素 */

.banner .banner-shade .form .text-input{

    width502px;

    height38px;

}

/* 文本域 */

.banner .banner-shade .form .comment{

    width502px;

    height108px;

}

/* 提交按钮 */

.banner .banner-shade .form .submit{

    width198px;

    height38px;

}



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

写回答

1回答

好帮手慕鹤

2020-11-10

同学你好,代码效果实现了哦,非常棒,继续加油!
祝学习愉快!

0

0 学习 · 15276 问题

查看课程