ToB企服应用市场:ToB评测及商务社交产业平台

标题: 第八章 使用CSS制作导航菜单 [打印本页]
作者: 张国伟    时间: 2024-11-23 20:07
标题: 第八章 使用CSS制作导航菜单
8.1 程度顶部导航栏

8.1.1 简单程度导航栏的设计与实现


8.1.1.1导航栏的创建

<nav>标签是HIML5新增的文档结构标签，用于标志导航栏，以便后续与网站的其他内容整合，以是常用<nav>标签在页面上创建导航栏菜单区域
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                 <centter>
  9.                         <h3>简单水平菜单导航栏</h3>
  10.                 </centter>
  11.                 <hr>
  12.                 <nav>
  13.                         <ul>
  14.                                 <li>前端</li>
  15.                                 <li>后台</li>
  16.                                 <li>移动应用</li>
  17.                                 <li>数据库</li>
  18.                                 <li>操作系统</li>
  19.                                 <li>服务器</li>
  20.                         </ul>
  21.                 </nav>       
  22.         </body>
  23. </html>
复制代码

8.1.1.2 列表样式的设计


此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标志，可以使用CSS在
2.列表样式的设计
<head>标签中进行声明，对列表样式进行改变。例如，使用 list-style-type 属性去掉默认标志。为了预防差别的浏览器会出现预设值,设置 margin 和 padding属性为0，制止终极布局结果可能产生的偏差;为了使列表元素能够在同一行显示，为<li>ll列表选项定义浮动结果
  1.                 <style type="text/css">
  2.                         ul{
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                                 list-style-type: none;
  6.                         }
  7.                         li{
  8.                                 float: left;
  9.                         }               
  10.                 </style>
复制代码

8.1.1.3 超链接样式的设计

使用CSS为超链接重新设置样式，例如，对超链接的a：link和a：visited进行设置，表现超链接未被访问和已访问状态。然后将其display 属性设置为block，使得超链接成为块级元素，如许才可以为超链接设置80像素的宽度
  1.                 <style type="text/css">
  2.                         ul{
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                                 list-style-type: none;
  6.                         }
  7.                         li{
  8.                                 float: left;
  9.                         }
  10.                         a{
  11.                                 display: block;
  12.                                 width: 80px;
  13.                                 text-align: center;
  14.                                 padding: 10px;
  15.                         }
  16.                 </style>
复制代码

8.1.1.4 鼠标变乱

使用CSS为a:hover 和a:active 进行样式设置，表现鼠标悬停和活动链接状态时的样式变革。
  1.                 <style type="text/css">
  2.                         ul{
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                                 list-style-type: none;
  6.                         }
  7.                         li{
  8.                                 float: left;
  9.                         }
  10.                         a{
  11.                                 display: block;
  12.                                 width: 80px;                       
  13.                                 padding: 10px;
  14.                                 text-align: center;
  15.                                 text-decoration: none;
  16.                         }
  17.                         a:link,a:visited{
  18.                                 background-color: #ff0000;
  19.                                 color: #ffffff;
  20.                         }
  21.                         a:hover,a:active{
  22.                                 background-color: #ffffff;
  23.                                 color: #ff0000;
  24.                         }
  25.                 </style>
复制代码

8.1.2 下拉子菜单导航栏的设计与实现

下拉子菜单导航是网站设计中常见的子导航设计，
一般适用于多级别、内容庞杂的网站。这种导航模式可以让整个网站设计更加整洁有序，现下大热的汉堡包导航也是接纳这种隐藏式的导航设计。
8.1.2.1导航栏的创建

仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，联合无序列表<>和有序列表<ol>标签，共同列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>下拉子导航栏的制作</title>
  6.                 <style type="text/css">
  8.                 </style>
  9.         </head>
  10.         <body>
  11.                 <center>
  12.                         <h3>下拉子菜单导航栏</h3>
  13.                 </center>
  14.                 <hr>
  15.                 <nav>
  16.                         <div id="nav">
  17.                                 <ul>
  18.                                         <li><a href="#">前端</a>
  19.                                                 <ol>
  20.                                                         <li><a href="#">HTML5</a></li>
  21.                                                         <li><a href="#">CSS</a></li>
  22.                                                         <li><a href="#">Javascript</a></li>
  23.                                                 </ol>
  24.                                         </li>
  25.                                         <li><a href="#">后台</a>
  26.                                                 <ol>
  27.                                                         <li><a href="#">Java</a></li>
  28.                                                         <li><a href="#">PHP</a></li>
  29.                                                         <li><a href="#">Python</a></li>
  30.                                                 </ol>
  31.                                         </li>
  32.                                         <li><a href="#">移动应用</a>
  33.                                                 <ol>
  34.                                                         <li><a href="#">Android</a></li>
  35.                                                         <li><a href="#">IOS</a></li>
  36.                                                 </ol>
  37.                                         </li>
  38.                                         <li><a href="#">数据库</a>
  39.                                                 <ol>
  40.                                                         <li><a href="#">MySql</a></li>
  41.                                                         <li><a href="#">SqlServer</a></li>
  42.                                                 </ol>
  43.                                         </li>
  44.                                         <li><a href="#">操作系统</a>
  45.                                                 <ol>
  46.                                                         <li><a href="#">Linux</a></li>
  47.                                                         <li><a href="#">Unix</a></li>
  48.                                                         <li><a href="#">Windows</a></li>
  49.                                                 </ol>
  50.                                         </li>
  51.                                         <li><a href="#">服务器</a>
  52.                                                 <ol>
  53.                                                         <li><a href="#">Tomcat</a></li>
  54.                                                         <li><a href="#">WebSphere</a></li>
  55.                                                         <li><a href="#">WebLogicc</a></li>
  56.                                                 </ol>
  57.                                         </li>
  58.                                 </ul>
  59.                         </div>
  60.                 </nav>
  61.         </body>
  62. </html>
复制代码

8.1.2.2 列表样式的设计

戴时会带有<ul>元素的实心点标志，及<ol>元素的阿拉伯序号，可以使用CSS在<head>标签中进行声明，对列表样式进行改变。
同样，使用 list-style-type 属性去掉默认标志，设置margin 和 padding属性为0，为<li>列表选项定义浮动结果，设置text-decoration属性none。这里使用通配符“*”团体设置
  1. <!--示例程序8.2-->
  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8" />
  6.                 <title>下拉子导航栏的制作</title>
  7.                 <style type="text/css">
  8.                         ul,ol{
  9.                                 list-style-type: none;
  10.                                 padding: 0;
  11.                                 margin: 0;
  12.                         }
  13.                         ul,li{
  14.                                 float: left;
  15.                         }
  16.                         ul li ol li{
  17.                                 float: none;
  18.                         }
  19.                 </style>
  20.         </head>
  21.         <body>
  22.                 <center>
  23.                         <h3>下拉子菜单导航栏</h3>
  24.                 </center>
  25.                 <hr>
  26.                 <nav>
  27.                         <div id="nav">
  28.                                 <ul>
  29.                                         <li>前端
  30.                                                 <ol>
  31.                                                         <li>HTML5</li>
  32.                                                         <li>CSS</li>
  33.                                                         <li>Javascript</li>
  34.                                                 </ol>
  35.                                         </li>
  36.                                         <li>后台
  37.                                                 <ol>
  38.                                                         <li>Java</li>
  39.                                                         <li>PHP</li>
  40.                                                         <li>Python</li>
  41.                                                 </ol>
  42.                                         </li>
  43.                                         <li>移动应用
  44.                                                 <ol>
  45.                                                         <li>Android</li>
  46.                                                         <li>IOS</li>
  47.                                                 </ol>
  48.                                         </li>
  49.                                         <li>数据库
  50.                                                 <ol>
  51.                                                         <li>MySql</li>
  52.                                                         <li>SqlServer</li>
  53.                                                 </ol>
  54.                                         </li>
  55.                                         <li>操作系统
  56.                                                 <ol>
  57.                                                         <li>Linux</li>
  58.                                                         <li>Unix</li>
  59.                                                         <li>Windows</li>
  60.                                                 </ol>
  61.                                         </li>
  62.                                         <li>服务器
  63.                                                 <ol>
  64.                                                         <li>Tomcat</li>
  65.                                                         <li>WebSphere</li>
  66.                                                         <li>WebLogicc</li>
  67.                                                 </ol>
  68.                                         </li>
  69.                                 </ul>
  70.                         </div>
  71.                 </nav>
  72.         </body>
  73. </html>
复制代码

8.1.2.3 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来，需要设置display属性位none。
为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的 display属性为
block。
为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜
单的相对定位
  1.                 <style type="text/css">
  2.                         ul,ol{
  3.                                 list-style-type: none;
  4.                                 padding: 0;
  5.                                 margin: 0;
  6.                         }
  7.                         ul,li{
  8.                                 float: left;
  9.                         }
  10.                         ul li ol li{
  11.                                 float: none;
  12.                         }
  13.                         ul li ol{
  14.                                 display: none;
  15.                         }
  16.                         ul li:hover ol{
  17.                                 display: block;
  18.                         }
  19.                 </style>
复制代码

8.1.2.4 DIV样式的设计

可以对内容所处的div样式进行设置，包括宽度、高度、边框和对齐方式。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>下拉子导航栏的制作</title>
  6.                 <style type="text/css">
  7.                         ul,ol{
  8.                                 list-style-type: none;
  9.                                 padding: 0;
  10.                                 margin: 0;
  11.                         }
  12.                         ul li{
  13.                                 float: left;
  14.                         }
  15.                         ul li ol li{
  16.                                 float: none;
  17.                         }
  18.                         ul li ol{
  19.                                 display: none;
  20.                         }
  21.                         ul li:hover ol{
  22.                                 display: block;
  23.                         }
  24.                         /*DIV的设计*/
  25.                         a{
  26.                                 text-decoration: none;
  27.                                 text-align: center;
  28.                                 display: block;
  29.                                 width: 80px;
  30.                                 padding: 10px;
  31.                         }
  32.                 </style>
  33.         </head>
  34.         <body>
  35.                 <center>
  36.                         <h3>下拉子菜单导航栏</h3>
  37.                 </center>
  38.                 <hr>
  39.                 <nav>
  40.                         <div id="nav">
  41.                                 <ul>
  42.                                         <li><a href="#">前端</a>
  43.                                                 <ol>
  44.                                                         <li><a href="#">HTML5</a></li>
  45.                                                         <li><a href="#">CSS</a></li>
  46.                                                         <li><a href="#">Javascript</a></li>
  47.                                                 </ol>
  48.                                         </li>
  49.                                         <li><a href="#">后台</a>
  50.                                                 <ol>
  51.                                                         <li><a href="#">Java</a></li>
  52.                                                         <li><a href="#">PHP</a></li>
  53.                                                         <li><a href="#">Python</a></li>
  54.                                                 </ol>
  55.                                         </li>
  56.                                         <li><a href="#">移动应用</a>
  57.                                                 <ol>
  58.                                                         <li><a href="#">Android</a></li>
  59.                                                         <li><a href="#">IOS</a></li>
  60.                                                 </ol>
  61.                                         </li>
  62.                                         <li><a href="#">数据库</a>
  63.                                                 <ol>
  64.                                                         <li><a href="#">MySql</a></li>
  65.                                                         <li><a href="#">SqlServer</a></li>
  66.                                                 </ol>
  67.                                         </li>
  68.                                         <li><a href="#">操作系统</a>
  69.                                                 <ol>
  70.                                                         <li><a href="#">Linux</a></li>
  71.                                                         <li><a href="#">Unix</a></li>
  72.                                                         <li><a href="#">Windows</a></li>
  73.                                                 </ol>
  74.                                         </li>
  75.                                         <li><a href="#">服务器</a>
  76.                                                 <ol>
  77.                                                         <li><a href="#">Tomcat</a></li>
  78.                                                         <li><a href="#">WebSphere</a></li>
  79.                                                         <li><a href="#">WebLogicc</a></li>
  80.                                                 </ol>
  81.                                         </li>
  82.                                 </ul>
  83.                         </div>
  84.                 </nav>
  85.         </body>
  86. </html>
复制代码
8.1.2.5 超链接样式的设计


使用 CSS 为列表超链接重新设置样式，例如，对超链接的a:link和a:visited 进行设置，表现超链接未被访问和已访问状态。然后将其 display属性设置为 block，使得超链接成为块级元素，如许才可以为超链接设置80像素的宽度。
  1.                 <style type="text/css">
  2.                         ul,ol{
  3.                                 list-style-type: none;
  4.                                 padding: 0;
  5.                                 margin: 0;
  6.                         }
  7.                         ul,li{
  8.                                 float: left;
  9.                         }
  10.                         ul li ol li{
  11.                                 float: none;
  12.                         }
  13.                         ul li ol{
  14.                                 display: none;
  15.                         }
  16.                         ul li:hover ol{
  17.                                 display: block;
  18.                         }
  19.                         a{
  20.                                 text-decoration: none;
  21.                                 text-align: center;
  22.                                 display: block;
  23.                                 width: 80px;
  24.                                 padding: 10px;
  25.                         }
  26.                         ul li a{
  27.                                 background-color: #ff0000;
  28.                                 color: #dddddd;
  29.                         }
  30.                         ul li ol li a{
  31.                                 background-color: #dddddd;
  32.                                 color: #ff0000;
  33.                         }
  34.                 </style>
复制代码

8.1.2.6 鼠标变乱

用CSS为无序列表选项li:hover和有序列表的a:hover进行样式设置，表现鼠标悬停状态时的样式变革

  1.                 <style type="text/css">
  2.                         ul,ol{
  3.                                 list-style-type: none;
  4.                                 padding: 0;
  5.                                 margin: 0;
  6.                         }
  7.                         ul,li{
  8.                                 float: left;
  9.                         }
  10.                         ul li ol li{
  11.                                 float: none;
  12.                         }
  13.                         ul li ol{
  14.                                 display: none;
  15.                         }
  16.                         ul li:hover ol{
  17.                                 display: block;
  18.                         }
  19.                         a{
  20.                                 text-decoration: none;
  21.                                 text-align: center;
  22.                                 display: block;
  23.                                 width: 80px;
  24.                                 padding: 10px;
  25.                         }
  26.                         ul li a{
  27.                                 background-color: #ff0000;
  28.                                 color: #dddddd;
  29.                         }
  30.                         ul li ol li a{
  31.                                 background-color: #dddddd;
  32.                                 color: #ff0000;
  33.                         }
  34.                         ul li a:hover,ul li a:visited{
  35.                                 border-bottom: #22aaff solid 5px;
  36.                                 font-weight: 900;
  37.                         }
  38.                         ul li ol li a:hover,ul li ol li a:visited{
  39.                                 background-color: #ff0000;
  40.                                 color: #dddddd;
  41.                                 border-bottom: none;
  42.                         }
  43.                 </style>
复制代码

 
8.2 纵向侧边导航栏

8.2.1 简单纵领导航栏的设计与实现

平凡的纵领导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级
元素。区别于程度导航栏，纵领导航栏不需要设置列表选项<li>的浮动属性。
8.2.1.1导航栏的创建

平凡的纵领导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素。区别于程度导航栏，纵领导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，联合无序列表<>标签和列表选项/i>标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据现实情况改成具体的 URL地址。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>纵向导航栏</title>
  6.         </head>
  7.         <body>
  8.                 <nav>
  9.                         <div id="nav">
  10.                                 <h3 class="tit">所有商品分类</h3>
  11.                                 <ul>
  12.                                         <li><a href="#">家居用品</a></li>
  13.                                         <li><a href="#">手机数码</a></li>
  14.                                         <li><a href="#">家用电器</a></li>
  15.                                         <li><a href="#">厨卫工具</a></li>
  16.                                         <li><a href="#">汽车用品</a></li>
  17.                                         <li><a href="#">运动器材</a></li>
  18.                                 </ul>
  19.                         </div>
  20.                 </nav>
  21.         </body>
  22. </html>
复制代码

8.2.1.2 DIV样式的设计

导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置、包括高度、行高、颜色和对齐方式。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>纵向导航栏</title>
  6.                 <style type="text/css">
  7.                         /*DIV样式的设计*/
  8.                         #nav{
  9.                                 background-color: #00cc33;
  10.                                 width: 150px;
  11.                                 padding: 10px;
  12.                         }
  13.                         h3{
  14.                                 text-align: center;
  15.                                 color: #eeeeee;
  16.                         }
  17.                 </style>
  18.         </head>
  19.         <body>
  20.                 <nav>
  21.                         <div id="nav">
  22.                                 <h3 class="tit">所有商品分类</h3>
  23.                                 <ul>
  24.                                         <li><a href="#">家居用品</a></li>
  25.                                         <li><a href="#">手机数码</a></li>
  26.                                         <li><a href="#">家用电器</a></li>
  27.                                         <li><a href="#">厨卫工具</a></li>
  28.                                         <li><a href="#">汽车用品</a></li>
  29.                                         <li><a href="#">运动器材</a></li>
  30.                                 </ul>
  31.                         </div>
  32.                 </nav>
  33.         </body>
  34. </html>
复制代码
 

8.2.1.3 列表样式的设计

此时列表选项还带有<ul>元素的默认实心园点样式，需要使用list-style-lype 属性去掉默认标志，设置margin和padding的属性值。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>纵向导航栏</title>
  6.                 <style type="text/css">
  7.                         /*DIV样式的设计*/
  8.                         #nav{
  9.                                 background-color: #00cc33;
  10.                                 width: 150px;
  11.                                 padding: 10px;
  12.                         }
  13.                         h3{
  14.                                 text-align: center;
  15.                                 color: #eeeeee;
  16.                         }
  17.                         /*列表样式的设计*/
  18.                         ul{
  19.                                 list-style-type: none;
  20.                                 margin: 0;
  21.                                 padding: 0;
  22.                         }
  23.                 </style>
  24.         </head>
  25.         <body>
  26.                 <nav>
  27.                         <div id="nav">
  28.                                 <h3 class="tit">所有商品分类</h3>
  29.                                 <ul>
  30.                                         <li><a href="#">家居用品</a></li>
  31.                                         <li><a href="#">手机数码</a></li>
  32.                                         <li><a href="#">家用电器</a></li>
  33.                                         <li><a href="#">厨卫工具</a></li>
  34.                                         <li><a href="#">汽车用品</a></li>
  35.                                         <li><a href="#">运动器材</a></li>
  36.                                 </ul>
  37.                         </div>
  38.                 </nav>
  39.         </body>
  40. </html>
复制代码
 8.2.1.4 超链接样式的设计

使用CSS为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表现超链接未被访问和已访问状态。同时，使用CSS为a:hover和a:aetive 进行样式设置，表现鼠标悬停和活动链接状态时的样式变革。并且，将display属性设置为block，使得超链接成为块级元素，以及字体 CSS样式的设置。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>纵向导航栏</title>
  6.                 <style type="text/css">
  7.                         /*DIV样式的设计*/
  8.                         #nav{
  9.                                 background-color: #00cc33;
  10.                                 width: 150px;
  11.                                 padding: 10px;
  12.                         }
  13.                         h3{
  14.                                 text-align: center;
  15.                                 color: #eeeeee;
  16.                         }
  17.                         /*列表样式的设计*/
  18.                         ul{
  19.                                 list-style-type: none;
  20.                                 margin: 0;
  21.                                 padding: 0;
  22.                         }
  23.                         /*超链接的设定*/
  24.                         a{
  25.                                 display: block;
  26.                                 width: 150px;
  27.                                 line-height: 30px;
  28.                                 background-color: #eeeeee;
  29.                                 color: #00cc33;
  30.                                 text-align: center;
  31.                                 text-decoration: none;
  32.                         }
  33.                         a:link,a:visited{
  34.                                 background-color: #eeeeee;
  35.                                 color: #00cc33;
  36.                         }
  37.                         a:hover,a:active{
  38.                                 background: url(img/bg.JPG) no-repeat;
  39.                         }
  40.                 </style>
  41.         </head>
  42.         <body>
  43.                 <nav>
  44.                         <div id="nav">
  45.                                 <h3 class="tit">所有商品分类</h3>
  46.                                 <ul>
  47.                                         <li><a href="#">家居用品</a></li>
  48.                                         <li><a href="#">手机数码</a></li>
  49.                                         <li><a href="#">家用电器</a></li>
  50.                                         <li><a href="#">厨卫工具</a></li>
  51.                                         <li><a href="#">汽车用品</a></li>
  52.                                         <li><a href="#">运动器材</a></li>
  53.                                 </ul>
  54.                         </div>
  55.                 </nav>
  56.         </body>
  57. </html>
复制代码

8.2.2 出式子菜单导航栏的设计与实现

出式子菜单导航跟下拉子菜单导航一样，是网站设计中常见的子导航设计，只是出式子菜单多用于侧边纵领导航栏。这种子菜单适用于多级别、内容庞杂的网站，可以让整个网站设计更加整洁有序。
8.2.2.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，联合无序列表<ul>和有序列表<ol>标签，共同列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接
  1. <!--示例程序8.4-->
  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8" />
  6.                 <title>出式子导航栏的制作</title>
  7.                 <style type="text/css">
  8.                        
  9.                 </style>
  10.         </head>
  11.         <body>
  12.                 <nav>
  13.                         <div id="nav">
  14.                                 <h3 class="tit">所有商品分类</h3>
  15.                                 <ul>
  16.                                         <li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
  17.                                                 <ol>
  18.                                                         <li><a href="#">收纳箱</a></li>
  19.                                                         <li><a href="#">雨伞雨具</a></li>
  20.                                                         <li><a href="#">家务清洁</a></li>
  21.                                                         <li><a href="#">茶具</a></li>
  22.                                                         <li><a href="#">环保袋</a></li>
  23.                                                 </ol>
  24.                                         </li>
  25.                                         <li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
  26.                                                 <ol>
  27.                                                         <li><a href="#">电脑主机</a></li>
  28.                                                         <li><a href="#">鼠标键盘</a></li>
  29.                                                         <li><a href="#">无人机</a></li>
  30.                                                         <li><a href="#">数码相机</a></li>
  31.                                                 </ol>
  32.                                         </li>
  33.                                         <li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
  34.                                                 <ol>
  35.                                                         <li><a href="#">吸尘器</a></li>
  36.                                                         <li><a href="#">电饭煲</a></li>
  37.                                                         <li><a href="#">冰箱</a></li>
  38.                                                 </ol>
  39.                                         </li>
  40.                                         <li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
  41.                                                 <ol>
  42.                                                         <li><a href="#">消毒柜</a></li>
  43.                                                         <li><a href="#">抽油烟机</a></li>
  44.                                                         <li><a href="#">碗柜</a></li>
  45.                                                         <li><a href="#">花洒笼头</a></li>
  46.                                                         <li><a href="#">洗手台</a></li>
  47.                                                 </ol>
  48.                                         </li>
  49.                                         <li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
  50.                                                 <ol>
  51.                                                         <li><a href="#">打蜡服务</a></li>
  52.                                                         <li><a href="#">超级试驾</a></li>
  53.                                                         <li><a href="#">导航仪</a></li>
  54.                                                         <li><a href="#">机油</a></li>
  55.                                                 </ol>
  56.                                         </li>
  57.                                         <li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
  58.                                                 <ol>
  59.                                                         <li><a href="#">跑鞋</a></li>
  60.                                                         <li><a href="#">帐篷</a></li>
  61.                                                         <li><a href="#">山地车</a></li>
  62.                                                 </ol>
  63.                                         </li>
  64.                                 </ul>
  65.                         </div>
  66.                 </nav>
  67.         </body>
  68. </html>
复制代码

8.2.2.2 DIV样式的设计

对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS
进行设置，包括高度、行高、颜色和对齐方式
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>出式子导航栏的制作</title>
  6.                 <style type="text/css">
  7.                         #nav{
  8.                                 background-color: #00cc33;
  9.                                 width: 150px;
  10.                                 padding: 10px;
  11.                         }
  12.                         h3{
  13.                                 text-align: center;
  14.                                 color: #eeeeee;
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.                 <nav>
  20.                         <div id="nav">
  21.                                 <h3 class="tit">所有商品分类</h3>
  22.                                 <ul>
  23.                                         <li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
  24.                                                 <ol>
  25.                                                         <li><a href="#">收纳箱</a></li>
  26.                                                         <li><a href="#">雨伞雨具</a></li>
  27.                                                         <li><a href="#">家务清洁</a></li>
  28.                                                         <li><a href="#">茶具</a></li>
  29.                                                         <li><a href="#">环保袋</a></li>
  30.                                                 </ol>
  31.                                         </li>
  32.                                         <li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
  33.                                                 <ol>
  34.                                                         <li><a href="#">电脑主机</a></li>
  35.                                                         <li><a href="#">鼠标键盘</a></li>
  36.                                                         <li><a href="#">无人机</a></li>
  37.                                                         <li><a href="#">数码相机</a></li>
  38.                                                 </ol>
  39.                                         </li>
  40.                                         <li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
  41.                                                 <ol>
  42.                                                         <li><a href="#">吸尘器</a></li>
  43.                                                         <li><a href="#">电饭煲</a></li>
  44.                                                         <li><a href="#">冰箱</a></li>
  45.                                                 </ol>
  46.                                         </li>
  47.                                         <li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
  48.                                                 <ol>
  49.                                                         <li><a href="#">消毒柜</a></li>
  50.                                                         <li><a href="#">抽油烟机</a></li>
  51.                                                         <li><a href="#">碗柜</a></li>
  52.                                                         <li><a href="#">花洒笼头</a></li>
  53.                                                         <li><a href="#">洗手台</a></li>
  54.                                                 </ol>
  55.                                         </li>
  56.                                         <li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
  57.                                                 <ol>
  58.                                                         <li><a href="#">打蜡服务</a></li>
  59.                                                         <li><a href="#">超级试驾</a></li>
  60.                                                         <li><a href="#">导航仪</a></li>
  61.                                                         <li><a href="#">机油</a></li>
  62.                                                 </ol>
  63.                                         </li>
  64.                                         <li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
  65.                                                 <ol>
  66.                                                         <li><a href="#">跑鞋</a></li>
  67.                                                         <li><a href="#">帐篷</a></li>
  68.                                                         <li><a href="#">山地车</a></li>
  69.                                                 </ol>
  70.                                         </li>
  71.                                 </ul>
  72.                         </div>
  73.                 </nav>
  74.         </body>
  75. </html>
复制代码

8.2.2.3 二级菜单的隐藏和显示设计


为了使有序列表的二级菜单隐藏起来，需要设置 display 属性为 none。为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的displsy属性为block .
为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>出式子导航栏的制作</title>
  6.                 <style type="text/css">
  7.                         #nav{
  8.                                 background-color: #00cc33;
  9.                                 width: 150px;
  10.                                 padding: 10px;
  11.                         }
  12.                         h3{
  13.                                 text-align: center;
  14.                                 color: #eeeeee;
  15.                         }
  16.                         /*二级菜单隐藏和显示*/
  17.                         ul li{
  18.                                 position: relative;
  19.                         }
  20.                         ul li ol{
  21.                                 display: none;
  22.                                 position: absolute;
  23.                                 top: -1px;
  24.                                 left: 150px;
  25.                         }
  26.                         ul li:hover ol{
  27.                                 display: block;
  28.                         }
  29.                 </style>
  30.         </head>
  31.         <body>
  32.                 <nav>
  33.                         <div id="nav">
  34.                                 <h3 class="tit">所有商品分类</h3>
  35.                                 <ul>
  36.                                         <li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
  37.                                                 <ol>
  38.                                                         <li><a href="#">收纳箱</a></li>
  39.                                                         <li><a href="#">雨伞雨具</a></li>
  40.                                                         <li><a href="#">家务清洁</a></li>
  41.                                                         <li><a href="#">茶具</a></li>
  42.                                                         <li><a href="#">环保袋</a></li>
  43.                                                 </ol>
  44.                                         </li>
  45.                                         <li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
  46.                                                 <ol>
  47.                                                         <li><a href="#">电脑主机</a></li>
  48.                                                         <li><a href="#">鼠标键盘</a></li>
  49.                                                         <li><a href="#">无人机</a></li>
  50.                                                         <li><a href="#">数码相机</a></li>
  51.                                                 </ol>
  52.                                         </li>
  53.                                         <li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
  54.                                                 <ol>
  55.                                                         <li><a href="#">吸尘器</a></li>
  56.                                                         <li><a href="#">电饭煲</a></li>
  57.                                                         <li><a href="#">冰箱</a></li>
  58.                                                 </ol>
  59.                                         </li>
  60.                                         <li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
  61.                                                 <ol>
  62.                                                         <li><a href="#">消毒柜</a></li>
  63.                                                         <li><a href="#">抽油烟机</a></li>
  64.                                                         <li><a href="#">碗柜</a></li>
  65.                                                         <li><a href="#">花洒笼头</a></li>
  66.                                                         <li><a href="#">洗手台</a></li>
  67.                                                 </ol>
  68.                                         </li>
  69.                                         <li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
  70.                                                 <ol>
  71.                                                         <li><a href="#">打蜡服务</a></li>
  72.                                                         <li><a href="#">超级试驾</a></li>
  73.                                                         <li><a href="#">导航仪</a></li>
  74.                                                         <li><a href="#">机油</a></li>
  75.                                                 </ol>
  76.                                         </li>
  77.                                         <li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
  78.                                                 <ol>
  79.                                                         <li><a href="#">跑鞋</a></li>
  80.                                                         <li><a href="#">帐篷</a></li>
  81.                                                         <li><a href="#">山地车</a></li>
  82.                                                 </ol>
  83.                                         </li>
  84.                                 </ul>
  85.                         </div>
  86.                 </nav>
  87.         </body>
  88. </html>
复制代码

8.2.2.4 列表样式的设计

此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用list一style-type 属性去掉默认标志，设置margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>出式子导航栏的制作</title>
  6.                 <style type="text/css">
  7.                         #nav{
  8.                                 background-color: #00cc33;
  9.                                 width: 150px;
  10.                                 padding: 10px;
  11.                         }
  12.                         h3{
  13.                                 text-align: center;
  14.                                 color: #eeeeee;
  15.                         }
  16.                         /*二级菜单隐藏和显示*/
  17.                         ul li{
  18.                                 position: relative;
  19.                         }
  20.                         ul li ol{
  21.                                 display: none;
  22.                                 position: absolute;
  23.                                 top: -1px;
  24.                                 left: 150px;
  25.                         }
  26.                         ul li:hover ol{
  27.                                 display: block;
  28.                         }
  29.                                 /*列表样式的设计*/
  30.                         ul,ol{
  31.                                 list-style-type: none;
  32.                                 margin: 0;
  33.                                 padding: 0;
  34.                         }
  36.                 </style>
  37.         </head>
  38.         <body>
  39.                 <nav>
  40.                         <div id="nav">
  41.                                 <h3 class="tit">所有商品分类</h3>
  42.                                 <ul>
  43.                                         <li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
  44.                                                 <ol>
  45.                                                         <li><a href="#">收纳箱</a></li>
  46.                                                         <li><a href="#">雨伞雨具</a></li>
  47.                                                         <li><a href="#">家务清洁</a></li>
  48.                                                         <li><a href="#">茶具</a></li>
  49.                                                         <li><a href="#">环保袋</a></li>
  50.                                                 </ol>
  51.                                         </li>
  52.                                         <li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
  53.                                                 <ol>
  54.                                                         <li><a href="#">电脑主机</a></li>
  55.                                                         <li><a href="#">鼠标键盘</a></li>
  56.                                                         <li><a href="#">无人机</a></li>
  57.                                                         <li><a href="#">数码相机</a></li>
  58.                                                 </ol>
  59.                                         </li>
  60.                                         <li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
  61.                                                 <ol>
  62.                                                         <li><a href="#">吸尘器</a></li>
  63.                                                         <li><a href="#">电饭煲</a></li>
  64.                                                         <li><a href="#">冰箱</a></li>
  65.                                                 </ol>
  66.                                         </li>
  67.                                         <li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
  68.                                                 <ol>
  69.                                                         <li><a href="#">消毒柜</a></li>
  70.                                                         <li><a href="#">抽油烟机</a></li>
  71.                                                         <li><a href="#">碗柜</a></li>
  72.                                                         <li><a href="#">花洒笼头</a></li>
  73.                                                         <li><a href="#">洗手台</a></li>
  74.                                                 </ol>
  75.                                         </li>
  76.                                         <li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
  77.                                                 <ol>
  78.                                                         <li><a href="#">打蜡服务</a></li>
  79.                                                         <li><a href="#">超级试驾</a></li>
  80.                                                         <li><a href="#">导航仪</a></li>
  81.                                                         <li><a href="#">机油</a></li>
  82.                                                 </ol>
  83.                                         </li>
  84.                                         <li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
  85.                                                 <ol>
  86.                                                         <li><a href="#">跑鞋</a></li>
  87.                                                         <li><a href="#">帐篷</a></li>
  88.                                                         <li><a href="#">山地车</a></li>
  89.                                                 </ol>
  90.                                         </li>
  91.                                 </ul>
  92.                         </div>
  93.                 </nav>
  94.         </body>
  95. </html>
复制代码

8.2.2.5 超链接样式的设计


使用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表现超链接未被访问和已访问状态。同时，使用CSS为a:hover和a:active进行样式设置，表现鼠标悬停和活动链接状态时的样式变革。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>出式子导航栏的制作</title>
  6.                 <style type="text/css">
  7.                         #nav{
  8.                                 background-color: #00cc33;
  9.                                 width: 150px;
  10.                                 padding: 10px;
  11.                         }
  12.                         h3{
  13.                                 text-align: center;
  14.                                 color: #eeeeee;
  15.                         }
  16.                         /*二级菜单隐藏和显示*/
  17.                         ul li{
  18.                                 position: relative;
  19.                         }
  20.                         ul li ol{
  21.                                 display: none;
  22.                                 position: absolute;
  23.                                 top: -1px;
  24.                                 left: 150px;
  25.                         }
  26.                         ul li:hover ol{
  27.                                 display: block;
  28.                         }
  29.                                 /*列表样式的设计*/
  30.                         ul,ol{
  31.                                 list-style-type: none;
  32.                                 margin: 0;
  33.                                 padding: 0;
  34.                         }
  35.                         /*超链接样式的设计*/
  36.                         a{
  37.                                 text-decoration: none;
  38.                                 text-align: center;
  39.                                 display: block;
  40.                                 width: 150px;
  41.                                 line-height: 30px;
  42.                                 background-color: #ffffff;
  43.                                 color: #00cc33;
  44.                         }
  45.                         ul li a:hover,ul li a:active{
  46.                                 background: url(img/bg2.JPG);
  47.                         }
  48.                         ul li ol li a:hover,ul li ol li a:active{
  49.                                 background-color: #00cc33;
  50.                                 color: #ffffff;
  51.                                 background-image: none;
  52.                         }
  53.                 </style>
  54.         </head>
  55.         <body>
  56.                 <nav>
  57.                         <div id="nav">
  58.                                 <h3 class="tit">所有商品分类</h3>
  59.                                 <ul>
  60.                                         <li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
  61.                                                 <ol>
  62.                                                         <li><a href="#">收纳箱</a></li>
  63.                                                         <li><a href="#">雨伞雨具</a></li>
  64.                                                         <li><a href="#">家务清洁</a></li>
  65.                                                         <li><a href="#">茶具</a></li>
  66.                                                         <li><a href="#">环保袋</a></li>
  67.                                                 </ol>
  68.                                         </li>
  69.                                         <li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
  70.                                                 <ol>
  71.                                                         <li><a href="#">电脑主机</a></li>
  72.                                                         <li><a href="#">鼠标键盘</a></li>
  73.                                                         <li><a href="#">无人机</a></li>
  74.                                                         <li><a href="#">数码相机</a></li>
  75.                                                 </ol>
  76.                                         </li>
  77.                                         <li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
  78.                                                 <ol>
  79.                                                         <li><a href="#">吸尘器</a></li>
  80.                                                         <li><a href="#">电饭煲</a></li>
  81.                                                         <li><a href="#">冰箱</a></li>
  82.                                                 </ol>
  83.                                         </li>
  84.                                         <li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
  85.                                                 <ol>
  86.                                                         <li><a href="#">消毒柜</a></li>
  87.                                                         <li><a href="#">抽油烟机</a></li>
  88.                                                         <li><a href="#">碗柜</a></li>
  89.                                                         <li><a href="#">花洒笼头</a></li>
  90.                                                         <li><a href="#">洗手台</a></li>
  91.                                                 </ol>
  92.                                         </li>
  93.                                         <li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
  94.                                                 <ol>
  95.                                                         <li><a href="#">打蜡服务</a></li>
  96.                                                         <li><a href="#">超级试驾</a></li>
  97.                                                         <li><a href="#">导航仪</a></li>
  98.                                                         <li><a href="#">机油</a></li>
  99.                                                 </ol>
  100.                                         </li>
  101.                                         <li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
  102.                                                 <ol>
  103.                                                         <li><a href="#">跑鞋</a></li>
  104.                                                         <li><a href="#">帐篷</a></li>
  105.                                                         <li><a href="#">山地车</a></li>
  106.                                                 </ol>
  107.                                         </li>
  108.                                 </ul>
  109.                         </div>
  110.                 </nav>
  111.         </body>
  112. </html>
复制代码
 

8.3 底部固定导航栏

底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不是在PC端中，而是在移动端。如果在PC端中接纳底部导航的形式，一般都是接纳固定的方式。
8.3.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，联合无序列表<ul>共同列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>导航栏的创建</title>
  6.         </head>
  7.         <body>
  8.                 <nav>
  9.                         <div class="fix-footer">
  10.                                 <ul>
  11.                                         <li><a href="#">首页</a></li>
  12.                                         <li><a href="#">前端</a></li>
  13.                                         <li><a href="#">后端</a></li>
  14.                                         <li><a href="#">移动平台</a></li>
  15.                                 </ul>
  16.                         </div>
  17.                 </nav>
  18.         </body>
  19. </html>
复制代码


8.3.2 列表样式的设计

此时会带有<ul>元素的默认实心点标志，可以使用list-style-type属性去掉，同时设置 margin 和 padding属性。列表选项设置 foat 属性，让列表元素能够在同一行显示。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>列表样式的设计</title>
  6.                 <style type="text/css">
  7.                         /*列表样式的设计*/
  8.                         ul{
  9.                                 list-style-type: none;
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                         }
  13.                         li{
  14.                                 float: left;
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.                 <nav>
  20.                         <div class="fix-footer">
  21.                                 <ul>
  22.                                         <li><a href="#">首页</a></li>
  23.                                         <li><a href="#">前端</a></li>
  24.                                         <li><a href="#">后端</a></li>
  25.                                         <li><a href="#">移动平台</a></li>
  26.                                 </ul>
  27.                         </div>
  28.                 </nav>
  29.         </body>
  30. </html>
复制代码

8.3.3 菜单固定底部的设计

使用CSS为a：hover 和a：active 进行样式设置，表现鼠标悬停和活动链接状态时的褂
式变革。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /*列表样式的设计*/
  8.                         ul{
  9.                                 list-style-type: none;
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                         }
  13.                         li{
  14.                                 float: left;
  15.                         }
  16.                         /*超链接的设计*/
  17.                         a{
  18.                                 display: block;
  19.                                 width: 80px;
  20.                                 padding: 10px;
  21.                                 text-decoration: none;
  22.                                 text-align: center;
  23.                         }
  24.                 </style>
  25.         <body>
  26.                 <nav>
  27.                         <div class="fix-footer">
  28.                                 <ul>
  29.                                         <li><a href="#">首页</a></li>
  30.                                         <li><a href="#">前端</a></li>
  31.                                         <li><a href="#">后端</a></li>
  32.                                         <li><a href="#">移动平台</a></li>
  33.                                 </ul>
  34.                         </div>
  35.                 </nav>
  36.         </body>
  37. </html>
复制代码
 

8.3.4 超链接样式的设计

使用 CSS 为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表现超接未被访问和已访问状态。然后将其display属性设置为bock，使得超链接成为块级元素
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /*列表样式的设计*/
  8.                         ul{
  9.                                 list-style-type: none;
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                         }
  13.                         li{
  14.                                 float: left;
  15.                         }
  16.                         /*超链接的设计*/
  17.                         a{
  18.                                 display: block;
  19.                                 width: 80px;
  20.                                 padding: 10px;
  21.                                 text-decoration: none;
  22.                                 text-align: center;
  23.                         }
  24.                         /*鼠标事件*/
  25.                         a:link,a:visited{
  26.                                 background-color: #0000ff;
  27.                                 color: #ffff00;
  28.                         }
  29.                         a:hover,a:active{
  30.                                 background-color: #ffff00;
  31.                                 color: #0000ff;
  32.                         }
  33.                 </style>
  34.         <body>
  35.                 <nav>
  36.                         <div class="fix-footer">
  37.                                 <ul>
  38.                                         <li><a href="#">首页</a></li>
  39.                                         <li><a href="#">前端</a></li>
  40.                                         <li><a href="#">后端</a></li>
  41.                                         <li><a href="#">移动平台</a></li>
  42.                                 </ul>
  43.                         </div>
  44.                 </nav>
  45.         </body>
  46. </html>
复制代码
 

8.3.5 鼠标变乱

使用CSS 为a:hover 和 a:active 进行样式设置，表现鼠标悬停和活动链接状态时的样式变革 

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /*列表样式的设计*/
  8.                         ul{
  9.                                 list-style-type: none;
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                         }
  13.                         li{
  14.                                 float: left;
  15.                         }
  16.                         /*超链接的设计*/
  17.                         a{
  18.                                 display: block;
  19.                                 width: 80px;
  20.                                 padding: 10px;
  21.                                 text-decoration: none;
  22.                                 text-align: center;
  23.                         }
  24.                         /*鼠标事件*/
  25.                         a:link,a:visited{
  26.                                 background-color: #0000ff;
  27.                                 color: #ffff00;
  28.                         }
  29.                         a:hover,a:active{
  30.                                 background-color: #ffff00;
  31.                                 color: #0000ff;
  32.                         }
  33.                         .fix-footer{
  34.                                 position: fixed;
  35.                                 bottom: 0;
  36.                         }
  37.                 </style>
  38.         <body>
  39.                 <nav>
  40.                         <div class="fix-footer">
  41.                                 <ul>
  42.                                         <li><a href="#">首页</a></li>
  43.                                         <li><a href="#">前端</a></li>
  44.                                         <li><a href="#">后端</a></li>
  45.                                         <li><a href="#">移动平台</a></li>
  46.                                 </ul>
  47.                         </div>
  48.                 </nav>
  49.         </body>
  50. </html>
复制代码
8.4 综合案例——优名养生馆

8.4.1 封面页的设计与实现

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>优名养生馆</title>
  6.                 <style>
  7.                         body{
  8.                                 background-image: url(img/bg.JPG);
  9.                         }
  10.                         ul{
  11.                                 list-style-type: none;
  12.                                 margin: 0;
  13.                                 padding: 0;
  14.                         }
  15.                         li{
  16.                                 float: left;
  17.                                 width: 25%;
  18.                                 line-height: 50px;
  19.                         }
  20.                         img{
  21.                                 margin-top: 70px;
  22.                                 margin-right: 40px;
  23.                         }
  24.                         .footer{
  25.                                 height: 50px;
  26.                                 width: 100%;
  27.                                 background-image: url(img/footer-bg.jpg);
  28.                                 border-top: 3px solid gray;
  29.                                 text-align: center;
  30.                                 z-index: 9998;
  31.                                 position: fixed;
  32.                                 bottom: 0;
  33.                                 left: 0;
  34.                         }
  35.                         .footer-top{
  36.                                 height: 90px;
  37.                                 width: 90px;
  38.                                 line-height: 90px;
  39.                                 text-align: center;
  40.                                 position: fixed;
  41.                                 bottom: 0;
  42.                                 left: 45%;
  43.                                 z-index: 9999;
  44.                         }
  45.                         .footer-top a{
  46.                                 border-radius: 90px;
  47.                         }
  48.                         .footer-top a:link,a:visited{
  49.                                 display: block;
  50.                                 font-size: 20px;
  51.                                 color: brown;
  52.                                 text-decoration: none;
  53.                                 font-weight: bold;
  54.                                 border-top: 3px solid gray;
  55.                                 background-image: url(img/footer-top-bg1.jpg);
  56.                         }
  57.                         .footer-top a:hover{
  58.                                 background-image: url(img/footer-top-bg2.jpg);
  59.                                 color: white;
  60.                         }
  61.                         .footer a:link,a:visited{
  62.                                 display: block;
  63.                                 font-size: 20px;
  64.                                 color: brown;
  65.                                 text-decoration: none;
  66.                                 font-weight: bold;
  67.                         }
  68.                         .fotter a:hover{
  69.                                 background-color: darkgray;
  70.                                 border-left: 2px solid white;
  71.                                 border-right: 2px solid white;
  72.                                 font-size: 20px;
  73.                                 color: red;
  74.                         }
  75.                 </style>
  76.         </head>
  77.         <body>
  78.                 <div>
  79.                         <marquee direction="right" scrollamount="20">
  80.                                 <img src="img/marquee1.jpg"/>
  81.                                 <img src="img/marquee2.jpg"/>
  82.                                 <img src="img/marquee3.jpg"/>
  83.                         </marquee>
  84.                 </div>
  85.                 <nav>
  86.                         <div class="footer-top">
  87.                                 <a href="#">进入官网</a>
  88.                         </div>
  89.                         <div class="footer">
  90.                                 <ul>
  91.                                         <li>奇幻世界</li>
  92.                                         <li>主题风采</li>
  93.                                         <li>加盟相关</li>
  94.                                         <li>友情推荐</li>
  95.                                 </ul>
  96.                         </div>
  97.                 </nav>
  98.         </body>
  99. </html>
复制代码

8.4.2 主页的设计与实现

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>优名养生馆</title>
  6.                 <style>
  7.                         body{
  8.                                 background-image: url(img/bg.jpg);
  9.                                 margin: 0px auto;
  10.                                 width: 900px;
  11.                         }
  12.                         .top{
  13.                                 width: 900px;
  14.                                 height: 225px;
  15.                                 background-image: url(img/top-bg.jpg);
  16.                         }
  17.                         .cent{
  18.                                 width: 320px;
  19.                                 margin-left: auto;
  20.                                 margin-right: auto;
  21.                                 font-size: 58px;
  22.                                 font-family: "楷体";
  23.                                 color: lemonchiffon;
  24.                                 font-style: italic;
  25.                         }
  26.                         nav{
  27.                                 width: 200px;
  28.                                 float: left;
  29.                                 margin-top: 30px;
  30.                                 font-size: 20px;
  31.                                 font-weight: bold;
  32.                                 color: saddlebrown;
  33.                         }
  34.                         .main{
  35.                                 width: 700px;
  36.                                 height: 300px;
  37.                                 float: left;
  38.                                 margin-top: 10px;
  39.                         }
  40.                         .footer{
  41.                                 font-size : 14px;
  42.                                 font-weight: bold;
  43.                                 color: brown;
  44.                                 text-align: center;
  45.                                 clear: both;
  46.                                 background-image: url(img/footer-bg.jpg);
  47.                         }
  48.                         p{
  49.                                 color: brown;
  50.                                 font-size: 16px;
  51.                         }
  52.                         img{
  53.                                 margin: 15px;
  54.                         }
  55.                         ul{
  56.                                 list-style-type: none;
  57.                         }
  58.                         li{
  59.                                 height:22px;
  60.                         }
  61.                         a:link{
  62.                                 font-size: 16px;
  63.                                 text-decoration: none;
  64.                                 color: brown;
  65.                         }
  66.                         a:hover{
  67.                                 background-color: burlywood;
  68.                                 color: white;
  69.                         }
  70.                 </style>
  71.         </head>
  72.         <body>
  73.                 <div class="all">
  74.                         <div class="top">
  75.                                 <br>
  76.                                 <div class="cent">优名养生馆</div>
  77.                         </div>
  78.                         <nav>
  79.                                 <div class="nav">
  80.                                         <table>
  81.                                                 <tr>养生之道</tr>
  82.                                                 <tr>
  83.                                                         <ul>
  84.                                                                 <li><a href="#">运动养生</a></li>
  85.                                                                 <li><a href="#">四季养生</a></li>
  86.                                                                 <li><a href="#">健康检测</a></li>
  87.                                                         </ul>
  88.                                                 </tr>
  89.                                                 <tr>中医养生</tr>
  90.                                                 <tr>
  91.                                                         <ul>
  92.                                                                 <li><a href="#">经络养生</a></li>
  93.                                                                 <li><a href="#">体质养生</a></li>
  94.                                                                 <li><a href="#">特色疗法</a></li>
  95.                                                         </ul>
  96.                                                 </tr>
  97.                                         </table>
  98.                                 </div>
  99.                         </nav>
  100.                         <div class="main">
  101.                                 <img src="img/main.jpg" align="left"/>
  102.                                 <p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p>
  103.                                 <p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p>
  104.                                 <p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p>
  105.                         </div>
  106.                         <hr />
  107.                         <div class="footer">版权所有&copy;优名养生馆</div>
  108.                 </div>
  109.         </body>
  110. </html>
复制代码
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4