8.1 1.水平顶部导航栏
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
1.水平顶部导航栏
创建水平顶部导航栏的基本步骤：
1. HTML 结构：
使用 <nav> 标签包含导航栏内容，使用 <ul> 和 <li> 标签创建导航菜单项。
2. CSS 样式：
使用 CSS 控制导航栏的布局，包括设置其为水平排列、背景颜色、文字颜色和响应式设计等。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
/ 设置导航栏样式 /
nav {
background-color: 333;
overflow: hidden;
}
/ 设置导航项为水平排列 /
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
/ 设置导航项样式 /
nav ul li {
float: left;
}
/ 设置导航链接样式 /
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/ 鼠标悬停效果 /
nav ul li a:hover {
background-color: ddd;
color: black;
}
</style>
</head>
<body>
<!-- 水平导航栏 -->
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="services">Services</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</nav>
</body>
</html>功能说明：
背景颜色：导航栏的背景设为深灰色（333），文本颜色为白色。
水平排列：使用 flex 布局将导航项水平排列。
悬停效果：当用户将鼠标悬停在导航链接上时，背景变为浅灰色，文字变为黑色。
响应式设计：
可以为移动设备进一步优化导航栏，通过使用媒体查询（@media）调整布局，例如将导航栏项折叠成一个“汉堡菜单”。
需要更复杂功能或设计，可以结合 JavaScript 和其他 CSS 框架，如 Bootstrap，来增强用户体验。
2.下拉子菜单导航栏
下拉子菜单导航栏是一种常见的网页导航设计，允许用户通过点击主菜单项展开子菜单。这种设计能有效节省空间并组织内容。以下是创建下拉子菜单导航栏的基本步骤：
1.HTML 结构：
使用 <nav> 标签包含导航栏，主菜单使用 <ul> 和 <li> 标签，子菜单则嵌套在主菜单项中。
2.CSS 样式：
通过 CSS 控制下拉菜单的显示与隐藏，以及布局和样式。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Navigation Bar</title>
<style>
/ 设置导航栏样式 /
nav {
background-color: 333;
overflow: hidden;
}
/ 设置导航项为水平排列 /
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
/ 设置导航项样式 /
nav ul li {
position: relative;
}
/ 设置导航链接样式 /
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/ 鼠标悬停效果 /
nav ul li a:hover {
background-color: ddd;
color: black;
}
/ 下拉菜单样式 /
.dropdown-content {
display: none;
position: absolute;
background-color: f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/ 下拉菜单项样式 /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/ 悬停下拉菜单项效果 /
.dropdown-content a:hover {
background-color: f1f1f1;
}
/ 显示下拉菜单 /
nav ul li:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<!-- 下拉子菜单导航栏 -->
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="services">Services</a>
<div class="dropdown-content">
<a href="webdesign">Web Design</a>
<a href="seo">SEO</a>
<a href="marketing">Marketing</a>
</div>
</li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</nav>
</body>
</html>功能说明：
主菜单项：如“Services”点击后会显示下拉子菜单。
下拉样式：下拉菜单默认隐藏，只有在鼠标悬停主菜单项时显示。
样式设置：子菜单背景颜色、阴影和悬停效果为用户提供良好的交互体验。
响应式设计：
可以使用媒体查询（@media）来调整下拉菜单在移动设备上的表现，例如将子菜单折叠或更改显示方式，以确保用户体验一致。
这种设计增强了导航的层次感，方便用户找到他们所需的信息。
8.2 2.纵向侧边导航栏
纵向侧边导航栏（Vertical Sidebar Navigation）通常用于网页的左侧或右侧，为用户提供快速访问页面各部分的链接。它适合具有较多菜单选项或层次结构的网站。以下是创建一个纵向侧边导航栏的基本步骤：
1. HTML 和 CSS 实现纵向侧边导航栏：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Sidebar Navigation</title>
<style>
/ 设置侧边导航栏的基本样式 /
.sidebar {
height: 100%; / 让导航栏占据整个页面高度 /
width: 250px; / 侧边栏宽度 /
position: fixed; / 固定在页面左侧 /
top: 0;
left: 0;
background-color: 333; / 背景颜色 /
padding-top: 20px; / 上部留出间距 /
}
/ 设置导航链接的样式 /
.sidebar a {
padding: 15px 25px;
text-decoration: none;
font-size: 18px;
color: white;
display: block; / 每个链接独占一行 /
}
/ 鼠标悬停时的效果 /
.sidebar a:hover {
background-color: 575757;
}
/ 页面内容区样式 /
.content {
margin-left: 260px; / 为内容区留出侧边栏宽度 /
padding: 20px;
}
</style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
<a href="home">Home</a>
<a href="services">Services</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</div>
<!-- 页面主要内容 -->
<div class="content">
<h2>Welcome to My Website</h2>
<p>This is the main content area. The sidebar navigation stays fixed on the left, and the content is displayed here.</p>
</div>
</body>
</html>功能说明：
侧边栏样式：侧边栏固定在页面的左侧，宽度为250px，始终占据整个页面高度。
导航链接样式：导航链接的字体大小为18px，颜色为白色，悬停时背景颜色变化为浅灰色。
内容区：页面内容区域从侧边栏宽度后开始显示，保持侧边栏的固定状态，同时页面内容可以自由滚动。
响应式设计：
为确保在移动设备上具有良好显示效果，可以使用媒体查询进行优化。例如，当屏幕宽度较小（如小于600px）时，可以将侧边栏折叠成一个隐藏的菜单按钮。
css
@media screen and (max-width: 600px) {
.sidebar {
width: 100px;
}
.sidebar a {
text-align: center;
padding: 10px;
font-size: 16px;
}
.content {
margin-left: 110px;
}
}这种布局在内容多的情况下，帮助用户快速访问各部分，保持导航简洁而不打扰主要内容。
2.出式子菜单导航栏
“出式子菜单导航栏”应该指的是带有子菜单的侧边导航栏，子菜单在用户点击或悬停主菜单项时“展开”（即“出式”）显示。这样设计的导航栏可以更紧凑，并提供层次化导航。
下面是如何创建一个带有“出式子菜单”的纵向侧边导航栏：
HTML 和 CSS 实现带有展开子菜单的侧边导航栏：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Sidebar Navigation</title>
<style>
/ 设置侧边导航栏的基本样式 /
.sidebar {
height: 100%; / 让导航栏占据整个页面高度 /
width: 250px; / 侧边栏宽度 /
position: fixed; / 固定在页面左侧 /
top: 0;
left: 0;
background-color: 333; / 背景颜色 /
padding-top: 20px; / 上部留出间距 /
}
/ 设置导航链接的样式 /
.sidebar a {
padding: 15px 25px;
text-decoration: none;
font-size: 18px;
color: white;
display: block; / 每个链接独占一行 /
}
/ 鼠标悬停时的效果 /
.sidebar a:hover {
background-color: 575757;
}
/ 子菜单的样式 /
.dropdown-container {
display: none; / 初始隐藏子菜单 /
background-color: 414141;
padding-left: 15px;
}
/ 子菜单的链接样式 /
.dropdown-container a {
padding: 10px 15px;
font-size: 16px;
}
/ 主菜单项点击时展开子菜单 /
.sidebar .dropdown-btn.active + .dropdown-container {
display: block; / 展示子菜单 /
}
/ 页面内容区样式 /
.content {
margin-left: 260px; / 为内容区留出侧边栏宽度 /
padding: 20px;
}
</style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
<a href="home">Home</a>
<a href="about">About</a>
<!-- 有子菜单的导航项 -->
<a href="javascript:void(0)" class="dropdown-btn">Services</a>
<!-- 子菜单项 -->
<div class="dropdown-container">
<a href="webdesign">Web Design</a>
<a href="seo">SEO</a>
<a href="marketing">Marketing</a>
</div>
<a href="contact">Contact</a>
</div>
<!-- 页面主要内容 -->
<div class="content">
<h2>Welcome to My Website</h2>
<p>This is the main content area. The sidebar navigation stays fixed on the left, and the content is displayed here.</p>
</div>
<script>
// 获取所有的带有 dropdown-btn 类的元素
var dropdown = document.getElementsByClassName("dropdown-btn");
// 为每个 dropdown-btn 设置点击事件
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active"); // 切换 active 类
var dropdownContent = this.nextElementSibling; // 获取下一个兄弟元素（即 .dropdown-container）
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none"; // 如果已经显示，则隐藏
} else {
dropdownContent.style.display = "block"; // 如果隐藏，则显示
}
});
}
</script>
</body>
</html>功能说明：
主菜单项：如“Services”是一个可以点击的主菜单项，当点击时会展开子菜单。
子菜单项：包括“Web Design”、“SEO”和“Marketing”等链接，初始状态下隐藏，点击主菜单项时显示。
展开/收起效果：通过 JavaScript 实现点击主菜单项时展开或收起子菜单。
响应式交互：悬停时主菜单项颜色变化，点击时展开子菜单。
如何工作：
1. 主菜单项“Services”：点击后会切换 .active 类，从而使对应的子菜单容器 dropdown-container 从 display: none 变为 display: block，实现展开效果。
2. JavaScript：用于监听用户点击并切换菜单的显示状态。
响应式设计：
你可以为移动设备添加媒体查询，使侧边栏更适合小屏幕显示。例如，可以将侧边栏转换为一个可折叠的按钮，或者通过滑动手势显示和隐藏。
这种设计适合内容结构复杂、层级较多的网站，用户可以通过展开/收起功能方便地浏览各个部分。
8.3 3.底部固定导航栏
底部固定导航栏（Fixed Bottom Navigation Bar）是一种常见的网页设计，通常用于移动设备和单页应用中，提供用户快速访问主要功能的链接。下面是如何创建一个底部固定导航栏的示例：
1.HTML 和 CSS 实现底部固定导航栏：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Bottom Navigation Bar</title>
<style>
/ 设置页面基本样式 /
body {
margin: 0;
font-family: Arial, sans-serif;
}
/ 页面内容样式 /
.content {
padding: 20px;
margin-bottom: 60px; / 留出空间给底部导航栏 /
}
/ 设置底部导航栏样式 /
.bottom-nav {
position: fixed; / 固定在页面底部 /
bottom: 0;
left: 0;
width: 100%; / 充满整个底部 /
background-color: 333; / 背景颜色 /
display: flex; / 使用 Flexbox 布局 /
justify-content: space-around; / 平均分布导航项 /
padding: 10px 0; / 内边距 /
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); / 阴影效果 /
}
/ 设置导航链接样式 /
.bottom-nav a {
color: white;
text-decoration: none;
font-size: 18px;
text-align: center; / 文字居中 /
}
/ 鼠标悬停时的效果 /
.bottom-nav a:hover {
color: ddd; / 悬停时颜色变化 /
}
</style>
</head>
<body>
<!-- 页面主要内容 -->
<div class="content">
<h2>Welcome to My Website</h2>
<p>This is the main content area. Scroll down to see the fixed bottom navigation bar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod, nisi vel consectetur interdum, nisl nisi tincidunt eros, a fermentum risus erat a augue. Morbi eget lorem nec eros dapibus vestibulum.</p>
<p>... (更多内容) ...</p>
</div>
<!-- 底部导航栏 -->
<div class="bottom-nav">
<a href="home">Home</a>
<a href="services">Services</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</div>
</body>
</html>功能说明：
固定底部导航栏：导航栏始终固定在页面底部，随着页面内容滚动而不移动。
Flexbox 布局：使用 Flexbox 来均匀分布导航项，确保在不同屏幕上都能保持美观。
导航链接样式：每个链接的字体颜色为白色，悬停时颜色变化为浅灰色。
内容区域：为内容区域留出空间，避免与底部导航栏重叠。
响应式设计：
底部固定导航栏本身已经是响应式的，因为它充满了底部并根据屏幕宽度调整。可以根据需要添加媒体查询来调整字体大小或内边距，以确保在不同设备上的最佳显示效果。
这种设计适合内容较长的页面，用户可以快速访问网站的主要功能，而无需滚动回到顶部。
8.4 4.综合案例--优名养生馆
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优名养生馆</title>
<style>
body {
background-image: url(4465CAF7A217F1A5103C23623BE7CD18.jpg);
}
.all {
margin: 0px auto;
width: 900px;
}
.top {
width: 900px;
height: 225px;
background-image: url(1379A3325F11B18B8968EA0C096048F0.jpg);
}
.cent {
width: 320px;
margin-left: auto;
margin-right: auto;
font-size: 58px;
font-family: "楷体";
color: lemonchiffon;
font-style: italic;
}
.nav {
width: 200px;
float: left;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
color: saddlebrown;
}
.main {
width: 700px;
height: 300px;
float: left;
margin-top: 10px;
}
.footer {
font-size: 14px;
font-weight: bold;
color: brown;
text-align: center;
clear: both;
background-image: url(1379A3325F11B18B8968EA0C096048F0.jpg);
}
p {
color: brown;
font-size: 16px;
}
img {
margin: 15px;
}
ul {
list-style-type: none;
}
li {
height: 22px;
}
a:link {
font-size: 16px;
text-decoration: none;
color: brown;
}
a:hover {
background-color: burlywood;
color: white;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<br>
<div class="cent">优名养生馆</div>
</div>
<nav>
<div class="nav">
<table>
<tr>养生之道</tr>
<tr>
<ul>
<li><a href="#">运动养生</a></li>
<li><a href="#">四季养生</a></li>
<li><a href="#">健康检测</a></li>
</ul>
</tr>
<tr>中医养生</tr>
<tr>
<ul>
<li><a href="#">经络养生</a></li>
<li><a href="#">体质养生</a></li>
<li><a href="#">特色疗法</a></li>
</ul>
</tr>
</table>
</div>
</nav>
<div class="main">
<img src="1.png" align="left" />
<p>  古人云：善养生者，上养神智、中养形态、下养筋骨。</p>
<p>  养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p>
<p>  养生，是养护保养生命，以达长寿。养生是指有目的的通过各种手段护养人体生命的行为，即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生，注重身体机能的维护和康复;也包括心理层面的养生，腔调内在精神的平衡和祥和。按照层次划分，生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p>
</div>
<hr />
<div class="footer">版权所有©优名养生馆</div>
</div>
</body>
</html>
本章习题
习题一
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山水之间</title>
<link rel="stylesheet" href="8.2.css">
</head>
<body>
<header>
<h1>山水之间</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">诗文</a></li>
<li><a href="#">风景</a></li>
<li><a href="#">游记</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<section class="introduction">
<h2>青山绿水，风光无限</h2>
<p>山水之间的景色是星移斗转的活跃。诗意盎然，它勾勒出了美丽的风景，充满了自然的韵律和动感。</p>
</section>
<section class="gallery">
<h2>风光欣赏</h2>
<div class="landscape">
<figure>
<img src="1.png" alt="松树">
<figcaption>松树：它屹立如松迎风傲立，青翠欲滴。</figcaption>
</figure>
<figure>
<img src="1.png" alt="瀑布">
<figcaption>瀑布：流云飞涌，群山连绵，瀑布如帘，气势磅礴。</figcaption>
</figure>
<figure>
<img src="1.png" alt="青山">
<figcaption>青山：远山的轮廓清晰，青翠欲滴，层峦叠嶂。</figcaption>
</figure>
<figure>
<img src="1.png" alt="泛舟">
<figcaption>泛舟：泛舟一日游，感受大自然的宁静与和谐。</figcaption>
</figure>
</div>
</section>
</body>
</html>
css代码:
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #778899;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.introduction {
background-color: #e6e6fa;
padding: 20px;
text-align: center;
}
.gallery {
padding: 20px;
}
.gallery h2 {
text-align: center;
}
.landscape {
display: flex;
justify-content: space-around;
}
figure {
text-align: center;
margin: 0 20px;
}
figure img {
width: 150px;
height: 100px;
border: 2px solid #ddd;
padding: 5px;
}
figcaption {
margin-top: 10px;
font-size: 14px;
color: #555;
}
习题二
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>茶韵 - 中国名茶</title>
<link rel="stylesheet" href="8.3.css">
</head>
<body>
<header>
<div class="logo">
<img src="1379A3325F11B18B8968EA0C096048F0.jpg" alt="茶壶图像">
</div>
<div class="title">
<h1>中国名茶，品茗天下</h1>
<p>茶之有道，品味人生……</p>
</div>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">乌龙茶系品</a></li>
<li><a href="#">普洱茶</a></li>
<li><a href="#">高山绿茶</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<main>
<section class="article">
<div class="right">
<img src="1379A3325F11B18B8968EA0C096048F0.jpg" alt="茶壶图像">
</div>
<p>闲暇时刻，约上三五志同道合知己，去幽静茶林处，寻一景色优美之亭，泡一壶好茶，知己们吟诗作画，品品茶道，又或是下几盘好棋，又或是各抒己见，聊聊彼此的陈旧往事。无不是人生一大乐事……</p>
<p align="right"><a href="#" >更多茶文化</a></p>
</section>
</main>
<footer>
<p>版权所有 © 2024 茶韵. 更多茶文化内容请参考链接。</p>
</footer>
</body>
</html>
css代码:
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
/* Body and Layout */
body {
background-color: #f8f5f0;
color: #333;
background-image: url(4465CAF7A217F1A5103C23623BE7CD18.jpg);
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
padding: 20px;
border-bottom: 2px solid #ccc;
}
.logo img {
width: 100px;
height: auto;
margin-right: 20px;
}
.right img {
width: 100px;
height: auto;
margin-right: 20px;
float: right;
}
.title h1 {
font-size: 2em;
color: #4a4a4a;
}
.title p {
font-size: 1.2em;
color: #666;
margin-top: 5px;
}
nav {
background-color: #ddd;
padding: 10px;
text-align: left; /* 对齐方式调整为左对齐 */
margin-top: 10px;
width: 200px; /* 设置导航栏的宽度 */
height: 100vh; /* 让导航栏占据整个页面的高度 */
position: fixed; /* 固定导航栏位置 */
right: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
margin: 15px 0; /* 设置垂直间距 */
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 1.1em;
display: block; /* 让链接占据整个列表项的宽度 */
padding: 10px;
}
nav ul li a:hover {
color: #8B4513;
background-color: #f0f0f0; /* 添加鼠标悬停时的背景色变化 */
}
/* Main Content */
main {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
min-height: calc(100vh - 60px); /* 视口高度减去页脚或其他固定元素的高度 */
}
.article p {
font-size: 1.2em;
line-height: 1.8;
color: #444;
}
/* Footer */
footer {
text-align: center;
padding: 10px;
background-color: #f1f1f1;
font-size: 0.9em;
color: #888;
position: fixed; /* 固定位置 */
bottom: 0; /* 让页脚位于页面底部 */
width: 100%; /* 让页脚占据整个页面的宽度 */
z-index: 100; /* 确保页脚不会被其他元素遮盖 */
}
