師友會電子報第 76 期 - 軟體操作小撇步

【利用CSS快速製作導覽列】

一、尚未設定CSS時，原始碼與顯示效果如下：

HTML碼：

<table align="center" cellspacing="0">
<tr>
    <td colspan="3"><div align="center"><img src="images/top_01.gif" width="238" height="49"></div></td>
</tr>
<tr bgcolor="#FFFFFF">
    <td><a href="http://www.csf.org.tw" target="_blank">TQC認證</a></td>
    <td><a href="http://www.csf.org.tw" target="_blank">ITE認證</a></td>
    <td><a href="http://www.csf.org.tw" target="_blank">ICDL認證</a></td>
</tr>
</table>

二、使用CSS後，原始碼與顯示效果如下：

TQC認證為連結狀態，ITE認證為滑鼠移過的狀態，ICDL認證為連結點選過後的狀態。

HTML碼

<table align="center" cellspacing="0" id="tqc">
<tr>
    <td colspan="3"><div align="center"><img src="images/top_01.gif" width="238" height="49"></div></td>
</tr>
<tr bgcolor="#FFFFFF">
    <td><a href="http://www.csf.org.tw" target="_blank">TQC認證</a></td>
    <td><a href="http://www.csf.org.tw" target="_blank">ITE認證</a></td>
    <td><a href="http://www.csf.org.tw" target="_blank">ICDL認證</a></td>
</tr>
</table>

CSS碼

#tqc {
        width:200 px;
        border: 1px solid #000000;
        word-spacing: 2px;
        letter-spacing: 2px;
        font-family:Arial,"新細明體", ;
        font-size:13px;
        color:#666666;
        line-height:18px;
}
#tqc td {
        background-color:#FFFFFF;
        text-align:center;
        padding:0px ;
}
#tqc a {
        display:block;
}
#tqc a:link {
        color:#006699;
        text-decoration:none;
}
#tqc a:visited {
        color:#CC9900;
        text-decoration::none;
}
#tqc a:hover {
        text-decoration:underline;
        background-color:#FFFFCC;
}

各位有沒有發現到在HTML碼的部份，只有在<table>標籤中多了一項id的設定，此項設定是告知瀏覽器，這個表格是使用id為tqc的CSS設定！

而在CSS碼的部份，我們先設定出tqc的基本設定，再利用樣式表子選取器的方式，設定連結的樣式！

此種作法的好處是，可以很方便的修改樣式表以更換顯示出的效果，且各位有注意到嗎？因為是使用ID子選取器的方式，所以影響的範圍只有在該ID套用的範圍。如果同一頁面需要二種以上的連結顯示設定時，用此種方式就可以很方便的設定。

下圖是直式選單的範例

　