老师,麻烦你帮我看看

来源:2-2 编程练习

陈孝芳

2019-10-25 13:32:13

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>IMOOC</title>

<style type="text/css">

    *{

    padding:0;

    margin:0;

    border:none;

    font-family:Arial;

    font-size:14px;

    color:#fff;

}

a{

    text-decoration:none;

}

header{

    height:80px;

   background:black;

}

header > .container{

    width:1200px;

    margin:0 auto;

}

header > .container > a{

    display:block;

    float:left;

    margin:20px 20px;

}

header > .container > nav{

    float:right;

}


header > .container > nav a{

    display:block;

    float:left;

    height:73px;

    width:110px;

    line-height:73px;

    text-align:center;

}

header > .container > nav > a.Home{background:#433b90;}

header > .container > nav > a.Course{background:#017fcb;}

header > .container > nav > a.Actual{background:#78b917;}

header > .container > nav > a.Plan{background:#feb800;}

header > .container > nav > a.FAQ{background:#f27c01;}

header > .container > nav > a.Notes{background:#d40112;}

header > .container > nav > a:hover,

header > .container > nav > a.active{

padding-bottom:7px;

</style>

</head>

<body>

<!--  在此完成网页的HTML代码-->

<header>

    <div class="container">

        <a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"/>MYMOOC</a>

        <nav>

            <a class="Home active" href="#">Home</a>

            <a class="Course" href="#">Course</a>

            <a class="Actual" href="#">Actual</a>

            <a class="Plan" href="#">Plan</a>

            <a class="FAQ" href="#">FAQ</a>

            <a class="Notex" href="#">Notes</a>

        </nav>

    </div>

</header>

</body>

</html>


</body>

</html>


写回答

1回答

好帮手慕言

2019-10-25

同学你好,测试同学提供的代码,有以下问题哦。

1、代码中少了一个花括号。

正确书写为下:
http://img.mukewang.com/climg/5db28f530996962c05040152.jpg

2、导航项的最后一个没有样式。如下图:

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

原因是类名书写的有问题。

建议:html和css中的类名要一致。

代码参考:
http://img.mukewang.com/climg/5db2910d09f755d106250108.jpg

祝学习愉快~

0

0 学习 · 40143 问题

查看课程