Home  >  Article  >  Web Front-end  >  纯css写的手风琴切换实例

纯css写的手风琴切换实例

WBOY
WBOYOriginal
2016-06-01 09:53:291771browse

代码如下,可以直接复制粘贴到文档中,然后运行实例。

<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>

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn