css特效三：导航

最新推荐文章于 2024-11-07 11:47:45 发布

p是马甲

最新推荐文章于 2024-11-07 11:47:45 发布

阅读量83

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/liuhai250485/archive/2009/10/31/1593523.html

版权

导航特效，一般采取鼠标经过导航时改变a标签的css样式实现，下面举三个列子说明。

一：通过改变背景颜色，字体大小，边框大小来实现css特效（如图）

同理你可以改变背景图片来实现 CSS 导航特效。

Html和css代码如下：

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nav</title>
<style type="text/css">
#navlist {
 display: inline;
 list-style: none;

}
#navlist li {
 float: left;
 width: 100px;
 height:40px;
 text-align:center;
}
#navlist li a {
 width: 90px;
 height:30px;
 padding:5px;
 display:block;
 color:#fff;
 text-decoration: none;
 font-size:12px;
 font-weight:bold;
 line-height:30px;
 border-right:1px solid #fff;
 border-left:1px solid #fff;
 border-top: 5px solid #fff;
 border-bottom: 5px solid #fff;
 background-color:#333333;
}
#navlist li a:hover {
 border-top: 5px solid #555555;
 border-bottom: 5px solid #555555;
 background:#555555;
 font-size:14px;
 font-weight:bold;
}

</style>
</head>

<body>
<ul id="navlist">
 <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>

二：通过css sprites来实现导航背景图片改变的css特效（如图）

原理：通过background-position定位到背景图片的不同位置，然后配合hover改变背景位置实现此效果。

代码如下

html

Code
<div id="container">

<ul id="nav">
<li id="nav_home"><a href="#">首页</a></li>
<li id="nav_about"><a href="#">公司简介</a></li>
<li id="nav_products"><a href="#">产品展示</a></li>
<li id="nav_services"><a href="#">最新动态</a></li>
<li id="nav_contact"><a href="#">联系我们</a></li>
</ul>

</div>

css

Code
li#nav_home a {
left: 0;
width: 150px;
background-position: 0 0;
}
li#nav_about a {
left: 145px;
width: 145px;
background-position: -145px 0;
}

li#nav_products a {
left: 290px;
width: 145px;
background-position: -290px 0;
}

li#nav_services a {
left: 435px;
width: 145px;
background-position: -435px 0;
}

li#nav_contact a {
left: 580px;
width: 148px;
background-position: -585px 0;
}
/*设置a中背景的在hover下的状态*/
li#nav_home a:hover {
background-position: 0 -55px;
}
li#nav_about a:hover {
background-position: -145px -55px;
}

li#nav_products a:hover {
background-position: -290px -55px;
}

li#nav_services a:hover {
background-position: -435px -55px;
}

li#nav_contact a:hover {
background-position: -580px -55px;
}

三：导航的动画效果（如图）

通过a标签中的span标签在hover状态下把背景绝对定位到导航之上，产生动画效果。此效果要从两方面来分析。

一．Html结构

Code
<ul >
<li><a href="#" class="link">首页</a><a href="#"></a><a

href="#"></a> <a href="#"></a><a href="#"></a> <a

href="#"></a><a href="#"></a><a href="#"></a> <a

href="#"></a><a href="#"></a> <a

href="#"></a></li></ul>

二．Css

文件下载：http://files.cnblogs.com/liuhai250485/NAV.rar

转载于:https://www.cnblogs.com/liuhai250485/archive/2009/10/31/1593523.html