8.1 水平顶部导航栏
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
我们此时可以发现它的样子和我们平时使用的导航栏不一样，因为这只是第一步，我们接下来再给它稍微修饰一下。
<!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>
8.1.1.2 列表样式的设计
此时我们为了更贴合导航栏，所以去掉了下划线，并且从竖排变为了横排。但是还不够，还需要更多。
<style type="text/css">
li{
float: left;
}
ul{
list-style-type: none;
}
</style>
8.1.1.3 超链接样式的设计
我们可以看见，我们所写的这个它的紧密贴合在一起的，此时我们就需要通过设计来分开它们。这个时候可以用到我们之前所学的居中设计。
<style type="text/css">
li{
float: left;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
display: block;
width: 100px;
padding: 10px;
text-align: center;
}
</style>
8.1.1.4 鼠标事件
当我们鼠标悬停于导航栏的时候，它应该有变化，不然的话太单调了。前面我们也有学过这种类型，就是有关鼠标的样式设计。
a:link,a:visited{
background-color: #ff0000;
color: #ffffff;
}
a:hover,a:active{
background-color: #ffffff;
color: #ff0000;
}
8.1.2 下拉子菜单导航栏的设计与实现
8.1.2.1导航栏的创建
通过在<nav>首尾标签中添加无序列表<ul>标签，以及列表选项<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> 
8.1.2.2 列表样式的设计
列表标签的样式设计，是通过前面所学的内容对于其进行进一步更整洁的美化。
a{
width: 200px;
padding: 110px;
}
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
}
ul li ol li{
float: none;
} 
8.1.2.3 二级菜单的隐藏和显示设计
导航栏不会就这样摆在上面的，我们需要将他们内容隐藏。
none(隐藏，不需要)，block（显示出来）
ul li ol{
display: none;
}
ul li:hover ol{
display: block;
}
8.1.2.4 DIV样式的设计
我们现在需要让它更好看，更趋近于大众所设计的样式。
a{
text-decoration: none;
display: block;
width: 200px;
text-align: center;
padding: 20px;
}8.1.2.5 超链接样式的设计
超链接的设计样式在之前的章节有提及。
ul li a{
background-color: #ff0000;
color: #ffffff;
}
ul li ol li a{
background-color: #ffffff;
color: #ff0000;
}
8.1.2.6 鼠标事件
具体类型样式分为四种，链接没有被点击时（a:link），悬停链接时（a:hover），点击时（a:active），点击后（a:visited）。
ul li a:hover,ul li a:active{
border-bottom: #aaccff solid 5px;
}
ul li ol li a:hover,ul li ol li a:active{
border-bottom: none;
background-color: #ff0000;
color: #eeeeee;
}
8.2 纵向侧边导航栏
8.2.1 简单纵向导航栏的设计与实现
我们首先要明白要做成什么样子的，侧边导航栏，我们要根据其样式去修改。
8.2.1.1导航栏的创建
我们先敲出一段简易的代码用来示例，如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纵向导航栏</title>
<style type="text/css">
</style>
</head>
<body>
<nav>
<div id="nav">
<h3>所有商品分类</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>
8.2.1.2 DIV样式的设计
先打出整体背景和标题栏的样式，使其接近我们所熟知的侧边导航栏样式。
<style type="text/css">
div{
background-color: #33cc00;
width: 120px;
}
h3{
color: #ffffff;
text-align: center;
}
</style>
8.2.1.3 列表样式的设计
我们先一步步的去修改，list-style-type:设置为none使前面的小圆点消失，之后设置内外边距均为零，使给小圆点预留的空间消失。
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
8.2.1.4 超链接样式的设计
按照我们之前所学内容，有四种属性可以更改鼠标移动过去时链接的样式。
a:link,a:visited{
background-color: #eeeeee;
color: #33cc00;
}
a:hover,a:active{
background-color: #33cc00;
color: #eeeeee;
}
只设置颜色的话是否未免太过于单调，我们可以用background-image:来指定图片插入。但要注意的是，设置了background-image:的话就不能同时给内容设置背景色，不然会遮盖住。所以要么删除，要么注释掉。
a:link,a:visited{
background-color: #eeeeee;
color: #33cc00;
}
a:hover,a:active{
/* background-color: #33cc00;
color: #eeeeee; */
background-image:url(img/bg.JPG);
}
8.2.2 出式子菜单导航栏的设计与实现
8.2.2.1 导航栏的创建
先创建一个样式。
<!--示例程序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>
8.2.2.2 DIV样式的设计
先给它简易的设置样式，因为里面其实是有图的，不过因为页面的原因在另一边。所以我们要设置盒子都内边距，让它从另一端过来。如下所示
<style type="text/css">
div{
background-color: #33cc00;
width: 150px;
padding: 10px;
}
h3{
color: #eeeeee;
text-align: center;
}
</style>
8.2.2.4 列表样式的设计
因为它现在还是很像列表的，我们要把它设置的不像列表。
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
8.2.2.3 二级菜单的隐藏和显示设计
我们现在要将侧边那一列隐藏起来，现在先不管好不好看，一步一步来。
ul li ol{
display:none;
}
ul li:hover ol{
display:block;
}
8.2.2.5 超链接样式的设计
这里就不详细说了，上述内容有写。不过要记得的是，子菜单栏的背景色和图案样式不能同时存在。因为电脑的不同，所需要给予的数值也会不同，要注意自己去尝试。
a{
display:block;
width: 150px;
line-height; 30px;
text-decoration: none;
text-align: center;
background-color: #eeeeee;
color: #33cc00;
}
ul li a:hover{
background-image: url(img/bg2.JPG);
}
ul li ol lo a:hover{
background-color: #33cc00;
color: #eeeeee;
background-image: none;
}
8.3 底部固定导航栏
我们需要先将下列代码敲出来，然后再在这个基础上面进行修改。
我们的目的是要将它变成水平导航栏，然后定位到最底下。
8.3.1 导航栏的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部导航栏</title>
<style type="text/css"></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 列表样式的设计
去掉最前面的小点，还有让他们浮动，让它们不像一个列表。
<!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 超链接样式的设计
设计居中，以及去掉下划线等样式，进一步修改。
a{
display: block;/* 单独编辑宽度等是无效的,所以需要这个. */
width: 80px;
padding: 10px;
text-align: center;
text-decoration: none;
}
8.3.4 鼠标事件
修饰a标签的状态，使其更像导航栏。
/* 鼠标事件 */
a:link, a:visited{
backgroung-color: #0000ff;
color: #ffff00;
}
a:hover, a:active{
background-color: #ffff00;
color: #0000ff;
}
8.3.5 菜单固定底部设计
在第五章，5.4中有写如何固定，我们可以使用--position:fixed;--进行定位，因为它不会随着内容改变位置。
.fix-footer{
position: fixed;
bottom: 0%;
}
8.4 综合案例——优名养生馆
8.4.1 封面页的设计与实现
代码示例
<!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;
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: #a52a5a;
text-decoration: none;
font-weight: bold;
border-top: 3px solid #808080;
background-image: url(img/footer-top-bg1.jpg);
}
.footer-top a:hover{
background-image: url(img/footer-top-bg2.jpg);
color: #ffffff;
}
.footer a:link, a:visited{
display: block;
font-size: 20px;
color: #a52a5a;
text-decoration: none;
font-weight: bold;
}
.footer a:hover{
background-color: #a9a9a9;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
font-size: 16px;
color: #ff0000;
}
</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="综合案例二.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>
8.4.2 主页的设计与实现
代码示例
<!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: #fffacd;
font-style: italic;
}
.nav{
width: 200px;
float: left;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
color: #8b4513;
}
.main{
width: 700px;
height: 300px;
float: left;
margin-top: 10px;
}
.footer{
font-size: 14px;
font-weight: bold;
color: #a52a2a;
text-align: center;
clear: both;
background-image: url(img/footer-bg.jpg);
}
p{
color: #a52a2a;
font-size: 16px;
}
img{
margin: 15px;
}
ul{
list-style-type: none;
}
li{
height: 22px;
}
a:link{
font-size: 16px;
text-decoration: none;
color: #a52a2a;
}
a:hover{
background-color: #deb887;
color: #ffffff;
}
</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>  古人云：善养生者，上养神智，中养形态，下养筋骨。</p>
<p>  养生不是简单的体育锻炼，也不是吃一顿营养餐，打一套太极拳。养生是以调阴阳，和气血，保精神为原则,运用调神，导引吐纳，四时调摄，食养，药养，节欲，服气辟谷等多种方法，以期达到保养，调养，颐养生命,实现人类健康，长寿的目的。</p>
<p>  养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段养护人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心养护活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜，养体，养老;心理层面的养生包括养心，养性，养神。</p>
</div>
<hr/>
<div class="footer">版权所有©优名养生馆</div>
</div>
</body>
</html>
扫一扫
3913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
