<!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选项卡的更多相关文章

  1. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

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

    下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...

  3. 一款纯css3实现的tab选项卡

    今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. 纯CSS3完成选项卡，不要js完成的选项卡

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理? ...

  5. CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  6. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  7. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  8. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  9. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

随机推荐

  1. 关于constructor与 Prototype的理解

    constructor:每一个函数的Prototype属性指向的对象都包含唯一一个不可枚举属性constructor,该属性的值是这么一个对象:constructor指向了它所在的构造函数Protot ...

  2. （九）Android权限系统

    一.WebView请求权限实例 1.WebView获取网页访问权限的xml布局文件和MainActivity中的程序如下 <WebView android:layout_width=" ...

  3. MVC 传参

    介绍一些View中常用的东西 1:传递参数: 1):路由协议中传递参数: 1):eg:比如是这样类似的路由协议,那么我们在传递参数的时候,就要传递 id过去,当然如果,ABCD= UrlParamet ...

  4. myql 注意事项

    在[mysqld]下加入一行:lower_case_table_names=1,1为不区分大小写,0是区分大小写...并/etc/init.d/mysql restart即可...

  5. AfxSocketInit()

    作用:初始化Windows套接字 原型:BOOL AfxSocketInit(WSADATA* lpwsaData = NULL ); 参数:lpwsaData 指向WSADATA结构的指针.    ...

  6. mysql 查询表的行数和空间使用及其它信息

    use information_schema; select concat(round(sum(DATA_LENGTH/1024/1024), 2), 'MB') as data from TABLE ...

  7. Redis深入学习（1）前言&Redis简介

    前言 最近工作上使用到Redis,当然以前也使用过redis,win,linux上都使用过,不系统,不深入,仅是头痛医头,脚痛医脚,这里整理一下自己的笔记,一来方便自己记忆,二来对同行提供借鉴,不足错 ...

  8. MYSQ 查看 2 进制日志

    方法 1: myqlbinlog filename; ------------------------------------------------------------------------- ...

  9. 在表单(input）中id和name的区别

    但是name在以下用途是不能替代的:1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全 ...

  10. C语言单片和C#语言服务器端DES及3DES加密的实现

    原文:C语言单片和C#语言服务器端DES及3DES加密的实现 公司最近在做单片机和C#语言的通信.用的是Socket通信.传输的数据是明文,后来 在会上讨论准备用DES加密(对称加密)来做. 双方约定 ...