TAB1_1
TAB1_2
TAB1_3
.tabs { overflow:hidden; width:100%; margin:0; padding:0; list-style:none; } .tabs li { float:left; margin:0 -15px 0 0; border-bottom:1px solid #3d3d3d; } .tabs a { float:left; position:relative; padding:0 10px; height:0; line-height:25px; text-transform:uppercase; text-decoration:none; color:#fff; border-right:30px solid transparent; border-bottom:25px solid #3D3D3D; font-size:12px; border-bottom-color:#777\9; opacity:.3; filter:alpha(opacity = 30); } .tabs a:hover,.tabs a:focus { border-bottom-color:#2ac7e1; opacity:1; filter:alpha(opacity = 100); } .tabs a:focus { outline:0; } .tabs .current { z-index:3; border-bottom-color:#3d3d3d; opacity:1; filter:alpha(opacity = 100); } .content { background:#fff; padding-top:10px; font-size:12px; } .content h2,.content h3,.content p { margin:0 0 15px 0; } .about { color:#999; text-align:center; font:0.9em Arial,Helvetica; } .about a { color:#777; }
首先得先学好jQuery里面的所有方法 ,然后在jQuery里运用所学到的方法来实现多种效果