纯css写的手风琴切换实例

  
 
 
 
 纯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;
	}
 
 
 

	 
		 
			 
			 青，取之于蓝，而青于蓝 
			

				

					学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。
				

      
查看更多关于纯css写的手风琴切换实例的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did115245