使用CSS讓妳的網站的連接更多變化

[BabyStep]

1. 使用影像編輯軟體製作一個 icon，影像如下圖，檔名 externalLink.gif，存檔在 zen-cart 的 your template 的 images 資料夾備用。


灰色方塊的長及寬是1px，是方便妳測量icon的真實大小。實際繪製時請忽略灰色方塊，不予理會。

2. 在 zen-cart 的 your_template 的 css 的 stylesheet.css 中，加入以下的 css 語法。以下的語法的效果是連接到妳的網站以外的連接 (例如：open.38.com) 都會加上述的 icon 圖形，成果如下圖。

程式碼:

a[href^="http:"] {
background: url(../images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}

a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}

其他的用法：

3. 電子郵件的用法

程式碼:

a[href^="mailto:"] {
background: url(../images/email.png) no-repeat right top;
padding-right: 10px;
}

4. 及時通訊的用法

程式碼:

a[href^="aim:"] {
background: url(../images/im.png) no-repeat right top;
padding-right: 10px;
}

5. 文件下載可以加上不同的文件識別圖案。

程式碼:

a[href$=".pdf"] {
background: url(../images/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".doc"] {
background: url(../images/wordLink.gif) no-repeat right top;
padding-right: 10px;
}

6. 最後，RSS 連接也能裝飾一下。

程式碼:

a[href$=".rss"], a[href$=".rdf"] {
background: url(../images/feedLink.gif) no-repeat right top;
padding-right: 10px;
}