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

发布时间：2018-08-15 18:33:46 所属栏目：专访来源：站长网

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

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

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑动门的真正魅力</title> <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(/uploads/allimg/1201/veryhuo_h_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(/uploads/allimg/1201/veryhuo_h_bg.png) left top no-repeat; float:left; cursor:pointer; color:#76381B; font-weight:bold; padding-left:10px; } /*nav*/ #nav{width:950px; background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) left top repeat-x; height:34px;} #nav ul{background:url(/uploads/allimg/1201/veryhuo_h_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(/uploads/allimg/1201/veryhuo_h_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(/uploads/allimg/1201/veryhuo_h_nav-bg.png) right -45px no-repeat;} #nav ul li a:hover span{background:url(/uploads/allimg/1201/veryhuo_h_nav-bg.png) -390px -45px no-repeat;} #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;} #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;} #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(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right top no-repeat; height:26px; padding-right:6px;} .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;} .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;} .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;} .tips-box-l{position:absolute; font-size:12px; color:#666; height:21px;} .tips-box-l span{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) left -58px; float:left; height:21px; width:10px;} .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;} .tips-box-r{position:absolute; font-size:12px; color:#666; height:21px;} .tips-box-r span{background:url(/uploads/allimg/1201/veryhuo_h_tips-bg.png) right -83px; right:-10px; position:absolute; height:21px; width:10px;} .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;} </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="/uploads/allimg/1201/veryhuo_h_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="/uploads/allimg/1201/veryhuo_h_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、<b>jQuery</b></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="/uploads/allimg/1201/veryhuo_h_tips-bg.png" alt="" style="border:1px solid #666; padding:10px;" /> </body> </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>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!