CSS3 :target伪类实现Tab切换效果 BY commy
2016-05-10 15:37
513 查看
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1
标签一
标签二
标签三
欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
本Tab切换效果纯CSS3制作,无任何JavaScript
最新Q群:50063010
爱设计,爱分享——设计达人(http://www.shejidaren.com)
高质量设计文章分享平台
欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢
标签一
标签二
标签三
欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
本Tab切换效果纯CSS3制作,无任何JavaScript
最新Q群:50063010
爱设计,爱分享——设计达人(http://www.shejidaren.com)
高质量设计文章分享平台
欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢
CSS样式
.tablist {position:relative;margin:50px auto;min-height:200px;} /* this example style begin */ .tab_content { position: absolute;/*set content box as absolute*/ /* content style begin*/ width:600px;height:170px;padding:15px;border:1px solid #91a7b4;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.1);font-size:1.2em;line-height:1.5em;color:#666;background:#fff; } #tab1:target, #tab2:target, #tab3:target { z-index: 1; } /* tabmenu style */ .tabmenu {position:absolute;top:100%;margin:0;} .tabmenu li{display:inline-block;} .tabmenu li a {display:block;padding:5px 10px;margin:0 10px 0 0;border:1px solid #91a7b4;border-radius:0 0 5px 5px;background:#e3f1f8;color:#333;text-decoration:none;}
HTML代码
<div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul> <div id="tab1" class="tab_content">欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢! <!-- end tab1 content --></div> <div id="tab2" class="tab_content"><p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>最新Q群:50063010<br />爱设计,爱分享——设计达人(http://www.shejidaren.com) <!-- end tab2 content--></div> <div id="tab3" class="tab_content"><p style="font-size:24px;">高质量设计文章分享平台</p><p>欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢</p> <!-- end tab3 content--></div> </div>
相关文章推荐
- css中important的用处
- css :active伪类的理解
- CSS3 :target伪类的理解与使用
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
- 织梦模板安装后不能显示css的解决办法
- 最简化模型2——css3分阶段动画效果(经过实测)之转动的div
- CSS清楚浮动float
- [css]水平垂直居中的方法
- 最简化模型——css3分阶段动画效果(经过实测)
- ios tableview一些样式的整理
- CSS设置行内元素的水平居中
- css
- HTML&CSS——css中postion的fixed与absolute区别详解
- HTML&CSS——Position属性四个值:fixed、absolute和relative的区别和用法
- css--盒子模型和层叠关系
- PHPCMS 分页样式
- CSS知识点总结
- 有序无序列表样式设置
- 【less.js扫雷系列一】--less和CSS同时时使用时,可能出现的样式优先级变化导致样式覆盖问题
- 编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范