为链接应用样式

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编辑  收藏  举报