为链接应用样式

1 为目标链接应用样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为链接目标设定样式</title>
    <style>
    <!--不是目标链接的div框的样式-->

        .comment{
            margin-top: 20px;
            background-color:#d3ff99;
            border: solid 1px #ffffaa;
            padding:25px;
        }


    <!--当目标链接的div框的样式-->
        .comment:target{
            background-color:orange;

          <!--圆角边框-->
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;


          <!--投影-->
            -webkit-box-shadow: 3px 6px 6px #ccc;
            -moz-box-shadow: 3px 6px 6px #ccc;
            box-shadow:  3px 6px 6px #ccc;


        }
    </style>
</head>
<body>

<div class="comment" id="comment1">
    <h2>Comment1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda blanditiis, commodi culpa ducimus eaque esse ex expedita, labore laborum magni mollitia necessitatibus nobis odit sequi similique soluta sunt tenetur, ullam.</p>

    <p><a href="#comment3">Comment3</a></p>
</div>

<div class="comment" id="comment2">
    <h2>Comment2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aperiam deserunt exercitationem? Accusamus beatae eligendi nulla odit, praesentium sed tempora voluptate. Culpa cum ex, facere iste odit repudiandae suscipit.</p>

    <p><a href="#comment1">Comment1</a></p>
</div>

<div class="comment" id="comment3">
    <h2>Comment3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos ex impedit ipsa, unde veniam vero! Aspernatur delectus deserunt doloribus illo inventore iste iusto neque optio quia quo, suscipit ullam veritatis?</p>
    <p><a href="#comment2">Comment2</a></p>
</div>
</body>
</html>

 

2 创建类似按钮的链接,并对不同情况下的链接应用不同的样式--改变按钮的背景

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> make a to button</title>
    <style>
        a:link,a:visited{
        
            <!--将链接变成块状元素,并且设定宽度还有高度-->
            display: block;
            width: 203px;
            height: 72px;
            text-indent: -1000em;
            background:url(img/button.png) left top no-repeat;
        }
        
        <!--利用伪类,针对不同的情况,采用不同的北京图片-->
        a:hover,a:focus{
            background: url(img/button-over.png);
        }
        
        a:active{
            background: url(img/button-active.png);
        }
    </style>
</head>
<body>
<div><a href="http://www.baidu.com" target="_blank"></a></div>
</body>
</html>

 

3 跟上面一个类似.

但是我们知道每一次背景图片的改变都需要向服务器请求一次图片,所以干脆将三张图片做成一张图片,称为CSS精灵文件,这样可以一次性就下载下来,减小对服务器的请求次数.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Buttons</title>
    <style>
     
       <!--通过改变图片的位置,应用背景-->
        a:link,a:visited{
            display: block;
            width: 203px;
            height: 72px;
            background: url("img/buttons.png") -203px 0 no-repeat;
        }

        a:hover,a:focus{
            background: url(img/buttons.png) left top no-repeat;
        }

        a:active{
            background:url(img/buttons.png) right top no-repeat;
        }
    </style>
</head>
<body>
<div><a href="http://www.baidu.com" target="_blank"></a></div>
</body>
</html>

 

4 纯CSS提示--单纯利用CSS完成提示

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS提示</title>
    <style>
        a{
            position: relative;
            text-decoration: none;
        }

        a span{
            display: none;
        }

        a:hover span,a:focus span{
            border: 1px solid #996633;
            background-color:#ffff66;
            padding: 0.2em 0.6em;
            position: absolute;
            left: 2em;
            top: 1em;
            color:#434343;
            display: block;
        }
    </style>
</head>
<body>
<p><a href="http://www.baidu.com">百度一下,你就知道<span>这就是饱受非议的百度搜索!!!</span>快来点击试试看吧.</a></p>
</body>
</html>

 

posted @ 2015-10-11 21:12  Kerita  阅读(299)  评论(0)  编辑  收藏  举报