请老师检查,谢谢!

来源:2-2 编程练习

Cloud_轩

2020-11-25 16:11:31

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

<--结构部分-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>IMOOC</title>

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

</head>

<body>

<header>

    <div class="container">

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

        <nav>

            <a class="Home active" href="index.heml">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="Notes" href="#">Notes</a>

        </nav>

    </div>

</header>

</body>

</html>


<--结构部分-->

* {

    margin: 0;

    padding: 0;

    border: none;

    font-family: Arial;

}

a{

    text-decoration: none;

    color: #fff;

}

header{

    height: 80px;

    background: black;

}

header > .container{

    width: 1200px;

    margin: 0 auto;

}

header > .container > a{

    display: block;

    float: left;

    font-size: 32px;

    margin: 20px 50px;

}

header > .container > a > img{ margin-right: 10px;} 

header > .container > nav{

    float: right;

    margin-right: 50px;

}

header > .container > nav > a{

    display: block;

    width: 100px;

    height: 75px;

    float: left;

    line-height: 75px;

    text-align: center;

}

header > .container > nav > .Home{background: #ff0033;}

header > .container > nav > .Course{background: #ffcc33;}

header > .container > nav > .Actual{background: #00ff00;}

header > .container > nav > .Plan{background: #3333cc;}

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

header > .container > nav > .Notes{background: #0099ff;}

header > .container > nav > a:hover,

header > .container > nav > .active{padding-bottom: 5px;}


写回答

1回答

好帮手慕鹤

2020-11-25

同学你好,效果中有两点优化建议:

(1)因为container容器里的子元素设置了浮动,建议给container容器设置overflow:hidden,清除浮动。

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

(2)如下图所示:主体内容有底部边距

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

这是因为logo设置了上下边距样式,建议只设置margin-top来实现logo图垂直居中的效果,参考下图:

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

修改之后的效果:

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

祝学习愉快!

0

0 学习 · 40143 问题

查看课程