首页 > 代码库 > 纯css3实现tab选项卡
纯css3实现tab选项卡
<!doctype html><html><head> <title>Welcome</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="imagetoolbar" content="no" /> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> * { padding: 0px; margin: 0px; outline: none; } article { border-top: none; display: -webkit-box; height: 100%; position: relative; width:300px; margin:50px auto 0; } article > section:nth-child(1) a { left: 0px; position: absolute; } article > section:nth-child(2) a { left: 101px; position: absolute; } article > section:nth-child(3) a { left: 202px; position: absolute; } article > section { width: 304px; padding: 10px 0; position: absolute; left: 0px; } article > section a { color: #333; text-decoration: none; display: block; list-style: none; -webkit-box-flex:1; font-size: 12px; line-height: 30px; text-align: center; background: #f1f1f1; border: 1px solid #ccc; width: 100px; z-index: 100;} article > section > section { top:41px; position: absolute; background: #fff; border:1px solid #ccc; border-top: none; padding: 10px 0; } article > section p { font: 12px/1.7 simsun; padding: 0 10px; text-indent: 2em; } section:target { z-index: 99; } section:target a { background: #fff; border-bottom: none; } </style></head><body> <article> <section id="tab1"> <a href="#tab1">菜单一</a> <section> <p>榜妹：#标配问题#拾文化是哪一天开始运营的？现在有多少关注者？拾文化团队有多少人？大家怎么分工呢？</p> <p>拾文化：拾文化从2012年3月开始运营，现在总共有50万左右关注者，团队不大，12个人，以编辑为主，还有技术一名、设计两名、BD两名，以及打杂的我。</p> <p>榜妹：#标配问题#从开始运营到现在，拾文化的内容模式经历过几个发展阶段，粉丝出现过几次增长高峰，是哪些原因呢？</p> </section> </section> <section id="tab2"> <a href="#tab2">菜单二</a> <section> <p>拾文化：拾文化从2012年3月开始运营，现在总共有50万左右关注者，团队不大，12个人，以编辑为主，还有技术一名、设计两名、BD两名，以及打杂的我。</p> <p>榜妹：#标配问题#拾文化是哪一天开始运营的？现在有多少关注者？拾文化团队有多少人？大家怎么分工呢？</p> <p>榜妹：#标配问题#从开始运营到现在，拾文化的内容模式经历过几个发展阶段，粉丝出现过几次增长高峰，是哪些原因呢？</p> </section> </section> <section id="tab3"> <a href="#tab3">菜单三</a> <section> <p>榜妹：#标配问题#从开始运营到现在，拾文化的内容模式经历过几个发展阶段，粉丝出现过几次增长高峰，是哪些原因呢？</p> <p>拾文化：拾文化从2012年3月开始运营，现在总共有50万左右关注者，团队不大，12个人，以编辑为主，还有技术一名、设计两名、BD两名，以及打杂的我。</p> <p>榜妹：#标配问题#拾文化是哪一天开始运营的？现在有多少关注者？拾文化团队有多少人？大家怎么分工呢？</p> </section> </section> </article></body></html>
纯css3实现tab选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。