利用css3實現列表FAQ問答特效



21 80 27



特效描述:利用css3實現 列表FAQ 問答特效,利用css3實現列表FAQ問答特效

代碼結構

1. 引入JS

<script src="html5.js"></script>

2. HTML代碼

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Nunc nec arcu ac lacus?</label>           
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam.</p>
	<p>Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. </p>   
</section>
<section class="faq-section">
    <input type="checkbox" id="q2">
    <label for="q2">Fusce nec nibh purus?</label>           
	<p>Aliquam et tellus vel neque fringilla posuere ac non mi. Nunc mauris nunc, sollicitudin in pellentesque sed, rhoncus in nibh. Ut vestibulum consectetur tincidunt. Vestibulum facilisis tempus tortor ut ultricies. Fusce aliquet placerat massa nec tempor.</p>
	<p>Phasellus vel nunc id nisl lacinia vehicula. Maecenas quis nunc eros.</p>	
	<p>Pellentesque urna massa, aliquet a sagittis vel, eleifend ut est. Suspendisse gravida ultricies nisi, in euismod tortor consectetur ut. Phasellus sagittis, turpis quis cursus aliquet, purus dolor dictum tellus, vel dignissim lorem nibh ornare eros.</p>   
</section>
<section class="faq-section">
    <input type="checkbox" id="q3">
    <label for="q3">Vivamus posuere odio non est?</label>           
	<p>Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.</p>
	<p>Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi. Pellentesque posuere blandit nisi eget vestibulum. </p>   
</section>
<section class="faq-section">
    <input type="checkbox" id="q4">
    <label for="q4">Aenean viverra urna eget neque?</label>           
	<p>Praesent sed nulla in magna mollis interdum a porttitor eros. Nam a diam eu massa consequat pulvinar. Donec eu orci justo, sed consequat turpis. Nam scelerisque mi et tellus vehicula bibendum. Praesent pretium tempus mi nec convallis.</p>
	<p>Pretium, augue nec convallis tempor, nulla ipsum pulvinar nisi, ut tempus ante ante nec arcu.</p>   
</section>
<section class="faq-section">
    <input type="checkbox" id="q5">
    <label for="q5">Ut porttitor leo nec velit hendrerit?</label>           
	<p>Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.</p>
	<p> Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi. Pellentesque posuere blandit nisi eget vestibulum. </p>   
</section>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文字收縮展開 文字收縮 文字展開 答題 按鈕控制 按鈕樣式
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子