標籤：style blog http java color 使用
1，Html代碼
1 <body> 2 <div id="box"> 3 <ul id="tab_nav"> 4 <li class="nonblank">購買標書</li> 5 <li class="blank"></li> 6 <li class="nonblank">法授</li> 7 <li class="blank"></li> 8 <li class="nonblank">銀行資質證明</li> 9 <li class="blank"></li>10 <li class="nonblank">查閱檔案</li>11 <li class="blank"></li>12 <li class="nonblank">投標分工確認</li>13 <li class="blank"></li>14 <li class="nonblank">公章使用</li>15 <li class="blank"></li>16 <li class="nonblank">購買</li>17 </ul>18 </div>19 </body>
2，CSS代碼
<style type="text/css"> #box { height: 300px; margin-top: 200px; margin-left: 200px; } .nonblank { float: left; list-style: none; border: 1px solid #999; height: 31px; line-height: 31px; width: 110px; text-align: center; background-color: #efeff7; font-size: 15px; font-weight: 600; cursor:pointer; } .blank { float: left; border:none; border-bottom:1px solid #999; width:5px; line-height:31px; height: 32px; margin:0; list-style: none; } </style>
3，JS代碼
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function () { $("li[class=nonblank]").each(function (index) { $(this).mouseover(function () {// $(this).css("backgroundColor", "red"); }).click(function () { $("li[class=nonblank]").css("backgroundColor", "#efeff7"); $("li[class=nonblank]").css("borderBottom", "1px solid #999"); $(this).css("backgroundColor", "white"); $(this).css("borderBottom", "none"); }).mouseout(function () {// $("li[class=nonblank]").css("backgroundColor", "#efeff7"); }) }) }) </script>
4，
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
