Css精美的滑动门布局：圆角、选项卡和Tips等

　　一组精美的CSS滑动门布局代码，在这个实例合集中，有多个效果，包括：圆角自适应按钮、导航/tab选项卡、tips小提示等，当然这些布局是不完整的，也就是说没有JS脚本来“驱动”它们，如果您打算使用，只能借用CSS部分，JS脚本需要自己添加哦。

　　示例：

<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>滑动门的真正魅力</title><br /> <style type="text/css"><br /> *{margin:0; padding:0;}<br /> body{font-size:12px; padding:20px;}<br /> .clear{clear:both;}<br /> ul{list-style:none;}<br /> /*btn*/<br /> .btn{height:25px; background:url(/uploads/allimg/1201/veryhuo_h_bg.png) right top no-repeat; float:left; padding-right:10px;text-decoration:none; margin:0 3px;}<br /> .btn span{line-height:23px; height:25px; background:url(/uploads/allimg/1201/veryhuo_h_bg.png) left top no-repeat; float:left; cursor:pointer; color:#76381B; font-weight:bold; padding-left:10px; }<br /> /*nav*/<br /> #nav{width:950px; background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) left top repeat-x; height:34px;}<br /> #nav ul{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) right top no-repeat; height:34px; line-height:34px; padding-left:10px;}<br /> #nav ul li{float:left; padding:0 5px; background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) left -46px no-repeat;}<br /> #nav ul li.first{background:none;}<br /> #nav ul li a,#nav ul li span{float:left; height:34px; line-height:34px;}<br /> #nav ul li a{padding-right:15px;}<br /> #nav ul li a span{padding-left:15px; cursor:pointer;}<br /> #nav ul li a:link,#nav ul li a:visited{font-size:14px; color:#fff; font-weight:bold; text-decoration:none;}<br /> #nav ul li a:hover{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) right -45px no-repeat;}<br /> #nav ul li a:hover span{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) -390px -45px no-repeat;}<br /> #nav ul li.current a,#nav ul li.current a:hover{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) right -90px no-repeat; color:#F03;}<br /> #nav ul li.current a span,#nav ul li.current a:hover span{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) -390px -90px no-repeat; line-height:normal; padding-top:11px; height:23px;}<br /> #nav ul li.current a:link,#nav ul li.current a:visited{ color:#F03;}<br /> /*tips*/<br /> .tips{position:relative; height:300px;}<br /> .tips-box-b{position:absolute; font-size:12px; color:#666; background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right top no-repeat; height:26px; padding-right:6px;}<br /> .tips-box-b .tips-content{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) left top no-repeat; height:26px; float:left; line-height:20px; padding-left:6px;}<br /> .tips-box-t{position:absolute; font-size:12px; color:#666; background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right -28px no-repeat; height:27px; padding-right:6px;}<br /> .tips-box-t .tips-content{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) left -28px no-repeat; height:20px; float:left; padding-top:6px; line-height:20px; padding-left:6px;}<br /> .tips-box-l{position:absolute; font-size:12px; color:#666; height:21px;}<br /> .tips-box-l span{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) left -58px; float:left; height:21px; width:10px;}<br /> .tips-box-l .tips-content{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right -58px; height:21px; line-height:20px; padding-right:6px; float:left;}<br /> .tips-box-r{position:absolute; font-size:12px; color:#666; height:21px;}<br /> .tips-box-r span{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right -83px; right:-10px; position:absolute; height:21px; width:10px;}<br /> .tips-box-r .tips-content{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) left -83px; height:21px; line-height:20px; padding-left:6px; float:left;}<br /> </style><br /> </head><br /> <body><br /> <h1>滑动门真正的魅力之——圆角自适应按钮</h1><br /> <a href="#" class="btn"><span>中国，我的祖国</span></a><br /> <a href="#" class="btn"><span>越来越好</span></a><br /> <a href="#" class="btn"><span>天空有朵雨做的云</span></a><br /> <div class="clear"></div><br /> <h3>背景：</h3><br /> <img src="/uploads/allimg/1201/veryhuo_h_bg.png" alt="" style="border:1px solid #666; padding:10px;" /><br /> <h1>滑动门真正的魅力之——导航/tab选项卡</h1><br /> <div id="nav"><br /> <ul><br /> <li class="current first"><a href="#"><span>原则</span></a></li><br /> <li><a href="#"><span>性格</span></a></li><br /> <li><a href="#"><span>亲亲宝贝</span></a></li><br /> <li><a href="#"><span>驾驶员</span></a></li><br /> <li><a href="#"><span>我是你的</span></a></li><br /> <li><a href="#"><span>博士生</span></a></li><br /> <li><a href="#"><span>蓝天白云绿水</span></a></li><br /> </ul><br /> </div><br /> <h3>背景：</h3><br /> <img src="/uploads/allimg/1201/veryhuo_h_nav-bg.png" alt="" style="border:1px solid #666; padding:10px;" /><br /> <h1>滑动门真正的魅力之——tips小提示</h1><br /> <div class="tips"><br /> <div class="tips-box-b" style="top:50px;"><br /> <span></span><br /> <div class="tips-content">网页技术</div><br /> </div><br /> <div class="tips-box-t" style="top:100px;"><br /> <span></span><br /> <div class="tips-content">CSS、<b>jQuery</b></div><br /> </div><br /> <div class="tips-box-l" style="top:150px;"><br /> <span></span><br /> <div class="tips-content">技术博客</div><br /> </div><br /> <div class="tips-box-r" style="top:200px;"><br /> <span></span><br /> <div class="tips-content">源码爱好者欢迎您</div><br /> </div><br /> </div><br /> <h3>背景：</h3><br /> <img src="/uploads/allimg/1201/veryhuo_h_tips-bg.png" alt="" style="border:1px solid #666; padding:10px;" /><br /> </body><br /> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

Css精美的滑动门布局：圆角、选项卡和Tips等

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

Css精美的滑动门布局：圆角、选项卡和Tips等

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀