|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title>CSS配合一张图片实现的不规则导航</title> <style media="screen"> #blobs { width: 300px; height: 150px; background: url(http://www./images/20110529/blobs.gif); margin: 10px auto; padding: 0; position: relative; } #blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;} #blobs a {display: block;} #blob1 {left: 9px; top: 7px; width: 86px; height: 130px;} #blob2 {left: 77px; top: 16px; width: 79px; height: 86px;} #blob3 {left: 160px; top: 0px; width: 112px; height: 77px;} #blob4 {left: 173px; top: 57px; width: 120px; height: 80px;} #blob5 {left: 110px; top: 102px; width: 98px; height: 45px;} #blob1 a {height: 130px;} #blob2 a {height: 86px;} #blob3 a {height: 77px;} #blob4 a {height: 80px;} #blob5 a {height: 45px;} #blob1 a:hover {background: url(http://www./images/20110529/blobs.gif) -10px -307px no-repeat;} #blob2 a:hover {background: url(http://www./images/20110529/blobs.gif) -77px -166px no-repeat;} #blob3 a:hover {background: url(http://www./images/20110529/blobs.gif) -160px -300px no-repeat;} #blob4 a:hover {background: url(http://www./images/20110529/blobs.gif) -173px -207px no-repeat;} #blob5 a:hover {background: url(http://www./images/20110529/blobs.gif) -110px -402px no-repeat;} </style> </head> <body> <ul id="blobs"> <li id="blob1"><a href="#"></a></li> <li id="blob2"><a href="#"></a></li> <li id="blob3"><a href="#"></a></li> <li id="blob4"><a href="#"></a></li> <li id="blob5"><a href="#"></a></li> </ul> <br /> <p><a href="http://www.">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </html>  图片为这张，我们通过其坐标进行不同块的定位。 |
|
|
