ホームページ  >  記事  >  ウェブフロントエンド  >  纯css写的手风琴切换实例

纯css写的手风琴切换实例

WBOY
WBOYオリジナル
2016-06-01 09:53:291775ブラウズ

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

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

 

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。