b.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>baby</title>
<link href="b.css" _fcksavedurl=""b.css"" _fcksavedurl=""b.css"" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav"><ul>
<li><a href="#" class="bei"></a></li>
<li><a href="#" class="jing"></a></li>
<li><a href="#" class="huan"></a></li>
<li><a href="#" class="ying"></a></li>
<li><a href="#" class="ni"></a></li>
</ul></div>
</body>
</html>
1.css
/*----------------Base---------------------*/
*{
margin: 0px;
padding: 0px;
}
#nav {
border: 1px solid #CCCCCC;
height:200px;
width: 610px;
display: block;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
font-family: "宋體";
font-size: 12px;
}
#nav li{
float: left;
width: 120px;
list-style-type: none;
}
#nav ul{
display: block;
}
/*----------------1---------------------*/
#nav li a.bei{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: 0px center;
}
#nav li a.bei:hover,#nav li a.bei:active{
background-image: url(baby.jpg);
}
/*----------------2---------------------*/
#nav li a.jing{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -122px center;
width:130px; /*--顯示寬度修æ£--*/
}
#nav li a.jing:hover,#nav li a.jing:active{
background-image: url(baby.jpg);
}
/*----------------3---------------------*/
#nav li a.huan{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -248px center;
}
#nav li a.huan:hover,#nav li a.huan:active{
background-image: url(baby.jpg);
}
/*----------------4---------------------*/
#nav li a.ying{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -368px center;
width:115px; /*--顯示寬度修æ£--*/
}
#nav li a.ying:hover,#nav li a.ying:active{
background-image: url(baby.jpg);
}
/*----------------5---------------------*/
#nav li a.ni{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: right center;
}
#nav li a.ni:hover,#nav li a.ni:active{
background-image: url(baby.jpg);
}
<a href="
http://www.namipan.com/d/749ae0baeb7f3331f9e5b5c6ae5a88f7ffd342bd5eed0200
">ç´ ææä¾›.rar</a>
效果演示如下:
æ›´å¤šæ–‡ç« ã€æŠ€è¡“(shù)交æµã€å•†å‹™(wù)åˆä½œã€è¯(lián)ç³»åšä¸»
微信掃碼或æœç´¢ï¼šz360901061
å¾®ä¿¡æŽƒä¸€æŽƒåŠ æˆ‘ç‚ºå¥½å‹
QQ號(hà o)è¯(lián)系： 360901061
您的支æŒæ˜¯åšä¸»å¯«ä½œæœ€å¤§çš„å‹•(dòng)力，如果您喜æ¡æˆ‘çš„æ–‡ç« ï¼Œæ„Ÿè¦ºæˆ‘çš„æ–‡ç« å°(duì)您有幫助，請(qÇng)用微信掃æ下é¢äºŒç¶ç¢¼æ”¯æŒåšä¸»2å…ƒã€5å…ƒã€10å…ƒã€20å…ƒç‰æ‚¨æƒ³æ的金é¡å§ï¼Œç‹ ç‹ é»ž(diÇŽn)擊下é¢çµ¦é»ž(diÇŽn)支æŒå§ï¼Œç«™é•·(zhÇŽng)éžå¸¸æ„Ÿæ¿€æ‚¨ï¼æ‰‹æ©Ÿ(jÄ«)微信長(zhÇŽng)按ä¸èƒ½æ”¯ä»˜è§£æ±ºè¾¦æ³•ï¼šè«‹(qÇng)將微信支付二ç¶ç¢¼ä¿å˜åˆ°ç›¸å†Š(cè)，切æ›åˆ°å¾®ä¿¡ï¼Œç„¶åŽé»ž(diÇŽn)擊微信å³ä¸Šè§’掃一掃功能，é¸æ“‡æ”¯ä»˜äºŒç¶ç¢¼å®Œæˆæ”¯ä»˜ã€‚
ã€æœ¬æ–‡å°(duì)您有幫助就好】元
