头像

纯CSS手风琴选项卡

来源:http://www.huoseo.com/js/2307.html 18***38 2017-07-04 20:02浏览(841) 收藏

一款纯CSS手风琴选项卡,有两种效果:一种是既可展开也可伸缩的效果,另一种是只能展开不能收缩的效果,可以自由控制显示的宽度比例、颜色样式等等,喜欢童鞋的就收下吧。
纯CSS手风琴选项卡
分类:导航菜单 > 下拉导航 难易:入门级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 24 下载资源 下载积分: 30 积分

页面的head部分只有CSS样式,相对比较简单,就直接提供代码了:

body {
  color: #2c3e50;
  background: #ecf0f1;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
h1 {
  text-align: center;
  font-size: 30px;
}
.half {
  margin-left: 20%;
  width: 60%;
  padding: 0 1em;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #16a085;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

页面的body部分设置好两种效果的容器,可以自由添加class为tab的div增加选项,代码如下:

<div class="wrapper">
  <h1>纯CSS手风琴选项卡</h1>
  
  <div class="half">
    <p>可展开 <strong>可收缩</strong></p>
    <div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">第一步、要求</label>
      <div class="tab-content">
        <p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">第二步、信念</label>
      <div class="tab-content">
        <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">第三步、接受</label>
      <div class="tab-content">
        <p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
      </div>
    </div>
  </div>
  
  <div class="half">
    <p>仅可 <strong>展开</strong></p>
    <div class="tab blue">
      <input id="tab-four" type="radio" name="tabs2">
      <label for="tab-four">把宇宙当成一本货物的目录</label>
      <div class="tab-content">
        <p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
      </div>
    </div>
    <div class="tab blue">
      <input id="tab-five" type="radio" name="tabs2">
      <label for="tab-five">要相信还没有实现的事</label>
      <div class="tab-content">
        <p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
      </div>
    </div>
    <div class="tab blue">
      <input id="tab-six" type="radio" name="tabs2">
      <label for="tab-six">把自己和你要的事物放在同一个频率上</label>
      <div class="tab-content">
        <p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
      </div>
    </div>
  </div>
</div>
最新交易
评论7
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

1 2
如何中彩票 www.08yu.com-福彩贪污1360亿| www.1048.org-彩票带回血-| www.062973.com-彩票到哪里加盟| www.557753.com-众彩网杀号定胆| www.701307.com-华赢彩票网站| www.3354.biz-买足彩哪个靠谱| www.hz29.com-网络彩票赌博套路| www.xx82.com-688彩票网app| www.25292.cc-彩色铅笔素描入门| www.038066.com-体彩竞彩打票教程| www.146881.com-江苏快三怎么投| www.233688.cc-快三平投技巧| www.761971.com-竞彩足彩下载| www.36hf.com-07年七星彩走势图| www.381482.com-中彩网开奖直播视频| www.77032.com-九场胜负彩专家预测| www.517347.com-飞标七星彩杀头| www.699501.com-新浪竞彩足球分析| www.800607.com-彩票怎么看不懂| www.382726.com-幸运彩快三-| www.701557.com-竞彩比分如何分析| www.61522.cc-七星彩奇偶走势网易| www.53583.cc-福彩刮刮乐技巧规律| www.124799.com-迷彩兔最新视频| www.797575.cc-下载竞彩258球迷| www.xc33.com-下载体彩福彩| www.609589.com-深圳体彩最新转让| www.068.online-腾讯竞彩怎么样| www.8226.com-彩票对投赚彩金| www.978146.com-彩九网app-| www.cp1150.com-快三缩水软件手机版| www.04kd.com-彩铅画乡村风景教程| www.6324.biz-乐发彩下载-| www.47747.cc-关于彩票九宫八卦图| www.033850.com-云购彩票是否合法| www.699207.com-彩民村心水论| www.7281.biz-彩虹六号ios版| www.32517.com-彩妆店经营-| www.87568.cc-银川体彩店转让| www.080342.com-彩8彩票安卓官网| www.163370.com-福彩快三不给提现| www.5353.hk-qq彩色气泡-| www.79913.cc-快三黑幕-| www.500979.com-竟彩足球今日单关| www.tf95.com-时时彩要改时间了吗| www.14433.cc-足彩怎么玩法介绍| www.84147.com-陕西彩票领奖在哪里| www.474663.com-百盛彩票提现| www.60zq.com-青蛙彩票网址导航网| www.2160.tv-除了福利彩票广告语| www.8466.org-竞彩彩票打法| www.20968.cc-篮球竞彩网赛果开奖| www.676812.com-大乐透走势图爱彩| www.881737.com-日本彩票怎么玩| www.966981.com-七星七彩开七奖结果| www.ir0.com-基诺彩票的规则| www.23ei.com-彩票中奖历史号码| www.36846.com-好运来彩票投注平台| www.898516.com-时时彩挂机软件教程| www.974276.com-520彩票计划| www.cp0087.com-快三软件免费下载| www.345107.com-亿乐彩注册登录| 博乐彩票www.588824.com| www.22485.com-彩票店整体转让| www.126793.com-开彩网站-| www.251157.com-彩49官网-| www.6240.pw-竞彩之家里的大神们| 亿彩www.6832e.com| www.715988.com-福彩3d直选号推荐| www.874497.com-说彩-| www.cp6.vip-体彩排列五中奖| www.19165.com-福利彩票特等奖彩票| www.254032.com-彩票刷反水方法| www.pn57.com-湖北快三开奖走势| www.3358.cm-彩票几位号-| www.967813.com-女生玩彩票-| www.44fd.com-彩之云物业怎么样| www.6123.cn-顶呱刮彩票app| www.29182.com-至尊快三有赢钱的吗| www.33860.com-新浪彩票必发指数| www.197.xyz-伯乐彩票登录网址| www.20la.com-彩票兑奖金额| www.90wk.com-快乐中彩票是真的吗| www.oo93.com-彩票正确的倍投方法| www.cp908.cc-福建快三官网| www.200255.com-q彩票-| www.286217.com-公益彩下载-| www.610562.com-彩钢瓦安装人工价格| www.243844.com-体彩官网管理网站| www.408669.com-福彩体彩春节放假| www.2435.vip-吉林快三逐鹿计划| www.17ve.com-注册就送99彩金| www.794.net-亿彩票安全吗| www.131076.com-三动三不动彩礼| www.260628.com-手机快三线上平台| www.359815.com-大彩鲸快乐十分| www.469223.com-如何用五行买彩票| www.tt95.cc-万豪福彩苹果版下载| www.46qs.com-体育彩票刮刮奖编码| www.2927.in-手机看开彩现场直播| www.ma94.com-下载彩票送彩金| www.18oq.com-第19010期体彩| www.902460.com-足球竞彩结果| www.988222.com-保定体彩电话| www.ce56.com-快三可以赚钱吗| www.5oh.com-易彩云彩票下注| www.734468.com-3d胆码预测凤彩网| www.811197.com-广西快三高手计划群| www.900530.com-淘彩app是真的吗| www.960112.com-泰安彩票弃奖| C9999www.318548.com| www.131160.com-许昌结婚彩礼| www.265181.com-中国福彩3d图| www.uy18.com-贵州福彩快3中奖| www.18al.com-新西兰45秒彩官网| www.3161.cn-胜负彩怎么玩法| www.693291.com-短信投彩票-| www.573138.com-彩是姓吗-| www.570768.com-上海福彩集中| www.667481.com-香港e球彩-| www.845895.com-中国彩票作弊人员| www.918472.com-福利彩票投注模拟| www.979564.com-洛阳今天快三开奖| www.mw49.cc-福彩3d技巧-| www.040548.com-10十分彩-| www.175913.com-安徽省快三跨度| www.257654.com-亿彩彩票-| www.653591.com-玖富彩票怎么下载| www.723078.com-彩票大蠃家-| www.789438.com-快乐10分彩票技巧| www.854382.com-时时彩倍投咋样合算| www.921800.com-彩神争8靠谱吗| www.970958.com-全天彩是正规的吗| 500彩票网www.636220.com| www.103019.com-旺彩预测官网| www.219951.com-北京福彩自助快三| www.cp1150.com-快三缩水软件手机版| www.pv04.com-彩168-| www.42688.com-华亿彩票aqq| www.613821.com-手机在线买体彩| www.680282.com-亚彩会登录地址| www.451247.com-星游2彩票-| www.570659.com-极速快三走势图技巧| www.638962.com-中国福彩慈善| www.701307.com-华赢彩票网站| www.771783.com-多彩贵州的含义| www.828535.com-欧洲彩票历史大奖| www.883222.com-鸿彩彩票app| www.364436.com-世界杯足彩如果买| www.130540.com-福彩双色球百度百科| www.410046.com-体彩飞鱼技巧| www.67194.com-中福利彩票怎么领奖| www.254215.com-福彩自助app| www.7015.biz-蓝彩2串1什么意思| www.14hs.com-福建摇骰子彩票活动| www.848149.com-3d麦久彩票-| www.5875.biz-彩票公众号官网| www.p37.org-叫你看彩票曲线图| www.pi71.com-北京福彩快三和值表| www.58939.cc-135彩票网站| www.062214.com-万彩网是合法的吗| www.212783.com-信誉最好的黑彩平台| www.350001.com-福彩任5玩法| www.93bg.com-广西快三开奖下载|