斜角滑动门导航条 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
投稿猜你喜欢
亲测十分靠谱下面是解决该问题的方法第一步：关闭SIP系统保护1.重启系统时按住Command+R进入恢复模式(记住是你在重新启动时，不是启动- 前言上篇文章 一文掌握 Go 文件的读取操作 介绍了如何使用 Go os 包和 bufio 包里的几个函数和方法，通过案例展示如
- javascript实现炫酷的拖动分页js<html><head><title>拖动分页</tit
- 这里以将Apache的日志写入到ElasticSearch为例，来演示一下如何使用Python将Spark数据导入到ES中。实际工作中，由于
- 新的 Python 版本推出了有趣的新功能。Python 是当今最流行的编程语言之一。它有广泛的领域和应用，从学习计算机科学的基础，到执行复
- share一些python实现的code#!/usr/bin/env python#coding=utf-8import cv2img =
- 本文实例讲述了PHP函数extension_loaded()用法。分享给大家供大家参考。具体分析如下：extension_loaded —
- 一、问题在windows上面使用eclipse开发的项目在windows上面运行一切正常，部署到腾讯云时出现向MySQL数据库中插入数据是中
- 介绍UliPad是一个国人开发的python轻量级编辑器，导向和灵活的编程器。它如类浏览器，代码自动完成许多功能，如：HTML查看器，目录浏
- mysql慢查询日志对于跟踪有问题的查询非常有用，可以分析出当前程序里是否有很耗费资源的sql语句，这是一个有用的日志。它对于性能的影响不大
- 在工作和学习中如果同时传输多个文件，大的安装包，python提供了一种无线传输的方法，开启一个本地http服务器,同一局域网下可方便访问 经
- 1、DataFrame返回的不是对象。2、DataFrame查出来的数据返回的是一个dataframe数据集。3、DataFrame只有遇见
- 在设计主键的时候往往需要考虑以下几点： 1.无意义性：此处无意义是从用户的角度来定义的。这种无意义在一定程度上也会减少数据库的信息冗余。常常
- 由于asp中是使用双引号作为字符串的开始和结束标志的，单一个字符串中的双引号出现次数大于两个时，程序就有可能运行错误。asp中是怎么输出引号
- SQL Server 出现Error: 1326错误我们在在使用SQL Server时都会遇到使用SQL Server Management
- django创建自定义模板处理器:一、需求来源：在django开发中，页面是通过template（模板）进行渲染的，对于一些数据，可以通过{
- 开启Web服务1.基本方式Python中自带了简单的服务器程序，能较容易地打开服务。在python3中将原来的SimpleHTTPServe
- windows.open()方法详解：window.open(URL,name,features,replace)用于载入指定的URL到新的
- 最近在用Pycharm学习Python的时候，总有两个地方感觉不是很舒服，比如调用方法的时候区分大小写（thread就不会出现Thread，
- 上传问题可以说是网络编程中经常遇到的，也是一个很重要的问题，我们不仅要实现上传文件，图片等基本功能，还有考虑到上传程序的安全性，本文介绍了一
