代码如下，可以直接复制粘贴到文档中，然后运行实例。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<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>
</head>
<body>
<div class="page">
<ul class="nostyle" id="accordion">
<li>
<input type="radio" id="ac-1" name="accordion-1" checked="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>
</body>
</html>
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！