1. 论坛系统升级为Xenforo,欢迎大家测试!
    Dismiss Notice

扩展链接样式

Discussion in '前端开发' started by 不学无术, Feb 9, 2006.

  1. 不学无术

    不学无术 Ulysses 的元神

    Joined:
    Aug 31, 2005
    Messages:
    16,714
    Likes Received:
    39
    Code:
    /* 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;
    }
    根据网络协议的不同,在链接上加上不同的图标以示区别和提醒,从而增强用户亲和力。

    :)