Board logo

標題: [CSS] 純CSS變色表單 [打印本頁]
作者: kayin    時間: 2004-7-16 11:16 AM     標題: 純CSS變色表單

轉貼自網站建置百寶箱
【設定style 】
  1. <style type="text/css">
  2. <!--
  3. div#links {
  4.         position: relative;
  5.         width: 150px;
  6. }

  8. div#links a {
  9.         display: block;
  10.         width: 150px;
  11.         text-align: center;
  12.         font-size: 9pt;
  13.         padding: 5px 5px 5px 5px;
  14.         margin: 1px 0 0 0;
  15.         border-width: 0px;
  16.         text-decoration: none;
  17.         color: #FFC;
  18.         background: #444;
  19. }

  21. div#links a:hover {
  22.         color: #411;
  23.         background: #AAA;}

  25. -->
  26. </style>
複製代碼
【修改程式碼】
1. 在這裏，我們設定了一個大的div，其id為"links"，我們會在這div裏放入我們的link，設定好其位置與大小。

2. 然後，我們將links入面的a用display:block設定成block元素，再設定大小、文字與背景顏色等等。

3. 最後，我們將links的 a:hover設定滑鼠在上面滑過時的背景與文字顏色。

4. 當然，如果這個表單會套到不同的div上去，那就用class，不要用id啦。

【在網頁加上連結 】
  1. <div id="links">
  2. <a href=#>連結1</a>
  3. <a href=#>連結2</a>
  4. <a href=#>連結3</a>
  5. <a href=#>連結4</a>
  6. <a href=#>連結5</a>
  7. <a href=#>連結6</a>
  8. </div>
複製代碼
【修改程式碼】
因為之前的style已經作好，所以現在內容變得很簡單，沒有一大煩人的table，也不用javascript，大家可以換上自己的連結來試試。
作者: kayin    時間: 2004-7-16 11:17 AM

有人問我：我不熟識css的定位法，可以用table作同樣的效果嗎？答案是：當然可以，而且也是純css，不用javascript。

首先定義css, 因為今次在table上用, 所以我們這樣設定：
  1. #menu td a{
  2. display:block;
  3. width: 100%;
  4. height: 100%;
  5. text-decoration: none;
  6. color: #FFC;
  7. background: #444;
  8. }
  9. #menu td a:hover{
  10. color: #411;
  11. background: #AAA;
  12. }
複製代碼

意思就是將id="menu"的元素底下的td底下的a設定成display:block，width和height設定成100%就是用盡td格子裏所有的空間，然後就是如教學中的設定背景色。

然後就可以如常地建立table，只要加上id="menu"就可以，例：

  1. <table id="menu" border="1" cellspacing="1" cellpadding="0" align="center" width="150px" >
  2. <tr><td align="center"><a href="#">Link</a></td></tr>
  3. <tr><td align="center"><a href="#">Link</a></td></tr>
  4. <tr><td align="center"><a href="#">Link</a></td></tr>
  5. <tr><td align="center"><a href="#">Link</a></td></tr>
  6. <tr><td align="center"><a href="#">Link</a></td></tr>
  7. </table>
複製代碼


代價就是代碼多了近一倍，而且不能單靠外css檔而改變表單的外表，只能改變顏色，所以我還是提議大家用css的定位法來建立。
作者: kayin    時間: 2004-10-5 03:53 PM

補充一個單純變色

  1. <tr bgcolor="#ddFFFF " onMouseOver="this.style.backgroundColor=’#fc
  2. fcfc’; "onMouseOut="this.style.backgroundColor=’#ddffff’;" >
  3. <td>
  4. 變色
  5. </td>
複製代碼




歡迎光臨 Kuroshio Ocean Design - 黑潮設計 (http://forum.kod.tw/) Powered by Discuz! 7.2