CSS教程:纯CSS代码打造滑动门

因为最近暗淡的黑忙于制作公司网站,所以好多天没有更新文章了。好几个网站,整个公司只有我一个人做,苦逼命啊...网站制作已经接近尾声,所以暗淡的黑讲计划恢复本网站的更新,并且打算制作一系列的个人原创网站教程成来。

在制作网站的过程中,用到不少的javascript技术,比如基础的滑动门。很多华丽的滑动门效果大都是考JS效果来实现的。但网站调用太多的JS造成的影响,相比大家都了解。所以,采用纯CSS实现滑动门更加适合小型网站。

下面暗淡的黑给出网站制作过程中采用的其中一种,其中部分代码来源于网络,先看下效果图:

纯CSS代码实现滑动门功能

[css]

/*下面是滑动门CSS代码*/

/* 投诉处理滑动门代码 */

UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{}
.tousu_box{margin-top:10px;;clear:both;width:228px;border:1px double #9fc1e7; border-top:none;/*滑动门的宽度*/}
.tousu_wordbox{ clear:both;text-align:left; border-top:none; height:100px;font-size:12px;padding-left:10px;}
/* TAB 切换效果 */
.tousu_tb_{ background:url(../../images/xinban/panelline.gif) bottom repeat-x;height:32px;}
.tousu_tb_ ul{ margin:0; padding:0}
.tousu_tb_ ul li{float:left;height:28px;;width:73px;cursor:pointer; margin-right:3px; text-align:center; padding-top:8px;}
/* 控制显示与隐藏css类 */
.tousu_normaltab{background-image:url(../../images/xinban/paneloff1.gif); background-repeat: no-repeat; color:#000; font-size:12px; margin-top:4px;}
.tousu_hovertab{background-image:url(../../images/xinban/panelon1.gif); background-repeat: no-repeat; color:#fff;font-size:12px; font-weight:bold;}
.tousu_dis{display:block;}
.tousu_dis ul{margin-left:10px;padding:0}
.tousu_dis ul li{width:160px; list-style-type:disc;border-bottom:1px dashed #ccc;margin-top:10px;}
.tousu_undis{display:none;}
.tousu_undis ul{margin-left:10px;padding:0}
.tousu_undis ul li{width:160px; list-style-type:disc;border-bottom:1px dashed #ccc;margin-top:10px;}

[/css]

以下是实现功能的html代码:

[html]


  • 投诉处理
  • 诚信曝光
  • 投诉方式

[/html]

附带网络搜集的各种CSS代码实现滑动门功能集合:

下载地址:千脑网盘 | 百度网盘 | 360网盘

声明:本站除特别声明外,均为本站原创,转载请注明出处:暗淡的黑IT网络,谢谢!