首页 > 其他分享 >第8章利用CSS制作导航菜单

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

时间：2024-11-13 17:19:43浏览次数：3  
标签：none 菜单 color li ul 导航 样式 CSS


8.1 水平顶部导航栏


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


1导航栏的创建

        <nav>

        在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有
列表<al>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接
就址当前设置为空链接。

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

 2 列表样式的设计

        此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head>
签中进行声明，对列表样式进行改变。
        使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0,为了使列表元素能够在同一行显示，为<li>列表选项定义浮动效果。

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


3 超链接样式的设计

        利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链
接未被访问和已访问状态。并且，将display属性设置为block，使得超链接成为块级元素。

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


4 鼠标事件

        利用CSS为a：hover和a：active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

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

        link,visited:

        hover,active:


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


1导航栏的创建

        仍然在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表
<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当
前设置为空链接。

<!--示例程序8.2-->
<!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>


2 列表样式的设计

        此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CS5在<head>标签中进行声明，对列表样式进行改变。
        同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为<li>列表选项定义浮动效果，设置 text-decoration属性 none。

<!--示例程序8.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>


 

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

        为了使有序列表的二级菜单隐藏起来，需要设置display 属性为 none。

        为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。

        为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜
  单的相对定位。

<!--示例程序8.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;
			}
			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>

光标没移动到a标签:

光标移动到a标签:


4 DIV样式的设计

   对内容所处的div样式进行设置。

<!--示例程序8.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;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			#nav{
				width: 600px;
				height: 40px;
				background-color: lightcyan;
				border: 5px solid blue;
				margin: 0 auto;
			}
		</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>


5 超链接样式的设计

        利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链
接未被访问和已访问状态。并且，将display属性设置为block，使得超链接成为块级元素。

<!--示例程序8.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;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				width: 80px;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #dddddd;
			}
			ul li ol li a{
				background-color: #dddddd;
				color: #ff0000;
			}
			
		</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>

光标没移动到a标签:

光标移动到a标签:


6 鼠标事件

        利用CSS为a：hover和a：active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

​<!--示例程序8.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;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				width: 80px;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #dddddd;
			}
			ul li ol li a{
				background-color: #dddddd;
				color: #ff0000;
			}
			ul li a:hover,ul li a:visited{
				border-bottom: #22aaff solid 5px;
				font-weight: 900;
			}
			ul li ol li a:hover,ul li ol li a:visited{
				border-bottom: none;
				background-color: #ff0000;
				color: white;
			}
		</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.2 纵向侧边导航栏


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


1导航栏的创建

        普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级
速。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选
项>标签创建菜单选项。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>


2 DIV样式的设计

        对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS
进行设置，包括高度、行高、颜色和对齐方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style>
			/* 8.2.1.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>


3 列表样式的设计

        此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用 ist-style-type属性去掉默认标记，设置 margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。


4 超链接样式的设计

        利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链
接未被访问和已访问状态。同时，利用CSS为a：hover和a：active 进行样式设置，表示鼠
标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为
快级元素，以及字体CSS样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style>
			/* 8.2.1.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 40px;
				background-color: #eeeeee;
				color: #00cc33;
				text-align: center;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style>
			/* 8.2.1.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #00cc33;
			}
			a:hover,a:active{
				background-color: #00cc33;
				color: #eeeeee;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>

link,visited:

hover,active:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向侧边导航栏</title>
		<style>
			/* 8.2.1.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			/* 8.2.1.3 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.1.4 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #00cc33;
			}
			a:hover,a:active{
				/* background-color: #00cc33;
				color: #eeeeee; */
				background: url(img/bg.JPG) no-repeat;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>

修改后hover,active:


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


1 导航栏的创建

        在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表
<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当
前设置为空链接。

<!--示例程序8.4-->
<!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>


2 DIV样式的设计

        对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS
进行设置，包括高度、行高、颜色和对齐方式。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
		</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>


 

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

        为了使有序列表的二级菜单隐藏起来，需要设置display属性为 none。
        为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。
        为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜
单的相对定位。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			/* 8.2.2.4 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li{
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				left: 150px;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.2.2.5 超链接样式的设计 */
		</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>


4 列表样式的设计

        此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用
list-style-type属性去掉默认标记，设置margin 和 padding的属性值。并同时给列表选项添加
背景颜色，使大小标题容易区分。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</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>


5 超链接样式的设计

        利用CSS为超链接重新设置样式，对超链接的a: link和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a: hover和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			/* 8.2.2.2 DIV样式的设计 */
			#nav{
				width: 150px;
				padding: 10px;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			/* 8.2.2.4 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li{
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				left: 150px;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.2.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				width: 150px;
				line-height: 30px;
			}
			ul li a:hover,ul li a:active{
				background: url(img/bg2.JPG);
			}
			ul li ol li a:hover,ul li ol li a:active{
				background-color: #00cc33;
				color: #ffffff;
				background-image: none;
			}
		</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>

ul li a:hover,ul li a:active:

 

ul li ol li a:hover,ul li ol li a:active:


 

 8.3 底部固定导航栏


8.3.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有列表<li>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接就址当前设置为空链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
		/* 8.3.1 导航栏的创建 */
		/* 8.3.2 列表样式的设计 */
		/* 8.3.3 菜单固定底部的设计 */
		/* 8.3.4 超链接样式的设计 */
		/* 8.3.5 鼠标事件 */
		</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.2 列表样式的设计

        此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head>
签中进行声明，对列表样式进行改变。
        使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0,为了使列表元素能够在同一行显示，为<li>列表选项定义浮动效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
		/* 8.3.1 导航栏的创建 */
		/* 8.3.2 列表样式的设计 */
		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 菜单固定底部的设计

        为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式
笺，为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航
菜单固定于页面底部，需要设置位置属性position和各个方向的位置值。

​
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
		/* 8.3.1 导航栏的创建 */
		/* 8.3.2 列表样式的设计 */
		ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li{
			float: left;
		}
		/* 8.3.3 菜单固定底部的设计 */
		.fix-footer{
			position: fixed;
			bottom: 0;
		}
		/* 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: #0000ff;
			color: #ffff00;
		}
		a:hover,a:active{
			background-color: #ffff00;
			color: #0000ff;
		}
		</style>
	</head>
	<body>
		<br/>
		<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 超链接样式的设计

        利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链
        接未被访问和已访问状态。并且，将display属性设置为block，使得超链接成为块级元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
		/* 8.3.1 导航栏的创建 */
		/* 8.3.2 列表样式的设计 */
		ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li{
			float: left;
		}
		
		/* 8.3.4 超链接样式的设计 */
		a{
			display: block;
			width: 80px;
			padding: 10px;
			text-decoration: none;
			text-align: center;
		}
		
		</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.5 鼠标事件

利用CSS为a：hover和a：active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部固定导航栏</title>
		<style>
		/* 8.3.1 导航栏的创建 */
		/* 8.3.2 列表样式的设计 */
		ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li{
			float: left;
		}
		/* 8.3.3 菜单固定底部的设计 */
		/* 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: #0000ff;
			color: #ffff00;
		}
		a:hover,a:active{
			background-color: #ffff00;
			color: #0000ff;
		}
		</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>

link,visited: 

hover,active:


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


8.4.1 封面页的设计与实现

<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;
		text-align:center;
		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:visited{
		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: white;
		}
		.footer a:link,a:visited{
		display:block;
		font-sine:20px;
		color: brown;
		text-decoration: none;
		foni-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="right" 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="8index综合案例.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>
	</head>
	</body>
</html>

点击进入官网：


8.4.2 主页的设计与实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优名养生馆</title>
	<style>
		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,a:visited{
		font-size: 16px;
		color: brown;
		text-decoration: none;
		}
		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>

标签：none,菜单,color,li,ul,导航,样式,CSS
From： https://blog.csdn.net/2403_87149553/article/details/143745431

相关文章

  • Action动态实现菜单是否有效
     procedureTMainForm.As1Click(Sender:TObject);//涂磊添加20241113JPEG格式导出beginSavePictureDialog.FileName:=ChangeFileExt(SaveDialog.FileName,'.jpg');ifSavePictureDialog.ExecutethenSimpleGraph.SaveAsJPEG(SavePictureDialog.Fi......
  • 免费HTML模板和CSS样式网站汇总
    HTML模板：（注意版权，部分不可商用）1、Tooplate，免费HTML模板下载Download60+FreeHTMLTemplatesforyourwebsitesDownload60+freeHTMLwebsitetemplatesorresponsiveBootstraptemplatesinstantlyfromTooplatehttps://www.tooplate.com/free-templates选中模板......
  • CSS 技巧：如何让 div 完美填充 td 高度
    引言一天哈比比突然冒出一个毫无理头的一个问题:本文就该问题进行展开…原文链接:昆仑虚F2E一、需求说明大致需求如下,当然这里做了些简化有如下初始代码:一个自适应的表格每个单元格的宽度固定200px每个单元格高度则是自适应每个单元格内是一个div标签,d......
  • HTML静态网页成品作业(HTML+CSS)——游戏战地介绍设计制作(4个页面)
    ......
  • html\css 网页立体转动盒子效果
    效果实现 转动方块效果练练手的代码，可能含有可以优化的地方，斟酌自取<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 第八章 利用CSS制作导航菜单
    8.1水平顶部导航栏8.1.1简单水平导航栏的设计与实现8.1.1.1导航栏的创建<nav>标签是HIML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内整合，所以常用<nav>标签在页面上创建导航栏菜单区域。例如,在<nav>的首尾标签之间使用无序列表<u>标签配合列表选项<li>......
  • 第八章 利用CSS制作导航菜单
    8.1水平顶部导航栏8.1.1简单水平导航栏的设计与实现8.1.1.1导航栏的创建8.1.1.2列表样式的设计<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style>li{ float:left; } ul{ list-style-type:n......
  • css3D变换用法
    文章目录CSS3D变换详解及代码案例一、CSS3D变换的基本概念二、3D变换的开启与景深设置三、代码案例CSS3D变换详解及代码案例CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转......
  • css动画用法
    文章目录CSS动画详解及代码案例一、CSS动画的基本概念二、关键帧动画三、动画属性的详细说明四、综合示例CSS动画详解及代码案例CSS动画是前端开发中一种强大的技术，它允许我们在不使用JavaScript的情况下创建平滑的过渡和动画效果。通过改变CSS属性，我们可以控制元......
  • 学生HTML个人网页作业作品 使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计
    ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99