[CSS] 純CSS變色表單 444, 表, background, position, relative

kayin

轉貼自網站建置百寶箱
【設定style 】

1. <style type="text/css">
   
2. <!--
   
3. div#links {
   
4.         position: relative;
   
5.         width: 150px;
   
6. }
   
7. 
   
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. }
    
20. 
    
21. div#links a:hover {
    
22.         color: #411;
    
23.         background: #AAA;}
    
24. 
    
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

有人問我：我不熟識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

補充一個單純變色

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

複製代碼