Educoder html网页综合项目实战 第1关：header——头部

任务描述

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

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.float属性，2.鼠标浮动在上面的效果。

float属性

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

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

1. <ul class="head">
2. <li>首页</li>
3. <li>班级设置</li>
4. <li>师资团队</li>
5. <li>童画日记</li>
6. </ul>

效果如下：

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

1. .head li{
2. float: left;
3. }

效果如下：

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

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

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

鼠标滑过效果

基于上面的效果，这里需要实现的效果如下：

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

1. .head li:hover{
2. color: orange;
3. text-decoration: underline;
4. }