当前位置：首页 > 资讯 > 技术文档

DIV+CSS 滑动门技术的简单例子

时间：2021-01-12 20:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：DIV+CSS 滑动门技术的简单例子

作者：zishu
以下是[url=http://kijiji.cn/]客齐集[/url]网站上应用的一个导航条.

这次写的没有直接在STYLE里用ID的形式控制.全部用的CLASS形式;

[img]http://files.jb51.net/upload/200736144059566.gif[/img]

[url=http://fenlei.zishu.cn/l.php?c=2104&a=21]
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2107&a=21">车辆买卖</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2101&a=21">同城活动</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2102&a=21">房屋租售</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2105&a=21">同城寻缘</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2103&a=21">跳蚤市场</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2108&a=21">个人服务</a></li>
 <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2106&a=21">学习与培训培训</a></li>
</ul>

[b]效果展示:[/b]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

说明:

1.CSS没有特别的优化.
2.可自动适应多字和少字.例如:学习与培训培训是7个字;
3.用到了两张图片.左边一张.右边一张;
4.加了鼠标移上去跳一下的效果;
5.这个例子写的不复杂.合适于初学者;

如果你认为这个色彩不玄,你可以看一下这个例子. 也许你会喜欢.
仿淘宝首页导航条布局效果

全部评论(0)

上一篇：firefox的超链接点击去除扩大的难看虚线的解决方法
下一篇：解决IE升级后Flash线框问题

资讯排行榜
更多>>