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>