纯CSS实现滑动门效果
导读:我们在浏览一些比较大型的网站时会发现,他们在页面中使用了大量的滑动门效果,滑动门使网站的页面空间得到了最大化的利用,可以向访客展现尽可能多的内容,正是因为这点,这门技术才会被广泛的使用。 大家一般都使用js的方法来实现滑动门,当然,纯css也是...
我们在浏览一些比较大型的网站时会发现,他们在页面中使用了大量的滑动门效果,滑动门使网站的页面空间得到了最大化的利用,可以向访客展现尽可能多的内容,正是因为这点,这门技术才会被广泛的使用。
大家一般都使用js的方法来实现滑动门,当然,纯css也是可以实现滑动门效果的,只不过单独用css来实现的话,不需要鼠标点击才可以切换,好了,下面我们就使用纯CSS来实现以下滑动门的效果,具体代码如下:
HTML代码如下:
<div id="dadiv">
<div id="xiaodiv"> <a href="#cssshili">CSS实例</a> <a href="#cssrumen">CSS入门</a> <a href="#cssjiqiao" >CSS技巧</a> </div> //这里设置滑动门的标题
<div id="zhongjian">
<ul id="cssshili">
<li><a href="#">第一个滑动门 </a></li>
<li><a href="#">第一个滑动门 </a></li>
<li><a href="#">第一个滑动门 </a></li>
<li><a href="#">第一个滑动门 </a></li>
<li><a href="#">第一个滑动门 </a></li>
<li><a href="#">第一个滑动门 </a></li>
</ul>
<ul id="cssrumen">
<li><a href="#">第二个滑动门 </a></li>
<li><a href="#">第二个滑动门 </a></li>
<li><a href="#">第二个滑动门 </a></li>
<li><a href="#">第二个滑动门 </a></li>
<li><a href="#">第二个滑动门 </a></li>
<li><a href="#">第二个滑动门 </a></li>
</ul>
<ul id="cssjiqiao">
<li><a href="#">第三个滑动门 </a></li>
<li><a href="#">第三个滑动门 </a></li>
<li><a href="#">第三个滑动门 </a></li>
<li><a href="#">第三个滑动门 </a></li>
<li><a href="#">第三个滑动门 </a></li>
<li><a href="#">第三个滑动门 </a></li>
</ul>
</div>
</div>
CSS代码如下:
#dadiv{
width:303px;
height:200px;
border:1px solid #FF0033;
}
#xiaodiv a {
float:left;
width:100px;
border-right:1px solid #9966FF;
border-bottom:1px solid #9966FF;
font:bold 14px/30px Arial, Helvetica, sans-serif;
color:#9966FF;
text-decoration:none;
text-align:center;
}
#zhongjian {
width:303px;
height:162px;
overflow:hidden;
}
ul {
margin:0;
padding:0;
list-style-type:none;
padding:4px 0 0 5px;
}
li {
font-size:12px;
overflow:hidden;
padding-left:2px;
line-height:27px;
}
至此,一个纯css滑动门已经实现了,下面是我在浏览器中浏览的效果:
- ·用css的letter-spacing属性设置字与字的间
- ·css position的absolute和fixed属性的区别
- ·纯CSS判断ipad等移动设备横版和竖版
- ·css 一行显示之:用white-space 属性控制文字
- ·css中display属性是什么及其各个值的作用和
- ·css position属性可以取哪几个值?
- ·css一行显示之:实现多个图片一行显示的方法
- ·巧用CSS中的zoom:1解决ie下的浮动、margin
- ·用css的zoom属性实现在IE6、IE7、火狐下实
- ·纯CSS实现滑动门效果
- ·CSS中“#(井)号”、“*号”、“.”的区别于
- ·CSS 父级与子级的关系介绍
- ·css 一行显示之:文字超出宽度自动隐藏,并加上
- ·css中!important的用法和作用
- ·css display inline属性全掌握-实例讲解
- ·css中zoom属性的介绍和用途