第8章利用CSS制作导航菜单

🕗 发布于 2024-11-13 02:09 css 前端

8.1 水平顶部导航栏

水平莱单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平
导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。
如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合
下拉子导航使用。

8.1.1 简单水平导航栏的设计与实现

8.1.1.1 导航栏的创建：

使用HTML的<nav>标签和<ul>/<li>列表结构来创建基本的导航栏。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center><h3>简单水平菜单导航栏</h3></center>
<hr />
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</body>
</html>

效果浏览如图：

8.1.1.2 列表样式的设计：

通过CSS去除列表的默认样式（如点号和缩进），并设置列表项的布局方式（如浮动或Flexbox）。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
</style>
</head>
<body>
<center><h3>简单水平菜单导航栏</h3></center>
<hr />
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</body>
</html>

效果浏览如图：

8.1.1.3 超链接样式的设计：

设计导航链接的样式，包括颜色、字体、悬停效果等。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
display: block;
width: 80px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<center><h3>简单水平菜单导航栏</h3></center>
<hr />
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</body>
</html>

效果浏览如图：

8.1.1.4 鼠标事件：

添加鼠标悬停和点击事件，以改变链接的外观或执行其他动作。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a{
display: block;
width: 80px;
padding: 10px;
text-align: center;
text-decoration: none;
}
a:link,a:visited{
background-color: #ff0000;
color: #ffffff;
}
a:hover,a:active{
background-color: #ff00ff;
color: #ffffff;
}
</style>
</head>
<body>
<center><h3>简单水平菜单导航栏</h3></center>
<hr />
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">操作系统</a></li>
<li><a href="#">服务器</a></li>
</ul>
</body>
</html>

效果浏览如图：

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

8.1.2.1 导航栏的创建：

同样使用<nav>、<ul>/<li>结构，但为某些列表项添加嵌套的<ul>以创建下拉子菜单。

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉子导航栏的制作</title>
<style type="text/css">

</style>
</head>
<body>
<center>
<h3>下拉子菜单导航栏</h3>
</center>
<hr>
<nav>
<div id="nav">
<ul>
<li><a href="#">前端</a>
<ol>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ol>
</li>
<li><a href="#">后台</a>
<ol>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
</ol>
</li>
<li><a href="#">移动应用</a>
<ol>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
</ol>
</li>
<li><a href="#">数据库</a>
<ol>
<li><a href="#">MySql</a></li>
<li><a href="#">SqlServer</a></li>
</ol>
</li>
<li><a href="#">操作系统</a>
<ol>
<li><a href="#">Linux</a></li>
<li><a href="#">Unix</a></li>
<li><a href="#">Windows</a></li>
</ol>
</li>
<li><a href="#">服务器</a>
<ol>
<li><a href="#">Tomcat</a></li>
<li><a href="#">WebSphere</a></li>
<li><a href="#">WebLogicc</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

效果浏览如图：

8.1.2.2 列表样式的设计：

除了基本样式外，还需设计子菜单的隐藏和显示方式。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
</style>
</head>
<body>
<center>
<h3>下拉子菜单导航栏</h3>
</center>
<hr>
<nav>
<div id="nav">
<ul>
<li><a href="#">前端</a>
<ol>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ol>
</li>
<li><a href="#">后台</a>
<ol>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
</ol>
</li>
<li><a href="#">移动应用</a>
<ol>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
</ol>
</li>
<li><a href="#">数据库</a>
<ol>
<li><a href="#">MySql</a></li>
<li><a href="#">SqlServer</a></li>
</ol>
</li>
<li><a href="#">操作系统</a>
<ol>
<li><a href="#">Linux</a></li>
<li><a href="#">Unix</a></li>
<li><a href="#">Windows</a></li>
</ol>
</li>
<li><a href="#">服务器</a>
<ol>
<li><a href="#">Tomcat</a></li>
<li><a href="#">WebSphere</a></li>
<li><a href="#">WebLogicc</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

效果浏览如图：

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

使用CSS的display: none和display: block来控制子菜单的显示和隐藏，以及通过JavaScript或CSS的:hover伪类来实现动态效果。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
 ul li ol{
 display: none;
 }
 ul li:hover ol{
 display: block;
 }
</style>
</head>
<body>
<center>
<h3>下拉子菜单导航栏</h3>
</center>
<hr>
<nav>
<div id="nav">
<ul>
<li><a href="#">前端</a>
<ol>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ol>
</li>
<li><a href="#">后台</a>
<ol>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
</ol>
</li>
<li><a href="#">移动应用</a>
<ol>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
</ol>
</li>
<li><a href="#">数据库</a>
<ol>
<li><a href="#">MySql</a></li>
<li><a href="#">SqlServer</a></li>
</ol>
</li>
<li><a href="#">操作系统</a>
<ol>
<li><a href="#">Linux</a></li>
<li><a href="#">Unix</a></li>
<li><a href="#">Windows</a></li>
</ol>
</li>
<li><a href="#">服务器</a>
<ol>
<li><a href="#">Tomcat</a></li>
<li><a href="#">WebSphere</a></li>
<li><a href="#">WebLogicc</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

浏览效果如图：

8.1.2.4 DIV样式的设计：

可能需要额外的<div>来包裹导航栏或子菜单，以便进行更精细的布局和样式控制。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
}
ul li ol li{
float: none;
}
 ul li ol{
 display: none;
 }
 ul li:hover ol{
 display: block;
 }
 a{
 display: block;
 width: 80px;
 padding: 10px;
 text-align: center;
 text-decoration: none;
 }
</style>
</head>
<body>
<center>
<h3>下拉子菜单导航栏</h3>
</center>
<hr>
<nav>
<div id="nav">
<ul>
<li><a href="#">前端</a>
<ol>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ol>
</li>
<li><a href="#">后台</a>
<ol>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
</ol>
</li>
<li><a href="#">移动应用</a>
<ol>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
</ol>
</li>
<li><a href="#">数据库</a>
<ol>
<li><a href="#">MySql</a></li>
<li><a href="#">SqlServer</a></li>
</ol>
</li>
<li><a href="#">操作系统</a>
<ol>
<li><a href="#">Linux</a></li>
<li><a href="#">Unix</a></li>
<li><a href="#">Windows</a></li>
</ol>
</li>
<li><a href="#">服务器</a>
<ol>
<li><a href="#">Tomcat</a></li>
<li><a href="#">WebSphere</a></li>
<li><a href="#">WebLogicc</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

浏览效果如图：

8.1.2.5 超链接样式的设计：

设计子菜单链接的样式，确保与主菜单链接风格一致或有所区分。

示例：

ul li a{
 background-color:#ff0000 ;
 color: #dddddd;
 }
 ul li ol li a{
 background-color: #dddddd;
 color: #ff0000;
 }

浏览效果如图：

8.1.2.6 鼠标事件：

为下拉子菜单添加鼠标悬停和点击事件，确保用户交互的流畅性。

示例：

ul li a:hover,ul li a:active{
 border-bottom: #22aaff solid 5px;
 }
 ul li ol li a:hover,ul li ol li a:active{
 background-color: #ff0000;
 color: #dddddd;
 border-bottom: none;
 }

浏览效果如图：

8.2 纵向侧边导航栏

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

8.2.1.1 导航栏的创建：

使用<nav>和垂直排列的<ul>/<li>结构。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纵向侧边导航栏</title>
<style type="text/css">

</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所以商品分类</h3>
<ul>
<li><a>家具用品</a></li>
<li><a>手机数码</a></li>
<li><a>家用电器</a></li>
<li><a>厨卫工具</a></li>
<li><a>汽车用品</a></li>
<li><a>运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

浏览效果如图：

8.2.1.2 DIV样式的设计：

可能使用<div>来包裹导航栏，以便进行布局和样式调整。

示例：

<style type="text/css">
#nav{
width: 150px;
background-color: #aaccff;
}
h3{
text-align: center;
line-height: 50px;
}
</style>

浏览效果如图：

8.2.1.3 列表样式的设计：

设置列表项为垂直排列，并去除默认样式。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纵向侧边导航栏</title>
<style type="text/css">
#nav{
width: 150px;
background-color: #aaccff;
}
h3{
text-align: center;
line-height: 50px;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
line-height: 40px;
border: #aaffff solid 2px;
text-align: center;
}
</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所以商品分类</h3>
<ul>
<li><a>家具用品</a></li>
<li><a>手机数码</a></li>
<li><a>家用电器</a></li>
<li><a>厨卫工具</a></li>
<li><a>汽车用品</a></li>
<li><a>运动器材</a></li>
</ul>
</div>
</nav>
</body>
</html>

浏览效果如图：

8.2.1.4 超链接样式的设计：

设计纵向导航链接的样式。

示例：

a{
display: block;
line-height: 40px;
border: #aaffff solid 2px;
text-align: center;
text-decoration: none;
}
a:hover,a:active{
background-color: #ff0000;
color: #dddddd;
}

浏览效果如图：

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

8.2.2.1 导航栏的创建：

与简单纵向导航栏类似，但包含嵌套的<ul>以创建出式子菜单。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>出式子导航栏的制作</title>
<style type="text/css">

</style>
</head>
<body>
<nav>
<div id="nav">
<h3 class="tit">所有商品分类</h3>
<ul>
<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">收纳箱</a></li>
<li><a href="#">雨伞雨具</a></li>
<li><a href="#">家务清洁</a></li>
<li><a href="#">茶具</a></li>
<li><a href="#">环保袋</a></li>
</ol>
</li>
<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">电脑主机</a></li>
<li><a href="#">鼠标键盘</a></li>
<li><a href="#">无人机</a></li>
<li><a href="#">数码相机</a></li>
</ol>
</li>
<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">吸尘器</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">冰箱</a></li>
</ol>
</li>
<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">消毒柜</a></li>
<li><a href="#">抽油烟机</a></li>
<li><a href="#">碗柜</a></li>
<li><a href="#">花洒笼头</a></li>
<li><a href="#">洗手台</a></li>
</ol>
</li>
<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">打蜡服务</a></li>
<li><a href="#">超级试驾</a></li>
<li><a href="#">导航仪</a></li>
<li><a href="#">机油</a></li>
</ol>
</li>
<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
<ol>
<li><a href="#">跑鞋</a></li>
<li><a href="#">帐篷</a></li>
<li><a href="#">山地车</a></li>
</ol>
</li>
</ul>
</div>
</nav>
</body>
</html>

浏览效果如图：

8.2.2.2 DIV样式的设计：

用于包裹导航栏和子菜单，以便进行布局和样式控制。

示例：

<style type="text/css">
#nav{
width: 150px;
background-color: #ff0000;
padding: 10px;
}
h3{
text-align: center;
color: #dddddd;
}
</style>

浏览效果如图：

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

使用CSS或JavaScript控制子菜单的显示和隐藏。

示例：

ul li{
height: 30px;
line-height: 30px;
text-align: center;
position: relative;

}
ul li ol{
display: none;
position: absolute;
left: 150px;
width: 120px;
background-color: #eeeeee;
color: #00cc33;
}
ul li:hover ol{
display: block;

}

浏览效果如图：

8.2.2.4 列表样式的设计：

为子菜单列表项设计样式，确保与主菜单一致或有所区分。

示例：

               ul li{
height: 30px;
line-height: 30px;
text-align: center;
position: relative;

}
ul li ol {
display: none;
position: absolute;
top: -1px;
left: 150px;
width: 120px;
background-color: #eeeeee;
color: #00cc33;
text-decoration: none;

浏览效果如图：

8.2.2.5 超链接样式的设计：

设计子菜单链接的样式。

示例：

ul li{
height: 30px;
line-height: 30px;
text-align: center;
position: relative;

}
ul li ol {
display: none;
position: absolute;
top: -1px;
left: 150px;
width: 120px;
background-color: #eeeeee;
color: #00cc33;
text-decoration: none;
}
ul li:hover ol{
display: block;

}
ul li a{

width: 150px;
background-color: #eeeeee;
color: #00cc33;


}
ul li a:hover,ul li a:active{
background:url(img/bg2.JPG);

}
ul li ol a:hover,ul li ol a:active{
background:#00cc33;
color: #eeeeee;

浏览效果如图：

8.3 底部固定导航栏

8.3.1 导航栏的创建：

使用<nav>标签和<ul>/<li>结构。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部固定导航栏</title>
</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.2 列表样式的设计：

设置列表项的布局和样式。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部固定导航栏</title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
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 菜单固定底部的设计：

使用CSS的position: fixed; bottom: 0;等属性将导航栏固定在页面底部。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部固定导航栏</title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float: left;
}
a{
display: block;
width: 80px;
padding: 10px;
text-decoration: none;
text-align: center;
}
a:link,a:visited{
background-color:#000000 ;
color: #ffffff;
}
a:hover,a:active{
background-color: #ffffff;
color: #000000;
}
.fix-footer{
position: fixed;
bottom: 0%;

}
</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.4 超链接样式的设计：

设计底部导航链接的样式。

a{
display: block;
width: 80px;
padding: 10px;
text-decoration: none;
text-align: center;
}

浏览效果如图：

8.3.5 鼠标事件：

添加鼠标悬停和点击事件。

示例：

a:link,a:visited{
background-color:#000000 ;
color: #ffffff;
}
a:hover,a:active{
background-color: #ffffff;
color: #000000;
}

浏览效果如图：

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

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优名养生馆</title>
<style type="text/css">
body{
background-image: url(img/bg.jpg);

 }
 ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 li{
 width: 25%;
 float: left;
 line-height: 50px;
 }
 img{
 margin-top: 70px;
 margin-right: 40px;
 }
 .footer{
 height: 50px;
 width: 100%;
 background-image: url(img/footer-bg.jpg);
 border-top: 3px solid gray;
 z-index: 9998;
 position: fixed;
 bottom: 0;
 left: 0;
 }
 .footer-top{
 height: 90px;
 width: 90px;
 text-align: center;
 line-height: 90px;
 z-index: 9999;
 position: fixed;
 bottom: 0;
 left: 45%;
 }
 .footer-top a{
 border-radius: 90px;
 }
 .footer-top a:link,a:valid{
 display: block;
 font-size: 20px;
 color: brown;
 text-decoration: none;
 font-weight: bold;
 border-top: 3px solid gray;
 background-image: url(img/footer-top-bg1.jpg);
 
 }
 .footer-top a:hover{
 background-image: url(img/footer-top-bg2.jpg);
 color: wheat;
 }
 .footer a:link,a:visited{
 display: block;
 font-size: 20px;
 color: brown;
 text-decoration: none;
 font-weight: bold;
 }
 .footer a:hover{
 background-color: darkgray;
 border-left: 2px solid white;
 border-right: 2px solid white;
 font-size: 16px;
 color: red;
 }
</style>
</head>
<body>
<div>
<marquee direction="rifht" scrollamount="20">
<img src="img/marquee1.jpg"/>
<img src="img/marquee2.jpg"/>
<img src="img/marquee3.jpg"/>
</marquee>
</div>
<nav>
<div class="footer-top">
<a href="index.html">进入官网</a>
</div>
<div class="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>

浏览效果如图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优名养生馆</title>
<style type="text/css">
body{
background-image:url(img/bg.jpg);
}
.all{
margin: 0px auto;
width: 900px;
}
.top{
width: 900px;
height: 225px;
background-image: url(img/top-bg.jpg);
}
.cent{
width: 320px;
margin-left: auto;
margin-right: auto;
font-size: 58px;
font-family: "楷体";
color: lemonchiffon;
font-style: italic;
}
.nav{
width: 200px;
float: left;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
color: saddlebrown;
}
.main{
width: 700px;
height: 300px;
float: left;
margin-top: 10px;
}
.footer{
font-size: 14px;
font-weight: bold;
color: brown;
text-align: center;
clear: both;
background-image: url(img/footer-bg.jpg);
}
p{
color: brown;
font-size: 16px;
}
img{
margin: 15px;
}
ul{
list-style-type: none;
}
li{
height: 22px;
}
a:link{
font-size: 16px;
text-decoration: none;
color: brown;
}
a:hover{
background-color: burlywood;
color: white;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<br />
<div class="cent">优名养生馆</div>
</div>
<nav>
<div class="nav">
<table>
<tr>养生之道</tr>
<tr>
<ul>
<li><a href="#">运动养生</a></li>
<li><a href="#">四季养生</a></li>
<li><a href="#">健康养生</a></li>
</ul>
</tr>
<tr>中医养生</tr>
<tr>
<ul>
<li><a href="#">经络养生</a></li>
<li><a href="#">体质养生</a></li>
<li><a href="#">特色养生</a></li>
</ul>
</tr>
</table>
</div>
</nav>
<div class="main">
<img src="img/main.jpg" align="left"/>
<p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态,下养筋骨。</p >
<p>&emsp;&emsp;养生不是简单的体育锻炼,也不是吃一顿营养餐,打一套太极拳。养生是以
调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期
达到保养、调养,颐养生命,实现人类健康、长寿的目的。</p >
    <p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养
生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理
层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p >
</div>
<hr />
<div class="footer">版权所有&copy;优名养生馆</div>
</div>
</body>
</html>

浏览效果如图：

原文地址：https://blog.csdn.net/2301_79780386/article/details/143695834

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Spring生态学习路径与源码深度探讨
下一篇：现代化可观测性平台（2）

量化交易系统开发-实时行情自动化交易-3.4.3.3.期货市场深度数据
市场深度数据（Order Book Data）是了解市场供需力量的重要工具，显示了不同价位上买卖挂单的数量。通过分析市场深度数据，交易者可以识别支撑位和阻力位，了解流动性情况，为交易策略提供决策依据。
阅读更多2024-11-17
出现“ERR_CONNECTION_REFUSED”的原因及解决方法
通过尝试上述方法，您可能能够解决“ERR_CONNECTION_REFUSED”错误并成功访问该网站。如果问题仍然存在，可能需要进一步深入调查或与技术支持团队联系以解决问题。出现“ERR_CONNEC
阅读更多2024-11-17
聚类分析 | MSADBO优化Spectral谱聚类优化算法
聚类分析 | MSADBO优化Spectral谱聚类优化算法
阅读更多2024-11-17
应用层协议之WebSocket
WebSocket是一种强大的实时通信协议，它的双向通信和持久连接特性使得它在许多实时应用场景中发挥着重要作用。然而，在使用WebSocket时也需要注意其兼容性和安全性问题，并合理评估其对服务器资源
阅读更多2024-11-17
Python的秘密基地--Python基础知识
Python是一种高级、解释型、动态和多范式的编程语言，由Guido van Rossum于1989年底首次发布，1991年正式发布第一个版本。Python以简洁、易读和高效著称，非常适合初学者和专业
阅读更多2024-11-17
泛型11.16
①泛型是Java5的新特性，属于编译阶段的功能。②泛型可以让开发者在编写代码时指定集合中存储的数据类型③泛型作用：1.类型安全：指定了集合中元素的类型之后，编译器会在编译时进行类型检查，如果尝试将错误
阅读更多2024-11-17
Go语言24小时极速学习教程（三）常见标准库用法
常见标准库即Go语言自带的库，这里的所有包都可以通过import直接引入，如果你觉得实在是不好用，那么请先保证你学会了标准库的基础上，再学一下`Gookit`，特别是其中的`GoUtil`，千万不要轻
阅读更多2024-11-17
长连接配置以及断线重连
长连接配置以及断线重连
阅读更多2024-11-17
IDEA2024：右下角显示内存
实时知晓idea内存使用情况。
阅读更多2024-11-17
【Python】如何设置VSCode中的Pylint，消除各种没有必要的警告
最近打开VSCode，编辑之前创建的Python项目，突然发现多了一堆报错和警告，如下图所示。就非常吓人，因为之前这个项目是没有任何报错的，我赶紧试着运行了一下，还好，可以正常运行，那就说明是检测出了
阅读更多2024-11-17

第8章 利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

8.1.1.1 导航栏的创建：

8.1.1.2 列表样式的设计：

8.1.1.3 超链接样式的设计：

8.1.1.4 鼠标事件：

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

8.1.2.1 导航栏的创建：

8.1.2.2 列表样式的设计：

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

8.1.2.4 DIV样式的设计：

8.1.2.5 超链接样式的设计：

​​​​​​​8.1.2.6 鼠标事件：

8.2 纵向侧边导航栏

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

8.2.1.1 导航栏的创建：

8.2.1.2 DIV样式的设计：

8.2.1.3 列表样式的设计：

8.2.1.4 超链接样式的设计：

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

8.2.2.1 导航栏的创建：

8.2.2.2 DIV样式的设计：

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

8.2.2.4 列表样式的设计：

8.2.2.5 超链接样式的设计：

8.3 底部固定导航栏

8.3.1 导航栏的创建：

8.3.2 列表样式的设计：

8.3.3 菜单固定底部的设计：

8.3.4 超链接样式的设计：

8.3.5 鼠标事件：

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

相关文章

第8章利用CSS制作导航菜单

8.1.2.6 鼠标事件：