任务描述

本关任务：实现静态页面的头部——header。

效果如下：
在这里插入图片描述

相关知识

为了完成本关任务，你需要掌握：

float属性，
鼠标浮动在上面的效果。

float属性

这里需要实现的效果如下：

下面是基本的html结构，去除了ul,li的默认样式：

<ul class="head">
    <li>首页</li>
    <li>班级设置</li>
    <li>师资团队</li>
    <li>童画日记</li>
</ul>

很明显，不是我们想要的效果，想要让它们排成一排，这里就需要用到float属性。 float 属性定义元素在哪个方向浮动，我们这里用到的是左边，添加代码如下：

.head li{
  float: left;
}

现在离成功已经不远了，没实现的是上下垂直居中和每个li标签之间左右间距，添加代码如下：

.head li{
    float: left;
    padding: 0 20px;    /*左右间距*/
    line-height:70px;   /*上下垂直居中，70px是父元素的高度*/

然后就能实现上面的效果了。

鼠标滑过效果

就是鼠标滑过时的效果。这里用css的hover选择器，hover选择器在鼠标滑过该元素时添加的特殊样式。添加的代码如下：

.head li:hover{
    color: orange;
    text-decoration: underline;
}

注：平台有HTML，CSS语法检测，一定要注意代码的规范书写。

比如：<div></div>一定要闭合，width: 200px;一定要有分号，冒号；

代码文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>少儿教育</title>
        <style type="text/css"> * { margin: 0; padding: 0; } ul,li{ list-style: none; } a{ color: #888888; text-decoration: none; font-size: 16px; } body { background: #fff; position: relative; } #top{ width: 80%; margin: 0 auto; } .bg-header { border-bottom: 1px solid #eee; } /********* Begin **********/ #top .logo { width: 120px; height: 50px; margin-top: 11px; /*向左浮动*/ float:left; } #top .head-list { /*向右浮动*/ float:right; } #top .head-list li { padding: 0 20px; /*垂直居中，高度为74px*/ line-height:74px; /*向左浮动*/ float:left; } /********* End *********/ #top .head-list li a:hover { color: #333; text-decoration: underline; } </style>
    </head>
    <body>
        <header class="bg-top">
            <div id="top" class="clearfix">
                <img src="https://www.educoder.net/api/attachments/196816" alt="logo" class="logo" />
                <ul class="head-list">
                    <li>
                        <a href="javascript:void;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:void;">班级设置</a>
                    </li>
                    <li>
                        <a href="javascript:void;">师资团队</a>
                    </li>
                    <li>
                        <a href="javascript:void;">童画日记</a>
                    </li>
                    <li>
                        <a href="javascript:void;">关于我们</a>
                    </li>
                    <li>
                        <a href="javascript:void;">联系我们</a>
                    </li>
                </ul>
            </div>
        </header>
    </body>
</html>