纯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>
时间: 2024-11-06 09:58:23

纯css3实现tab选项卡的相关文章

css3圆角tab选项卡代码

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery+css3圆角tab选项卡切换</title><style>*{margin: 0;padding: 0;}body{font: 14px Georgia, serif;}h1{width:

史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3外观美丽淡入淡出Tab菜单演示</title> <link rel="stylesheet" href="css/style.css&

一款纯css3实现的tab选项卡

今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="night-tabs night-tabs-color-default night-tabs-animation-slide-right night-tabs-position-vleft"> <!--Tab 1--> <input type="radio&qu

纯CSS3实现动画不规则的tab标签切换代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

移动web:tab选项卡

平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmove.touchend. 和做其他的效果一样,先有html结构,css样式修饰,再写JS代码. html: <div class="mtabs" id="tabs"> <ul class="mhead"> <li>t

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

:target伪类制作tab选项卡

:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: 1 <div> 2 <a href="#demo1">点击此处</a> 3 </div> 4 <div id="demo1">测试结果</div> CSS代码: 1 :target{ 2 color: #343434; 3 border: 1px solid red; 4 background-color

css Tab选项卡

css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul,li{margin:0; padding:0; font-size:12px;} .tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; border:1px solid #DBA4E8; border-bottom