Home > Article > Web Front-end > 纯css写的手风琴切换实例
代码如下,可以直接复制粘贴到文档中,然后运行实例。
<code class="language-html"> <meta charset="UTF-8"> <title>纯css写的手风琴切换实例</title> <meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3"> <style type="text/css"> ul,li{ list-style:none; margin:0; -webkit-padding-start: 0; } .page{ width:602px; } #accordion{ border:1px solid #D2D2D2; border-top:none; width:600px; } #accordion input[type='radio']{ display:none; } #accordion label{ display:block; font-size:16px; background-color:#F4F4F4; border-top:1px solid #D2D2D2; line-height:36px; font-weight:bold; } #accordion label:before{ content:"\2610"; background-color:#fff; width:19px; height:19px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-align:center; margin:0 5px; box-shadow:0 0 1px rgba(0,0,0,0.5); display:inline-block;*display:inline;*zoom:1; line-height:19px; vertical-align:middle; } #accordion .accordion-content{ height:0; overflow:hidden; -webkit-transition:height 0.3s ease; -moz-transition:height 0.3s ease; -ms-transition:height 0.3s ease; -o-transition:height 0.3s ease; transition:height 0.3s ease; } #accordion .accordion-content p{ margin:10px; } #accordion input:checked + label:before{ content:"\2611"; color:#f00; box-shadow:0 0 2px rgba(255,0,0,0.5); } #accordion input:checked ~ .accordion-content{ height:100px; } </style> <div class="page"> <ul class="nostyle" id="accordion"> <li> <input type="radio" id="ac-1" name="accordion-1" checked> <label for="ac-1">青,取之于蓝,而青于蓝</label> <div class="accordion-content"> <p> 学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。 </p> </div> </li> <li> <input type="radio" id="ac-2" name="accordion-1"> <label for="ac-2">冰,水为之,而寒于水</label> <div class="accordion-content"> <p> 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。 </p> </div> </li> <li> <input type="radio" id="ac-3" name="accordion-1"> <label for="ac-3">君子博学而日参省乎己</label> <div class="accordion-content"> <p> 学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。 </p> </div> </li> <li> <input type="radio" id="ac-4" name="accordion-1"> <label for="ac-4">君子学不可以已</label> <div class="accordion-content"> <p> 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。 </p> </div> </li> </ul> </div> </code>