<!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. css渐变/背景

    1.线性渐变(gradient变化) linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果. 上图是从黄色渐变到绿色 background:linear-gradient( to ...

  2. WCF通信过程

    无废话WCF入门教程二[WCF应用的通信过程] 一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Ser ...

  3. Spring事务传播机制详解

    1 事务的传播属性(Propagation) 1) REQUIRED ,这个是默认的属性 Support a current transaction, create a new one if none ...

  4. C# 循环的应用 手机号抽奖 选班长的练习题

    //第一题 //20个手机号滚动显示随机抽出一个中奖号码来: static void bbb(string[] args) { string[] cellPhone = new string[] { ...

  5. Spring随笔 - 事务隔离级别

    Spring提供5中事务隔离级别: ISOLATION_DEFAULT:使用数据库后端的默认隔离级别. ISOLATION_READ_UNCOMMITTED:允许读取尚未提交的数据变更.可能会导致脏读 ...

  6. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

  7. 自定义TabHost，TabWidget样式

    先看效果: 京东商城底部菜单栏 新浪微博底部菜单栏 本次学习效果图:

  8. 【JQ成长笔记】关于$(this).index与$.each的使用

    本人菜鸟入门,小庙容不下大神的 O(∩_∩)O~~轻喷~ 工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否 ...

  9. Python之父Guido在最近一次采访的最后说了啥

    Python之父Guido在最近一次采访的最后说了啥? 在前些天的一次采访中,被问到Python未来发展方向的时候原文在infoworld,咱们可爱的python老爹Guido是这样说的: One t ...

  10. windows程序设计读书笔记4——字符显示3

    在之前的一章里我们使用InvalidateRect函数,生成窗口重绘消息进行重绘,但是并没有在处理滚动条消息时直接绘制,这样的代码效率并不高. 这里作者使用了UpdateWindow函数,直接进行窗口 ...