老师帮忙看一下代码写的对吗 谢谢啦

来源:4-6 自由编程

幕布斯0094879

2020-11-06 16:09:54

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

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

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        * {

            padding0;

            margin0;

        }


        ul,

        li {

            list-stylenone;

        }


        a {

            text-decorationnone;

        }


        .header-nav {

            height80px;

            background-color#07cbc9;

        }


        .header-nav .header-top {

            height80px;

            width1200px;

            margin0 auto;

        }


        .header-nav .logo {

            floatleft;

            line-height80px;

        }


        .header-nav .logo a {

            color#fff;

        }


        .header-nav ul {

            floatright;

        }


        .header-nav ul li {

            floatleft;

            line-height80px;


        }


        .header-nav ul li a {

            font-size16px;

            displayblock;

            color#fff;

            padding0 10px;

        }


        .header-nav ul li a:hover {

            background-colororange;

        }


        .main-banner {

            width100%;

            height600px;

        }


        .main-banner img {

            width100%;

            height600px;

        }


        .main-banner .transparent {

            width100%;

            height500px;

            backgroundrgba(0000.5);

            positionabsolute;

            top80px;

            left0;

            padding-top100px;

        }


        .main-banner .transparent form {

            width504px;

            height370px;

            positionabsolute;

            left50%;

            margin-left-252px;


        }


        .main-banner .transparent form input {

            displayblock;

            width504px;

            border1px solid #808080;

            backgroundnone;

            color#808080;

        }


        .main-banner .transparent form input:first-child,

        .main-banner .transparent form input:nth-child(2),

        .main-banner .transparent form input:nth-child(3) {

            height40px;

            margin-bottom20px;

        }


        .main-banner .transparent form input:last-child {

            width200px;

            height40px;

            margin20px auto 0;

            cursorpointer;

        }


        .main-banner .transparent form #bt {

            width504px;

            height110px;

            backgroundnone;

        }

    </style>

</head>


<body>

    <div class="header-nav">

        <div class="header-top">

            <h1 class="logo"><a href="#">Career Builder</a></h1>

            <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>

        </div>

    </div>

    <div class="main-banner">

        <img src="C:\Users\zyc\Desktop\素材/banner3.jpg" alt="">

        <div class="transparent">

            <form action="">

                <input type="text" placeholder="your name" name="username">

                <input type="text" placeholder="your phone" name="telephone">

                <input type="text" name="email" placeholder="your email">

                <textarea name="" id="bt" cols="30" rows="10" placeholder="wirte your comment here"></textarea>

                <input type="submit" value="SEND MESSAGE">

            </form>

        </div>

    </div>

</body>


</html>


写回答

1回答

好帮手慕言

2020-11-06

同学你好,有以下问题:

1、子元素的宽度溢出了父元素,如下:

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

原因:父元素的宽度为504px,子元素设置的宽度为504px,还有1px的边框,子元素的总宽度为504+2(左右边框)=506px,所以溢出了

建议:可以把父元素的宽度调整大一些,也可以把子元素的宽度调小一些,例如调小子元素的宽度:

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

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

2、为了更符合要求,建议:html可以调整一下,将form标签调整为遮罩的兄弟元素。

祝学习愉快~

1

0 学习 · 15276 问题

查看课程