jQuery響應式表格設計制作橫向表格滾動條代碼



287 1145 382



特效描述:jQuery 響應式表格 橫向表格滾動條,橫向表格滾動條

代碼結構

1. 引入CSS

<link href='http://fonts.useso.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代碼

<section id="cd-table">
	<header class="cd-table-column">
		<h2>Features</h2>
		<ul>
			<li>Storage</li>
			<li>People</li>
			<li>Free trial</li>
			<li>Support</li>
			<li>Price</li>
		</ul>
	</header>
	<div class="cd-table-container">
		<div class="cd-table-wrapper">
			<div class="cd-table-column">
				<h2>Plan 1</h2>
				<ul>
					<li>1 GB</li>
					<li>2</li>
					<li>30 days</li>
					<li class="cd-unchecked"><span>No</span></li>
					<li>$9.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 2</h2>
				<ul>
					<li>2 GB</li>
					<li>5</li>
					<li>30 days</li>
					<li class="cd-unchecked"><span>No</span></li>
					<li>$19.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 3</h2>
				<ul>
					<li>5 GB</li>
					<li>10</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$29.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 4</h2>
				<ul>
					<li>10 GB</li>
					<li>20</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$39.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 5</h2>
				<ul>
					<li>20 GB</li>
					<li>Unlimited</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$49.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
		</div> <!-- cd-table-wrapper -->
	</div> <!-- cd-table-container -->
	<em class="cd-scroll-right"></em>
</section> <!-- cd-table -->



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滑動星星打分 其他 文字滾動 文字無縫滾動 文字間歇滾動 table表格 表格插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表