利用css3實現帶陰影效果的tab選項卡



18 71 24



特效描述:利用css3實現 帶陰影效果的 tab選項卡,利用css3實現帶陰影效果的tab選項卡

代碼結構

1. 引入CSS

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />

2. 引入JS

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

3. HTML代碼

?<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--[if gte IE 6]>
<style type="text/css">
ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#f2f2f2'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#d1d1d1, endColorstr=#f2f2f2)"; /* IE8 */
}
</style>
<![endif]-->
</head>
<body style="width: 98%;">
<div style="width: 1000px; margin: 0 auto 0 auto;">
<h1>CSS3 Glow Tabs with Box Shadow</h1>
<ul id="navigation">
	<li class="one"><a href="#">Details</a></li>
	<li class="two"><a href="#">Schedule</a></li>
	<li class="three selected"><a href="#">Speakers</a></li>
	<li class="four"><a href="#">Sponsors</a></li>
	<li class="five"><a href="#">Register</a></li>
	<li class="shadow"></li>
</ul>
	<div id="content">
	<h2>The tabs in this demo are image-less tabs<br />with 4 different CSS3 enhancements:</h2>
	<ol>
		<li>Rounded Corners (border-radius)</li>
		<li>Box Shadow (bottom of inactive tabs)</li>
		<li>Transitions (the glow on hover)</li>
		<li>Gradients (the active tab)</li>
	</ol>
	<h2>CSS Transitions work in Chrome, Safari, Opera 10.5 &amp; Firefox 3.7</h2>
	<h2>The basic idea and techniques presented here are taken from the tabs on the jQuery Conference site.</h2>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$("ul#navigation li a").click(function() {
		$("ul#navigation li").removeClass("selected");
		$(this).parents().addClass("selected");
		return false;
	});
});
</script>
<br>
</body>
</html>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 css繪制樣式 導航切換 菜單切換
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子