要求：完成网页头部导航栏，运行结果如下：
解题思路：
1.创建HTML文件，运用img标签导入logo，用h1标签输出标题
2.运用ul标签和li标签输出列表及子列表
3.运用外链式CSS对HTML文件进行修饰
源代码：HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页导航栏</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- 网站头部 -->
<header id="header">
<div class="container">
<!-- Logo和标题 -->
<div class="logo-title">
<img src="../网页制作/img/logo.jpg" alt="智慧包裹分拣系统Logo" class="logo">
<h1>智慧包裹分拣系统</h1>
</div>
<!-- 导航栏 -->
<div class="divbar">
<ul class="div-menu">
<li><a href=" ">首页</a></li>
<li class="dropdown">
<a href="javascript:void(0)">分拣系统</a>
<ul class="dropdown-content">
<li><a href=" ">自动分拣技术</a></li>
<li><a href=" ">智能识别系统</a></li>
<li><a href=" ">路径优化算法</a></li>
</ul>
</li>
<li><a href=" ">关于我们</a></li>
<li><a href=" ">登录</a></li>
<li><a href=" ">注册</a></li>
<li><a href=" ">后台管理</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
源代码：CSS文件
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1200px;
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
#header {
background-color: #0a2536;
color: white;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.logo-title {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.logo {
width: 60px;
height: 60px;
margin-right: 15px;
border-radius: 5px;
}
#header h1 {
font-size: 1.8rem;
color: #fff;
}
/* 导航栏样式 */
.divbar {
background-color: #1a3a4f;
border-radius: 5px;
padding: 10px;
}
.div-menu {
display: flex;
list-style: none;
justify-content: space-between;
}
.div-menu li {
position: relative;
}
.div-menu a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: background-color 0.3s;
border-radius: 3px;
}
.div-menu a:hover {
background-color: #2a5a7f;
}
/* 下拉菜单 */
.dropdown-content {
display: none;
position: absolute;
background-color: #1a3a4f;
min-width: 180px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 5px;
top: 100%;
left: 0;
list-style: none;
}
.dropdown-content li {
width: 100%;
}
.dropdown-content a {
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
animation: fadeIn 0.3s;
}
运行结果：
实验到此结束！！！