国自产拍在线网站天天,亚洲宅男永久在线,亚洲制服aⅴ中文字幕

　CSS實(shí)例講解:地圖提示

作者：blank　時(shí)間： 2007-03-01　文檔類(lèi)型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) CSS實(shí)例講解:地圖提示 [1]
第 2 頁(yè) CSS實(shí)例講解:地圖提示 [2]
第 3 頁(yè) CSS實(shí)例講解:地圖提示 [3]
第 4 頁(yè) CSS實(shí)例講解:地圖提示 [4]

我們?cè)賮?lái)對(duì)span中的文字描述進(jìn)行樣式修飾，因?yàn)閟pan開(kāi)始是被隱藏的，所以設(shè)置只需在觸發(fā)的情況下設(shè)置就可以了：

ul li a:hover span.offset span, ul li a:focus span.offset span, ul li a:active span.offset span {
display:block;
width:140px;
height:120px
margin:5px;
}

隱藏顯示效果我們是達(dá)到了，但具體的map觸發(fā)范圍，定位，還有背景的變換我們還沒(méi)實(shí)現(xiàn)，繼續(xù)往下探討，僅以map01為例，其他雷同。

設(shè)置map01的寬度和高度，以及外邊距位置：

ul li a#map01 {
width:80px;
height:60px;
margin-top:0;
margin-left:130px;
}

當(dāng)觸發(fā)時(shí)改變其背景圖片（圖片的位置注意和map01的外邊距margin位置相對(duì)應(yīng)）：

ul li a#map01:hover, ul li a#map01:focus, ul#cmp li a#map01:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -130px 0px;
}

設(shè)置觸發(fā)后描述部分的位置，開(kāi)始我們對(duì)于a元素設(shè)置了1px的邊框，那么要讓map01中的描述顯示在右側(cè)，并且和a元素的位置top相同，則要讓類(lèi)選擇器為offset的span上移1px（我們通過(guò)margin-top的負(fù)值來(lái)實(shí)現(xiàn)），設(shè)置描述部分的外左邊距，剛才我們?cè)O(shè)置了map01的外左邊距為130px（ul的總寬為350px），那我們可以設(shè)置描述部分的外邊距大于220px（350px-130px）。

ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li a#map01:active span.offset {
margin-top:-1px;
margin-left:230px;
}

根據(jù)上面map01的設(shè)置方法來(lái)設(shè)置map02/map03/map04/map05，如下：

ul li a#map02 {
width:110px;
height:75px;
margin-top:-50px;
margin-left:235px;
}

ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -235px -10px;
}

ul li a#map02:hover span.offset, ul li a#map02:focus span.offset, ul li a#map02:active span.offset {
margin-top:-11px;
margin-left:125px;
}

ul li a#map03 {
width:75px;
height:95px;
margin-top:3px;
margin-left:115px;
}

ul li a#map03:hover, ul li a#map03:focus, ul li a#map03:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -115px -88px;
}

ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li a#map03:active span.offset {
margin-top:-89px;
margin-left:245px;
}

ul li a#map04 {
width:110px;
height:120px;
margin-top:-60px;
margin-left:5px;
}

ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -5px -123px;
}

ul li a#map04:hover span.offset, ul li a#map04:focus span.offset, ul li a#map04:active span.offset {
margin-top:-124px;
margin-left:355px;
}

ul li a#map05 {
width:95px;
height:97px;
margin-top:-90px;
margin-left:240px;
}

ul li a#map05:hover, ul li a#map05:focus, ul li a#map05:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -240px -153px;
}

ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li a#map05:active span.offset {
margin-top:-154px;
margin-left:120px;
}

可能有某些朋友看上面的map代碼的位置有些糊涂了，下面幾點(diǎn)或許有助于朋友們理解：
1、li元素設(shè)置為了內(nèi)聯(lián)行布局；
2、當(dāng)一個(gè)li和另外一個(gè)li的大小超過(guò)ul的大小時(shí)，另一個(gè)li將換行顯示。

再看下整體效果：

運(yùn)行代碼框
<!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=utf-8" /> <title>CSS實(shí)例講解：地圖提示（map pop）檔</title> <style type="text/css" media="all"> * { margin:0; padding:0; } img { border:0; } #show{ text-align:left; } ul { list-style-type:none; background: transparent url(/articleimg/2007/03/4514/map_flat.jpg) no-repeat 0 0; width:350px; height:250px; border:1px solid #000; } ul li { display:inline; } ul li a { position:relative; display:block; text-decoration:none; } ul li a span.offset { position:absolute; margin-top:-9000px; margin-left:-9000px; } ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset { color: #000; background-image:none; background-color:#ffffde; border:1px solid #000; display:block; width:150px; height:auto; text-decoration:none; cursor:pointer; } ul li a:hover span.offset span, ul li a:focus span.offset span, ul li a:active span.offset span { display:block; width:140px; margin:5px; height:120px; } ul li a#map01 { width:80px; height:60px; margin-top:0; margin-left:130px; } ul li a#map01:hover, ul li a#map01:focus, ul#cmp li a#map01:active { background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -130px 0px; } ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li a#map01:active span.offset { margin-top:-1px; margin-left:230px; } ul li a#map02 { width:110px; height:75px; margin-top:-50px; margin-left:235px; } ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active { background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -235px -10px; } ul li a#map02:hover span.offset, ul li a#map02:focus span.offset, ul li a#map02:active span.offset { margin-top:-11px; margin-left:125px; } ul li a#map03 { width:75px; height:95px; margin-top:3px; margin-left:115px; } ul li a#map03:hover, ul li a#map03:focus, ul li a#map03:active { background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -115px -88px; } ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li a#map03:active span.offset { margin-top:-89px; margin-left:245px; } ul li a#map04 { width:110px; height:120px; margin-top:-60px; margin-left:5px; } ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active { background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -5px -123px; } ul li a#map04:hover span.offset, ul li a#map04:focus span.offset, ul li a#map04:active span.offset { margin-top:-124px; margin-left:355px; } ul li a#map05 { width:95px; height:97px; margin-top:-90px; margin-left:240px; } ul li a#map05:hover, ul li a#map05:focus, ul li a#map05:active { background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -240px -153px; } ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li a#map05:active span.offset { margin-top:-154px; margin-left:120px; } </style> </head> <body> <ul> <li><a id="map01" href="#map01"><img src="/articleimg/2007/03/4514/map1.jpg" alt="Post Office" />This is the Popsville community Post Office, your home of over-priced postage. Click map for more</a></li> <li><a id="map02" href="#map02"><img src="/articleimg/2007/03/4514/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the Dew Drop Inn. Live music on the weekends. Click map for more</a></li> <li><a id="map03" href="#map03"><img src="/articleimg/2007/03/4514/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful River Beach. Hang out on the nude beach. Click map for more</a></li> <li><a id="map04" href="#map04"><img src="/articleimg/2007/03/4514/map4.jpg" alt="Woodland Traders" />Our local Woodland Traders is a veritable Mecca of consumer goods and hardware. Click map for more</a></li> <li><a id="map05" href="#map05"><img src="/articleimg/2007/03/4514/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the Wild Game Diner prepares it with special sauce. Click map for more</a></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

對(duì)于隱藏/顯示，還可以通過(guò)定義了絕對(duì)位置的子元素left負(fù)值無(wú)限遠(yuǎn)，并物理隱藏（visibility:hidden）或者通過(guò)改變display屬性來(lái)實(shí)現(xiàn)。有興趣的朋友可以嘗試一下用上面的兩種思路來(lái)實(shí)現(xiàn)。就當(dāng)作為這堂課的作業(yè)！

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2723547-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2007/4514.asp　

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) CSS實(shí)例講解:地圖提示 [3] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

徹底弄懂CSS盒子模式之三

作者文章

更多作者文章

42個(gè)值得閱讀的設(shè)計(jì)/技術(shù)雜志

由淺入深漫談margin屬性

網(wǎng)站瀏覽器兼容的底線(xiàn)

display:inline-block的深入理解

中英文雙語(yǔ)導(dǎo)航菜單


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶(hù)體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買(mǎi)真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線(xiàn)縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx