html--网页综合项目实战

妖狐艹你老母 2021-05-16 20:37 501阅读 0赞

### header——头部 ###

*  任务描述
 *  相关知识
 *   *  float属性
     *  鼠标滑过效果
     *   *  代码文件

# 任务描述 #

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

效果如下：  
![在这里插入图片描述][20210318163914186.png]

# 相关知识 #

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

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

## float属性 ##

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

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

很明显，不是我们想要的效果，想要让它们排成一排，这里就需要用到`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>

[20210318163914186.png]: /images/20210516/885d4f8ce3e949aeb81b7b23230ac3ca.png