仿淘宝网站的导航标签效果！
2008-01-22 12:26
351 查看
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 31px;
background-color: #3A81C8;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -29px;
}
#container #title a span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-repeat: no-repeat;
background-position: right -29px;
padding-right: 15px;
padding-left: 15px;
}
#container #title a:hover {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -87px;
}
#container #title a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -87px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #download a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left 0px;
}
#container #title #download a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right 0px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #product a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -58px;
}
#container #title #product a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -58px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #login a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -145px;
}
#container #title #login a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -145px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #contactus a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -174px;
}
#container #title #contactus a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -174px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #homepage .selectli {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -87px;
}
#container #title #homepage a .selectspan {
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -87px;
padding-right: 15px;
padding-left: 15px;
}
#container #content {
border: 1px solid #3A81C8;
height: 200px;
padding: 10px;
}
#container #content ul {
margin: 10px;
}
#container #content li {
margin: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="homepage"><a href="#" class="selectli"><span class="selectspan">首页</span></a></li>
<li id="download"><a href="#"><span>下载中心</span></a></li>
<li id="product"><a href="#"><span>产品介绍</span></a></li>
<li id="login"><a href="#"><span>会员注册与登录</span></a></li>
<li id="contactus"><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content">
<p>仿淘宝网站的导航效果。此方法有几个优点：</p>
<ul>
<li>根据字数自适应项目长度</li>
<li>不同的项目使用不同的颜色来区分</li>
<li>无需使用脚本</li>
<li>背景图片只需要两个图片文件就足够，减少服务器负担<br />
这是使用到的两个图片：
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}
#container #title {
height: 31px;
background-color: #3A81C8;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background-color: #FFFFFF;
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -29px;
}
#container #title a span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-repeat: no-repeat;
background-position: right -29px;
padding-right: 15px;
padding-left: 15px;
}
#container #title a:hover {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -87px;
}
#container #title a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -87px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #download a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left 0px;
}
#container #title #download a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right 0px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #product a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -58px;
}
#container #title #product a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -58px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #login a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -145px;
}
#container #title #login a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -145px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #contactus a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -174px;
}
#container #title #contactus a:hover span{
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -174px;
padding-right: 15px;
padding-left: 15px;
}
#container #title #homepage .selectli {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
background-repeat: no-repeat;
background-position: left -87px;
}
#container #title #homepage a .selectspan {
display: block;
background-image: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif);
background-position: right -87px;
padding-right: 15px;
padding-left: 15px;
}
#container #content {
border: 1px solid #3A81C8;
height: 200px;
padding: 10px;
}
#container #content ul {
margin: 10px;
}
#container #content li {
margin: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="homepage"><a href="#" class="selectli"><span class="selectspan">首页</span></a></li>
<li id="download"><a href="#"><span>下载中心</span></a></li>
<li id="product"><a href="#"><span>产品介绍</span></a></li>
<li id="login"><a href="#"><span>会员注册与登录</span></a></li>
<li id="contactus"><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content">
<p>仿淘宝网站的导航效果。此方法有几个优点：</p>
<ul>
<li>根据字数自适应项目长度</li>
<li>不同的项目使用不同的颜色来区分</li>
<li>无需使用脚本</li>
<li>背景图片只需要两个图片文件就足够，减少服务器负担<br />
这是使用到的两个图片：
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 仿淘宝网站的导航标签效果！
- 仿淘宝网站的导航标签效果
- 仿淘宝网站的TabPage导航效果
- 仿淘宝网站的TabPage导航效果
- 仿淘宝网站的TabPage导航效果
- 雅虎、网易ajax标签导航效果实现
- JS+CSS实现六级网站导航主菜单效果
- Ajax标签导航效果(仿网易首页)
- 淘宝 美团 评论标签效果
- Ajax标签导航效果. (转载自:蟋蟀博客)
- Android仿新闻顶部导航标签切换效果
- 学习使用 CSS3 制作网站面包屑导航效果
- JS+CSS实现电子商务网站导航模板效果代码
- Ajax标签导航效果
- jQuery实现类似标签风格的导航菜单效果代码
- Android ViewPager和Fragment实现顶部导航界面滑动效果、标签下的tab位置
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- jquery02-09图片网站导航效果
- 视频电商网站实战 - 视频上传:标签编辑框效果快速实现
- 源码推荐(0704)：淘宝电影(淘票票)影院电影浏览效果，仿新浪上传图片手势排序/删除/多张照片选择/自定义标签