纯css写的手风琴切换实例-html教程-PHP中文网

纯css写的手风琴切换实例
php中文网
发布： 2016-06-01 09:53:29
原创
1864人浏览过
代码如下，可以直接复制粘贴到文档中，然后运行实例。
<!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>
登录后复制