CSS滑动门代码集

2014-04-07 09:23:08 -0400

代码说明

CSS滑动门代码集——展示基于CSS的网页滑动门的真正魅力，看到这么多的网页滑动门样式，是不是很惊奇，实际上它只用了三张背景图片，完全用CSS来定义各个背景需要的部分，许多人把滑动门当成tab/选项卡，认为滑动门只是简单的鼠标滑过JS切换效果，事实上滑动门是一项基于CSS的背景自适应技术，它的魅力远比tab/选项卡来的吸引人。转自源码爱好者

HTML代码

<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; padding:20px;}
.clear{clear:both;}
ul{list-style:none;}
/*btn*/
.btn{height:25px; background:url(http://www.codefans.net/jscss/demoimg/201201/bg.png) right top no-repeat; float:left; padding-right:10px;text-decoration:none; margin:0 3px;}
.btn span{line-height:23px; height:25px; background:url(http://www.codefans.net/jscss/demoimg/201201/bg.png) left top no-repeat; float:left; cursor:pointer; color:#76381B; font-weight:bold; padding-left:10px; }
/*nav*/
#nav{width:950px; background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) left top repeat-x; height:34px;}
#nav ul{background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) right top no-repeat; height:34px; line-height:34px; padding-left:10px;}
#nav ul li{float:left; padding:0 5px; background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) left -46px no-repeat;}
#nav ul li.first{background:none;}
#nav ul li a,#nav ul li span{float:left; height:34px; line-height:34px;}
#nav ul li a{padding-right:15px;}
#nav ul li a span{padding-left:15px; cursor:pointer;}
#nav ul li a:link,#nav ul li a:visited{font-size:14px; color:#fff; font-weight:bold; text-decoration:none;}
#nav ul li a:hover{background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) right -45px no-repeat;}
#nav ul li a:hover span{background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) -390px -45px no-repeat;}
#nav ul li.current a,#nav ul li.current a:hover{background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) right -90px no-repeat; color:#F03;}
#nav ul li.current a span,#nav ul li.current a:hover span{background:url(http://www.codefans.net/jscss/demoimg/201201/nav-bg.png) -390px -90px no-repeat; line-height:normal; padding-top:11px; height:23px;}
#nav ul li.current a:link,#nav ul li.current a:visited{ color:#F03;}
/*tips*/
.tips{position:relative; height:300px;}
.tips-box-b{position:absolute; font-size:12px; color:#666; background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) right top no-repeat; height:26px; padding-right:6px;}
.tips-box-b .tips-content{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) left top no-repeat; height:26px; float:left; line-height:20px; padding-left:6px;}
.tips-box-t{position:absolute; font-size:12px; color:#666; background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) right -28px no-repeat; height:27px; padding-right:6px;}
.tips-box-t .tips-content{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) left -28px no-repeat; height:20px; float:left; padding-top:6px; line-height:20px; padding-left:6px;}
.tips-box-l{position:absolute; font-size:12px; color:#666; height:21px;}
.tips-box-l span{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) left -58px; float:left; height:21px; width:10px;}
.tips-box-l .tips-content{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) right -58px; height:21px; line-height:20px; padding-right:6px; float:left;}
.tips-box-r{position:absolute; font-size:12px; color:#666; height:21px;}
.tips-box-r span{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) right -83px; right:-10px; position:absolute; height:21px; width:10px;}
.tips-box-r .tips-content{background:url(http://www.codefans.net/jscss/demoimg/201201/tips-bg.png) left -83px; height:21px; line-height:20px; padding-left:6px; float:left;}
</style>
</head>
<body>
<h1>滑动门真正的魅力之——圆角自适应按钮</h1>
<a href="#" class="btn"><span>中国，我的祖国</span></a>
<a href="#" class="btn"><span>越来越好</span></a>
<a href="#" class="btn"><span>天空有朵雨做的云</span></a>
<div class="clear"></div>
<h3>背景：</h3>
<img src="http://www.codefans.net/jscss/demoimg/201201/bg.png" alt="" style="border:1px solid #666; padding:10px;" />
<h1>滑动门真正的魅力之——导航/tab选项卡</h1>
<div id="nav">
	<ul>
		<li class="current first"><a href="#"><span>原则</span></a></li>
		<li><a href="#"><span>性格</span></a></li>
		<li><a href="#"><span>亲亲宝贝</span></a></li>
		<li><a href="#"><span>驾驶员</span></a></li>
		<li><a href="#"><span>我是你的</span></a></li>
		<li><a href="#"><span>博士生</span></a></li>
		<li><a href="#"><span>蓝天白云绿水</span></a></li>
	</ul>
</div>
<h3>背景：</h3>
<img src="http://www.codefans.net/jscss/demoimg/201201/nav-bg.png" alt="" style="border:1px solid #666; padding:10px;" />
<h1>滑动门真正的魅力之——tips小提示</h1>
<div class="tips">
<div class="tips-box-b" style="top:50px;">
	<span></span>
	<div class="tips-content">网页技术</div>
</div>
<div class="tips-box-t" style="top:100px;">
	<span></span>
	<div class="tips-content">CSS、jQuery</div>
</div>
<div class="tips-box-l" style="top:150px;">
	<span></span>
	<div class="tips-content">技术博客</div>
</div>
<div class="tips-box-r" style="top:200px;">
	<span></span>
	<div class="tips-content">源码爱好者欢迎您</div>
</div>
</div>
<h3>背景：</h3>
<img src="http://www.codefans.net/jscss/demoimg/201201/tips-bg.png" alt="" style="border:1px solid #666; padding:10px;" />
</body>

代码演示

滑动门真正的魅力之——圆角自适应按钮

中国，我的祖国越来越好天空有朵雨做的云

背景：

滑动门真正的魅力之——导航/tab选项卡

背景：

滑动门真正的魅力之——tips小提示

网页技术

CSS、jQuery

技术博客

源码爱好者欢迎您

背景：

«Newer Older»

Back to home

Subscribe | Register | Login | N