css3带阴影效果的tab选项卡

1、新建html文档。

2、书写hmtl代码。

<div style="width: 1000px; margin: 0 auto 0 auto;">

  <h1>css3带阴影效果的tab选项卡</h1>

  <ul id="navigation">

    <li class="one"><a href="#">第一个</a></li>

    <li class="two"><a href="#">第二个</a></li>

    <li class="three selected"><a href="#">第三个</a></li>

    <li class="four"><a href="#">第四个</a></li>

    <li class="five"><a href="#">第五个</a></li>

    <li class="shadow"></li>

  </ul>

  <div id="content">

    <h2>内容</h2>

    <ol>

      <li>11111</li>

      <li>222222</li>

      <li>33333</li>

      <li>4444</li>

    </ol>

  </div>

</div>

3、初始化css代码。

<style>

html, body, div, span, applet, object, iframe, code, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-family: inherit; text-align: left; }

table { border-collapse: collapse; border-spacing: 0; }

ul { list-style: none; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; }

h1 { color: #fff; text-align: center; padding: 80px 0 30px 0; }

h2 { text-align: center; padding: 40px 0 0 0; width: 75%; margin: 0 auto; }

body { background: #131925; }

ol { list-style: decimal; font-size: 24px; width: 400px; padding: 30px 0 0 60px; margin: 0 auto; }

</style>

4、书写css代码。

ul#navigation { height: 36px; padding: 20px 20px 0 30px; width: 904px; margin: 0 auto; position: relative; overflow: hidden; }

ul#navigation li { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; float: left; width: 168px; margin: 0 10px 0 0; background-color: #2B477D; border: solid 1px #415F9D; position: relative; z-index: 1; }

ul#navigation li.selected { z-index: 3; }

ul#navigation li.shadow { width: 100%; height: 2px; position: absolute; bottom: -3px; left: 0; border: none; background: none; z-index: 2; -webkit-box-shadow: #111 0 -2px 6px; -moz-box-shadow: #111 0 -2px 6px; box-shadow: #111 0 -2px 6px; }

ul#navigation li a:link, ul#navigation li a:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; display: block; text-align: center; width: 168px; height: 40px; line-height: 36px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 1px; outline: none; float: left; background: #2B477D; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; }

ul#navigation li a:hover { background-color: #5a87dd; }

ul#navigation li.selected a:link, ul#navigation li.selected a:visited { color: #2B477D; border: solid 1px #fff; -webkit-transition: background-color 0.2s linear; background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2; background: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #f2f2f2), color-stop(.8, #d1d1d1)); background-color: #f2f2f2; }

#content { width: 910px; background: #f2f2f2; padding: 0 0 50px 0; margin: 0 auto; }

5、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script >

$(document).ready(function(){

$("ul#navigation li a").click(function() {

$("ul#navigation li").removeClass("selected");

$(this).parents().addClass("selected");

return false;

});

});

</script> 

6、代码整体结构。

7、查看效果。