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, ifra罪焐芡拂me, 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、查看效果。
