第8章 使用CSS制作导航菜单.

tsx81428  论坛元老 | 2024-11-13 20:47:36 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1810|帖子 1810|积分 5432

8.1 水平顶部导航栏

我们在欣赏网页的时间可以瞥见许多位于顶部的导航栏，供我们点击跳转。
8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

我们此时可以发现它的样子和我们寻常使用的导航栏不一样，因为这只是第一步，我们接下来再给它稍微修饰一下。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                 <center><h3>简单水平菜单导航栏</h3></center>
  9.                 <hr>
  10.                 <nav>
  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.                 </nav>
  20.         </body>
  21. </html>
复制代码

8.1.1.2 列表样式的设计

此时我们为了更贴合导航栏，所以去掉了下划线，并且从竖排变为了横排。但是还不够，还需要更多。
  1.                 <style type="text/css">
  2.                         li{
  3.                                 float: left;
  4.                         }
  5.                         ul{
  6.                                 list-style-type: none;
  7.                         }
  8.                 </style>
复制代码

8.1.1.3 超链接样式的设计

我们可以瞥见，我们所写的这个它的精密贴合在一起的，此时我们就需要通过设计来分开它们。这个时间可以用到我们之前所学的居中设计。
  1.                 <style type="text/css">
  2.                         li{
  3.                                 float: left;
  4.                         }
  5.                         ul{
  6.                                 list-style-type: none;
  7.                         }
  8.                         a{
  9.                                 text-decoration: none;
  10.                                 display: block;
  11.                                 width: 100px;
  12.                                 padding: 10px;
  13.                                 text-align: center;
  14.                         }
  15.                 </style>
复制代码

8.1.1.4 鼠标事件

当我们鼠标悬停于导航栏的时间，它应该有变化，不然的话太单调了。前面我们也有学过这种范例，就是有关鼠标的样式设计。
  1.                         a:link,a:visited{
  2.                                 background-color: #ff0000;
  3.                                 color: #ffffff;
  4.                         }
  5.                         a:hover,a:active{
  6.                                 background-color: #ffffff;
  7.                                 color: #ff0000;
  8.                         }
复制代码

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

8.1.2.1导航栏的创建

通过在<nav>首尾标签中添加无序列表<ul>标签，以及列表选项<li>创建菜单选项，可以构建最简单的导航栏。
  1. <!--示例程序8.2-->
  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8" />
  6.                 <title>下拉子导航栏的制作</title>
  7.                 <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 列表样式的设计

列表标签的样式设计，是通过前面所学的内容对于其进行进一步更整洁的美化。
  1.                         a{
  2.                                 width: 200px;
  3.                                 padding: 110px;
  4.                         }
  5.                         ul,ol{
  6.                                 list-style-type: none;
  7.                                 margin: 0;
  8.                                 padding: 0;
  9.                         }
  10.                         ul li{
  11.                                 float: left;
  12.                         }
  13.                         ul li ol li{
  14.                                 float: none;
  15.                         }
复制代码

8.1.2.3 二级菜单的隐藏和表现设计

导航栏不会就这样摆在上面的，我们需要将他们内容隐藏。
none(隐藏，不需要)，block（表现出来）
  1.                         ul li ol{
  2.                                 display: none;
  3.                         }
  4.                         ul li:hover ol{
  5.                                 display: block;
  6.                         }
复制代码

8.1.2.4 DIV样式的设计

我们如今需要让它更悦目，更趋近于大众所设计的样式。
  1.                         a{
  2.                                 text-decoration: none;
  3.                                 display: block;
  4.                                 width: 200px;
  5.                                 text-align: center;
  6.                                 padding: 20px;
  7.                         }
复制代码

8.1.2.5 超链接样式的设计

超链接的设计样式在之前的章节有提及。
  1.                         ul li a{
  2.                                 background-color: #ff0000;
  3.                                 color: #ffffff;
  4.                         }
  5.                         ul li ol li a{
  6.                                 background-color: #ffffff;
  7.                                 color: #ff0000;
  8.                         }
复制代码

8.1.2.6 鼠标事件

具体范例样式分为四种，链接没有被点击时（a:link），悬停链接时（a:hover），点击时（a:active），点击后（a:visited）。
  1.                         ul li a:hover,ul li a:active{
  2.                                 border-bottom: #aaccff solid 5px;
  3.                         }
  4.                         ul li ol li a:hover,ul li ol li a:active{
  5.                                 border-bottom: none;
  6.                                 background-color: #ff0000;
  7.                                 color: #eeeeee;
  8.                         }
复制代码


8.2 纵向侧边导航栏

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

我们起主要明白要做成什么样子的，侧边导航栏，我们要根据其样式去修改。
8.2.1.1导航栏的创建

我们先敲出一段浅易的代码用来示例，如下所示。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>纵向导航栏</title>
  6.                 <style type="text/css">
  7.                        
  8.                 </style>
  9.         </head>
  10.         <body>
  11.                 <nav>
  12.                         <div id="nav">
  13.                                 <h3>所有商品分类</h3>
  14.                                 <ul>
  15.                                         <li><a href="#">家居用品</a></li>
  16.                                         <li><a href="#">手机数码</a></li>
  17.                                         <li><a href="#">家用电器</a></li>
  18.                                         <li><a href="#">厨卫工具</a></li>
  19.                                         <li><a href="#">汽车用品</a></li>
  20.                                         <li><a href="#">运动器材</a></li>
  21.                                 </ul>
  22.                         </div>
  23.                 </nav>
  24.         </body>
  25. </html>
复制代码

8.2.1.2 DIV样式的设计

先打出整体配景和标题栏的样式，使其靠近我们所熟知的侧边导航栏样式。
  1.                 <style type="text/css">
  2.                         div{
  3.                                 background-color: #33cc00;
  4.                                 width: 120px;
  5.                         }
  6.                         h3{
  7.                                 color: #ffffff;
  8.                                 text-align: center;
  9.                         }
  10.                 </style>
复制代码

8.2.1.3 列表样式的设计

我们先一步步的去修改，list-style-type:设置为none使前面的小圆点消失，之后设置内外边距均为零，使给小圆点预留的空间消失。
  1.                         ul{
  2.                                 list-style-type: none;
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                         }
复制代码

8.2.1.4 超链接样式的设计

按照我们之前所学内容，有四种属性可以更改鼠标移动过去时链接的样式。
  1.                         a:link,a:visited{
  2.                                 background-color: #eeeeee;
  3.                                 color: #33cc00;
  4.                         }
  5.                         a:hover,a:active{
  6.                                 background-color: #33cc00;
  7.                                 color: #eeeeee;
  8.                         }
复制代码

只设置颜色的话是否未免太过于单调，我们可以用background-image:来指定图片插入。但要留意的是，设置了background-image:的话就不能同时给内容设置配景致，不然会遮掩住。所以要么删除，要么解释掉。
  1.                         a:link,a:visited{
  2.                                 background-color: #eeeeee;
  3.                                 color: #33cc00;
  4.                         }
  5.                         a:hover,a:active{
  6.                                 /* background-color: #33cc00;
  7.                                 color: #eeeeee; */
  8.                                 background-image:url(img/bg.JPG);
  9.                         }
复制代码

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

8.2.2.1 导航栏的创建

先创建一个样式。
  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样式的设计

先给它浅易的设置样式，因为里面实在是有图的，不外因为页面的原因在另一边。所以我们要设置盒子都内边距，让它从另一端过来。如下所示
  1.                 <style type="text/css">
  2.                         div{
  3.                                 background-color: #33cc00;
  4.                                 width: 150px;
  5.                                 padding: 10px;
  6.                         }
  7.                         h3{
  8.                                 color: #eeeeee;
  9.                                 text-align: center;
  10.                         }
  11.                 </style>
复制代码

8.2.2.4 列表样式的设计

因为它如今还是很像列表的，我们要把它设置的不像列表。
  1.                         ul,ol{
  2.                                 list-style-type: none;
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                         }
复制代码

8.2.2.3 二级菜单的隐藏和表现设计

我们如今要将侧边那一列隐藏起来，如今先不管好欠悦目，一步一步来。
  1.                         ul li ol{
  2.                                 display:none;
  3.                         }
  4.                         ul li:hover ol{
  5.                                 display:block;
  6.                         }
复制代码

8.2.2.5 超链接样式的设计

这里就不详细说了，上述内容有写。不外要记得的是，子菜单栏的配景致和图案样式不能同时存在。因为电脑的不同，所需要给予的数值也会不同，要留意自己去尝试。
  1.                         a{
  2.                                 display:block;
  3.                                 width: 150px;
  4.                                 line-height; 30px;
  5.                                 text-decoration: none;
  6.                                 text-align: center;
  7.                                 background-color: #eeeeee;
  8.                                 color: #33cc00;
  9.                         }
  10.                        
  11.                         ul li a:hover{
  12.                                 background-image: url(img/bg2.JPG);
  13.                         }
  14.                         ul li ol lo a:hover{
  15.                                 background-color: #33cc00;
  16.                                 color: #eeeeee;
  17.                                 background-image: none;
  18.                         }
复制代码

8.3 底部固定导航栏

我们需要先将下列代码敲出来，然后再在这个基础上面进行修改。
我们的目的是要将它变成水平导航栏，然后定位到最底下。
8.3.1 导航栏的创建

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>底部导航栏</title>
  6.                 <style type="text/css"></style>
  7.         </head>
  8.         <body>
  9.                 <nav>
  10.                         <div class="fix-footer">
  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.                                 </ul>
  17.                         </div>
  18.                 </nav>
  19.         </body>
  20. </html>
复制代码
 

8.3.2 列表样式的设计

去掉最前面的小点，还有让他们浮动，让它们不像一个列表。
  1. <!DOCTYPE html><html>        <head>                <meta charset="utf-8">                <title>底部导航栏</title>                <style type="text/css">                        /* 列表样式的设计 */                        ul{
  2.                                 list-style-type: none;
  3.                                 margin: 0;
  4.                                 padding: 0;
  5.                         }                        li{                                float: left;                        }                </style>        </head>        <body>                <nav>                        <div class="fix-footer">                                <ul>                                        <li><a href="#">首页</a></li>                                        <li><a href="#">前端</a></li>                                        <li><a href="#">后台</a></li>                                        <li><a href="#">移动应用</a></li>                                </ul>                        </div>                </nav>        </body></html>
复制代码


8.3.3 超链接样式的设计

设计居中，以及去掉下划线等样式，进一步修改。
  1.                         a{
  2.                                 display: block;/* 单独编辑宽度等是无效的,所以需要这个. */
  3.                                 width: 80px;
  4.                                 padding: 10px;
  5.                                 text-align: center;
  6.                                 text-decoration: none;
  7.                         }
复制代码

8.3.4 鼠标事件

修饰a标签的状态，使其更像导航栏。
  1.                         /* 鼠标事件 */
  2.                         a:link, a:visited{
  3.                                 backgroung-color: #0000ff;
  4.                                 color: #ffff00;
  5.                         }
  6.                         a:hover, a:active{
  7.                                 background-color: #ffff00;
  8.                                 color: #0000ff;
  9.                         }
复制代码

8.3.5 菜单固定底部设计

在第五章，5.4中有写怎样固定，我们可以使用--position:fixed;--进行定位，因为它不会随着内容改变位置。
  1.                         .fix-footer{
  2.                                 position: fixed;
  3.                                 bottom: 0%;
  4.                         }
复制代码


8.4 综合案例——优名养生馆

8.4.1 封面页的设计与实现

代码示例

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



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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81428

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表