扩展链接样式

代码:

/* External Link Styles ********************************************************* */
/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
*/

.exlink {
    background: url("images/external.png") center right no-repeat;
    padding-right: 13px;
}
a[href ^="http://"],
a[href ^="gopher://"] {
    background: url("images/external.png") center right no-repeat;
    padding-right: 13px;
}
a[href ^="https://"],
.link-https {
    background: url("images/lock_icon.gif") center right no-repeat;
    padding-right: 16px;
}
a[href ^="mailto:"],
.link-mailto {
    background: url("images/mail_icon.gif") center right no-repeat;
    padding-right: 18px;
}
a[href ^="news://"] {
    background: url("images/news_icon.png") center right no-repeat;
    padding-right: 18px;
}
a[href ^="ftp://"],
.link-ftp {
    background: url("images/file_icon.gif") center right no-repeat;
    padding-right: 18px;
}
a[href ^="irc://"],
.link-irc {
    background: url("images/discussionitem_icon.gif")  center right no-repeat;
    padding-right: 18px;
}
.urlexpansion {
    display: none;
}

根据网络协议的不同，在链接上加上不同的图标以示区别和提醒，从而增强用户亲和力。