CSS 构造超链接

浏览数：32 / 时间：2015年06月09日

一：超链接边框

1.给链接加上边框

<style type="text/css">
a{
    font-size:36px;
}
a:link{
    color:#009;
    text-decoration:none;
    border-bottom:2px solid #F00;
    line-height:150%;
}
<!--line-height:是为了和下划线分开点-->
</style>
</head>

<body>
    <a href="#">PHP100.COM中文网</a>
</body>

2.在文章段落中加上超级链接

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    A:link {
        color: #f00;
        text-decoration: none;
        border: 1px solid #333;
        background: #ccc;
        padding: 2px;
        line-height: 150%;
    }
</style>
</head>

<body>
    <p>PHP100.COM中文网,<a href="#">PHP</a>资源共享站</p>
</body>

3. 用背景图象添加记号

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a:link{
        color: #f00;
        padding-left:13px;
        background:url(fasfas.gif) no-repeat left center;
        text-decoration:none;
    }
    a:visited{
        color:#900;
        padding-left:13px;
        background:url(das.gif) no-repeat left center;
        text-decoration:none;
    
    }
    <!--将visited改为hover可以实现鼠标浮动的效果-->
</style>
</head>

<body>
    <p>PHP100.COM中文网,<a href="www.baidu.com">PHP</a>资源共享站</p>
</body>

4.利用图片作为下划线

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a{
        background:url(underline1.gif) repeat-x left bottom;
        text-decoration:none;
        line-height:150%;
    }
    a:hover{
        background:url(underline1-hover.gif) repeat-x left bottom;
        text-decoration:none;
        line-height:150%;
    }
</style>
</head>

<body>
    <p>PHP100.COM中文网,<a href="www.baidu.com">P H P</a>资源共享站</p>
</body>

5.突出显示不同类型的链接

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a{
        color:#F00;
    }
    a:hover{
        color:#6F0;
    }
    .ex{
        color:#00F;
        background:url(externalLink.gif) no-repeat left center;
        padding:20px;
    }
</style>
</head>

<body>
    <p>PHP100.COM中文网,<a href="www.baidu.com">PHP</a>资源共享站! <a href="#" class="ex">论坛</a></p>
</body>

6.使用属性选择器来做链接

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a[href^="http:"] {
        background:url(externalLink.gif) no-repeat left top;
        padding-left:10px;
    }
    a[href^="mailto:"] {
        background:url(email.png) no-repeat left top;
        padding-left: 13px;
    }
</style>
</head>

<body>
    <p>PHP100.COM中文网,<a href="http:\\www.baidu.com">PHP</a>资源共享站! <a href="mailto:[email protected]">邮件  </a><a href="http:\\www.sina.com.cn" class="ex">论坛</a></p>
</body>

7.创建按钮和翻转

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a {
        Display: block;
        Width: 140px;
        Padding: 3px;
        height:30ox
        Line-height: 30px;
        Background-color: #94b8e9;
        Border: 1px solid black;
        Color: #000;
        Text-decoration: none;
        Text-align: center;
    }
    a:hover {
        background-color: #369;
        color:#fff;
    }
</style>
</head>

<body>
    <a href="http:\\www.baidu.com">PHP100.COM中文网</a>
</body>

8.具有图象的翻转

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
    a {
        Display: block;
        Width: 200px;
        Height: 40px;
        Line-height: 40px;
        Background-color: #94b8e9;
        Color: #000;
        Text-decoration: none;
        Text-indent:50px;
        Background: #94b8ea url(button.gif) no-repeat left top;
    }
    A:hover {
        Background: #369 url(button_over.gif) no-repeat left top;
        Color: #fff;
    }
</style>
</head>

<body>
    <a href="http:\\www.baidu.com">PHP100.COM中文网</a>
</body>

9纯 css 工具提示

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浏览器检测</title>
<style type="text/css">
a.tooltip {
    position: relative;
}
a.tooltip span {
    display: none;
}
a.tooltip:hover {
        font-size: 100%; /* Fixes bug in IE5.x/Win */
}
a.tooltip:hover span {
    display:block;
    position:absolute;
    top:1em;
    left:2em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:# 000;
}
</style>
</head>

<body>
    <p><a href="#">PHP100.COM<span>PHP官网</span></a></p>
    
    <p>
        <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website
            rocks) </span></a> is a web developer based in Brighton England.
</p>
</body>