<!doctype html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>伪类导个航..</title> <style type=”text/”> /*css部分, 留意其中border, margin, left, right的取值*/ body{background:#EEE;margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;color:#FFF;} #nav_demo{overflow:hidden;width:520px;margin:100px auto 0px;} #nav_demo span{float:left;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;} .shenzhen{background:#4FA3DA;} .guangzhou{background:#666912;} .shanghai{background:#9B44BC;} .beijing{background:#9B2222;} .chengdu{background:#804B12;}
.shenzhen:hover{background:#387399;} .guangzhou:hover{background:#4B4D0E;} .shanghai:hover{background:#692A81;} .beijing:hover{background:#711A1A;} .chengdu:hover{background:#59390E;}
.shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{ border-style:solid; border-width:15px 10px; content:””; height:0; position:absolute; top:0; width:0; } .shenzhen:before{border-color:#4FA3DA #4FA3DA transparent transparent;left:-20px;} .guangzhou:before{border-color:#666912 #666912 transparent transparent;left:-20px;} .shenzhen:after{border-color:transparent transparent #4FA3DA #4FA3DA;right:-20px;} .guangzhou:after{border-color:transparent transparent #666912 #666912;right:-20px;}
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:-20px;} .guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:-20px;} .shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:-20px;} .guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:-20px;}
#ti{float:right;margin-right:200px;margin-top:20px;color:#8BA612;width:280px;background:#333;border:solid 1px #000;padding:5px 10px;} #header{position:absolute;top:0px;width:100%;height:30px;line-height:30px;background:#333;border-bottom:solid 1px #000;} #header span{padding-left:30px;padding-right:10px;} #header a{text-decoration:none;color:#8BA612;} #header a:hover{text-decoration:underline;} #footer{position:absolute;bottom:0px;width:100%;text-align:center;height:30px;line-height:30px;background:#333;border-top:solid 1px #000;} #footer a{color:#8BA612;text-decoration:none;padding-left:5px;} #footer a:hover{text-decoration:underline;} </style> </head>
<body> <div id=”header”><span>返回</span><a href=>《回来锄草..CSS伪类:before, :after》</a></div> <div id=”nav_demo”> <span class=”shenzhen”>8.29 深圳</span> <span class=”guangzhou”>9.10 广州</span> <span class=”shanghai”>10.15 上海</span> <span class=”beijing”>11.12 北京</span> <span class=”chengdu”>12.10 成都</span> </div> <div id=”tips”>Tips: 你用IE6 IE7, 那就活该你看不到效果…</div> <div id=”footer”></div> </body> </html>
|