斜角滑动门导航条 DIV+CSS
作者：zishu 来源：子鼠博客 发布时间：2008-07-19 15:45:00
标签：导航,滑动,css
斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的效果无法有很好的支持；所以一边写代码，一边在改图，图片改的比较乱，CSS也没有优化； 但效果出来了； 写出来和大家分享一下；
首先说一下，要实现的目标：
1、滑动门，要兼容每个TAB可能出现的宽度（字数）不统一的问题；
2、后台程序实现起来简单，主要是标记TAB是否被选中；
3、浏览器的兼容以及放在较粗糙的代码环境中，有很好的表现；
开始作了，我先用FW画了一个有点立体感的导航条，基本就是要实现的目标
从后向前写布局
<ul class="tab">
<li class="one"><a href="index.php" class="on"><span>城市首页</span></a></li>
<li><a href="kAAE.php"><span>房屋租售</span></a></li>
<li><a href="kAAI.php"><span>招聘求职</span></a></li>
<li><a href="kAAk.php"><span>同城活动</span></a></li>
<li><a href="kAAU.php"><span>家政服务</span></a></li>
<li><a href="kAAt.php"><span>同城寻缘</span></a></li>
<li><a href="kAAs.php"><span>二手市场</span></a></li>
<li><a href="kAAh.php"><span>车辆买卖</span></a></li>
<li><a href="kAAO.php"><span>学习培训</span></a></li>
</ul>
class = one 部分作为第一个TAB的特殊处理；
class = on 作为选中状态；
开写CSS部分
由于比较简单，我就不写注释了；
<style>
.tab{float:left; font-size:12px; line-height:1.8}
.tab li{display:inline;}
.tab li a{background:url(/file/UploadPic/20087/19/200871916554857.gif) no-repeat;float:left;text-decoration:none;}
.tab li a span{ display:block; background:url(/file/UploadPic/20087/19/200871916554857.gif) no-repeat; padding:5px 10px 5px 20px;}
.tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none}
.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;}
.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}
.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;}
.tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;}
.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}
</style>
用到的图片
效果
0
投稿猜你喜欢
- 英文的文档在这里，详细全面，本文仅为自己的学习笔记，只是试图通过转述加深自己的学习，不详细不全面。由于浏览器之间的差异，所以在JS中监听事件
在SQL Server数据库中，有min server memory与max server memory两个内存选项。数据库管理员合理设置这- 看到豆瓣上有网友提了这个问题，看到回答的人不多，忍不住写了下面的内容。工作中最常用到的统计方法有哪些？根据我自己的经验给举些例子。1.通过一
- 熬了半个通宵，写出了自己的Google SiteMap文件，在这里给出详细编写教程，愿对大家有所帮助。Google SiteMap的作用及协
- 最近碰到一个mysql5数据库的问题。就是一个标准的servlet/tomcat网络应用，后台使用mysql数据库。问题是待机一晚上后，第二
- 作为前端开发工程师，平时对于Dom的查找遍历和操作是家常便饭。对于优秀的前端来说，也肯定早已有了自己的一套方法来封装这些重复的操作。但是，现
- Frontpage中的回车键有三种：enter、shift+enter、ctrl+enter。enter键对应于HTML中的<p>
- 照例使用XMLhttp同步方式获取数据,可是由于网络不稳定,经常造成'死锁'状况,既send之后一直不返回服务器结果,也不出
- 今年年初之时，微软发布了一个针对ActiveX控件的补丁，安装此补丁后的IE6中，当ActiveX控件获得焦点时，IE自动为其套上一个虚线矩
- 方法一:1、将ORACLE软件拷贝到硬盘。 2、将 硬盘目录文件\stage\Components\oracle.swd.jre
- javascript版 俄罗斯方块（Russian box）小游戏，喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍：可以输
- “你如何为成千上万的用户和页面提供CSS？” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会
- 一个很简单的画像素画的小工具,有意思的地方在于可以把画的图案保存成数组,以方便之后快速还原出原图..<!DOCTYPE html PU
- 在asp代码中分页是有点麻烦的事情，个人在在代码编写过程中把分页代码写成了两个函数，虽然在功能上不是很完善，但对于一般的应用应该是满足的了。
- li {list-style-image: url(images/disc.gif);}li的这个样式定义是将列表项目使用图片来代替显示的小
- 面对不断成长的用户，跟随用户的脚步齐步向前，做引起共鸣的改变，去除低龄化的设计，用成熟稳重的心态面对用户。QQBanner自2006 年推出
- 如何使用表单发送电子邮件？邮件也可以用表单格式发送吗？我见一个朋友这样做的。当然可以，用OCXMail就行：formToEmail.htm&
- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行，并可动态生成普通的HTML网页，然后再传送到客户端供浏览的这一特点。我们要在本机上
- Macromedia官方将在其他软件中内建Fireworks技术称为Fireworks技术，网上也称之为内建图片编辑器。Dreamweave
- 去掉html中的table代码 Function OutTable(str) dim a,re&nb
