CSS高级技巧:滑动门技术



上一篇CSS教程 文章:CSS高级技巧:图片替换 滑动门(Sliding Doors)
还是决定把滑动门单独提作一种单独的技术.
它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现.

滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果.

前面所述的圆角矩形只是它的一种实现方式而已. 真正的滑动门只需要2组标签就可以完成:
HTML代码如下:

<ul>
<li><a href="http://www.phpstudy.net" title="">phpStudy</a></li>
</ul>

CSS代码大致如下:

#header li { float:left; background:url("left_both.gif")no-repeat left top; margin:0; padding:0 0 0 9px; border-bottom:1px solid #765; } #header a { float:left; display:block; background:url("right_both.gif")no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; }

完全符合语义, 而且没有多余的标签, 非常完美, 还能通过a:hover来进一步制作翻转效果.推荐!
下一篇CSS教程 文章:CSS高级技巧:文字环绕图片



相关阅读:
参照学习表 DOS和Linux常用命令的对比
spool导出实例
js cookies实现简单统计访问次数
修复Bug大幅升级 Sun发布MySQL5.1版
Windows Server 2008 R2的八大优势
ie6和ie7下链接图片点不中问题讨论
数据访问函数库 for ado.net2.0
自定义链接后端数据库
PHP 调试工具Debug Tools
Linux yum安装过程图文详解
js prototype 格式化数字 By shawl.qiu
Javascript 的addEventListener()及attachEvent()区别分析
php学习笔记之 函数声明(二)
通过Grub启动硬盘上的Linux ISO安装文件
快速导航

Copyright © 2016 phpStudy |