CSS教程:专门介绍滑动门
互联网 发布时间：2008-10-17 19:25:22 作者：佚名 
我要评论
我要评论滑动门(Sliding Doors)
还是决定把滑动门单独提作一种单独的技术.
它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现。
滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果.
滑动门(Sliding Doors)
它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现。
滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果.
前面所述的圆角矩形只是它的一种实现方式而已. 真正的滑动门只需要2组标签就可以完成:
HTML代码如下:
<ul> <li><a href="https://www.jb51.net" title="">脚本之家</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;
}
相关文章
CSS滑动门代码，展现CSS滑动门的魅力，一款集合了众多网页滑动门样式的代码实例2012-05-08
基于CSS3的个性滑动门菜单导航，整个网页就是一个滑动门，每点一下滑动门的任一个菜单，内容区都会切换内容，当然这些切换都是基于无刷新切换，效果如上图所示。2010-11-22- 三个形式多样的CSS滑动门实例集，兼容ie和firefox，内含三个滑动门实例，一个标准版，另一个是嵌套型，还有一些是横向和竖向排列的，多种形式以满足大家的需要，希望朋友2010-01-15
- 利用标签来创建导航菜单,是一个比较流行的方法.那就跟木木一起来学一下如何使用标签来创一个导航菜单.2009-11-30
- 可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师2009-10-15
CSS网页实例：斜角滑动门导航条-CSS教程-网页制作-网页教学网
斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的效果无法有很好的支持；2008-10-17CSS高级技巧:滑动门技术-CSS教程-网页制作-网页教学网
上一篇CSS教程 文章：CSS高级技巧:图片替换 滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术2008-10-17
滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。接下来通过本文给大家介绍CSS 实现滑动门的实例代码，感兴趣的朋友跟随小编一起看看吧2018-09-19
最新评论