任务描述

本关任务：实现静态页面的头部——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>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_45823118/article/details/114983760
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2023-01-03 22:07:58
阅读 ( 225 )
分类：前端

html--网页综合项目实战

header——头部

任务描述

相关知识

float属性

鼠标滑过效果

代码文件

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看