8.1 1. 水平顶部导航栏

水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。

1. 水平顶部导航栏

 创建水平顶部导航栏的基本步骤：

1. HTML 结构：

   使用

2. CSS 样式：

   使用 CSS 控制导航栏的布局，包括设置其为水平排列、背景颜色、文字颜色和响应式设计等。

html

 功能说明：

 背景颜色：导航栏的背景设为深灰色（333），文本颜色为白色。

 水平排列：使用 flex 布局将导航项水平排列。

 悬停效果：当用户将鼠标悬停在导航链接上时，背景变为浅灰色，文字变为黑色。

  

 响应式设计：

可以为移动设备进一步优化导航栏，通过使用媒体查询（@media）调整布局，例如将导航栏项折叠成一个“汉堡菜单”。

需要更复杂功能或设计，可以结合 JavaScript 和其他 CSS 框架，如 Bootstrap，来增强用户体验。

2. 下拉子菜单导航栏

下拉子菜单导航栏是一种常见的网页导航设计，允许用户通过点击主菜单项展开子菜单。这种设计能有效节省空间并组织内容。以下是创建下拉子菜单导航栏的基本步骤：

 1.HTML 结构：

使用

2.CSS 样式：

通过 CSS 控制下拉菜单的显示与隐藏，以及布局和样式。

html

 功能说明：

 主菜单项：如“Services”点击后会显示下拉子菜单。

 下拉样式：下拉菜单默认隐藏，只有在鼠标悬停主菜单项时显示。

 样式设置：子菜单背景颜色、阴影和悬停效果为用户提供良好的交互体验。

 响应式设计：

可以使用媒体查询（@media）来调整下拉菜单在移动设备上的表现，例如将子菜单折叠或更改显示方式，以确保用户体验一致。

这种设计增强了导航的层次感，方便用户找到他们所需的信息。

8.2 2. 纵向侧边导航栏

纵向侧边导航栏（Vertical Sidebar Navigation）通常用于网页的左侧或右侧，为用户提供快速访问页面各部分的链接。它适合具有较多菜单选项或层次结构的网站。以下是创建一个纵向侧边导航栏的基本步骤：

1. HTML 和 CSS 实现纵向侧边导航栏：

html

    

    

    

    







    

    


        Home

        Services

        About

        Contact

    



    

    


        
Welcome to My Website

        
This is the main content area. The sidebar navigation stays fixed on the left, and the content is displayed here.

    

 功能说明：

 侧边栏样式：侧边栏固定在页面的左侧，宽度为 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

    

    

    

    







    

    


        Home

        About

        

        Services

        

        


            Web Design

            SEO

            Marketing

        

        Contact

    



    

    


        
Welcome to My Website

        
This is the main content area. The sidebar navigation stays fixed on the left, and the content is displayed here.

    



    

 功能说明：

 主菜单项：如“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

    

    

    

    







    

    


        
Welcome to My Website

        
This is the main content area. Scroll down to see the fixed bottom navigation bar.

        
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.

        
... (更多内容) ...

    



    

    


        Home

        Services

        About

        Contact

    

 功能说明：

 固定底部导航栏：导航栏始终固定在页面底部，随着页面内容滚动而不移动。

 Flexbox 布局：使用 Flexbox 来均匀分布导航项，确保在不同屏幕上都能保持美观。

 导航链接样式：每个链接的字体颜色为白色，悬停时颜色变化为浅灰色。

 内容区域：为内容区域留出空间，避免与底部导航栏重叠。

 响应式设计：

底部固定导航栏本身已经是响应式的，因为它充满了底部并根据屏幕宽度调整。可以根据需要添加媒体查询来调整字体大小或内边距，以确保在不同设备上的最佳显示效果。

这种设计适合内容较长的页面，用户可以快速访问网站的主要功能，而无需滚动回到顶部。

8.4 4. 综合案例 -- 优名养生馆

代码:

    
    
    
    


    

        

            

            
 优名养生馆 
        
        
        

            
            
  古人云：善养生者，上养神智、中养形态、下养筋骨。
            
  养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。
            
  养生，是养护保养生命，以达长寿。养生是指有目的的通过各种手段护养人体生命的行为，即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生，注重身体机能的维护和康复; 也包括心理层面的养生，腔调内在精神的平衡和祥和。按照层次划分，生理层面的养生包括养颜、养体、养老; 心理层面的养生包括养心、养性、养神。
        
        

        
 版权所有©优名养生馆 
    

本章习题

习题一

代码:

    
    
    
    


    

        
 山水之间 
        
    

    

        
 青山绿水，风光无限 
        
 山水之间的景色是星移斗转的活跃。诗意盎然，它勾勒出了美丽的风景，充满了自然的韵律和动感。
    

    

        
 风光欣赏 
        

            

                
                
            
            

                
                
            
            

                
                
            
            

                
                
            
        
    

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;
}

习题二

代码:

    
    
    
    


    

        

            
        
        

            
 中国名茶，品茗天下 
            
 茶之有道，品味人生……
        
    

    

    

        

            

                
            
            
 闲暇时刻，约上三五志同道合知己，去幽静茶林处，寻一景色优美之亭，泡一壶好茶，知己们吟诗作画，品品茶道，又或是下几盘好棋，又或是各抒己见，聊聊彼此的陈旧往事。无不是人生一大乐事……
            
 更多茶文化 
        
    

    

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; /* 确保页脚不会被其他元素遮盖 */
}