成人午夜激情影院,小视频免费在线观看,国产精品夜夜嗨,欧美日韩精品一区二区在线播放

不用熱區和介紹，用DIV+CSS實現地圖

2011-03-14 17:21:57來源：作者：

這個是以前客齊集首頁的地圖效果，使用div+css來做的中國地圖。通常這樣的情況,在最早,我可能用FLASH或熱點來完成。1.FLASH不利于SEO.面且如果用戶的電腦沒有安FLASH插件,也是沒有辦法看到的.更別說用手機上網的用戶

這個是以前客齊集首頁的地圖效果，使用div+css來做的中國地圖。通常這樣的情況,在最早,我可能用FLASH或熱點來完成。1.FLASH不利于SEO.面且如果用戶的電腦沒有安FLASH插件,也是沒有辦法看到的.更別說用手機上網的用戶了。2.然后就是用熱點來作.每個城市的熱區.都會通過上下左右四個值來計算.而且鼠標放上去還沒有什么效果.這樣感覺不爽.最主要的是代碼不比這樣作少.可能還會多一些.。

由于.就有了下邊的效果.雖然用這樣的方式制作過程比正常多出約1/3的時間.但效果還是不錯的.而且有利于SEO.我把正常情況的圖片和鼠標移上去的效果圖片寫成一個了.這樣.用戶把鼠標移上去后出現的圖片不用重新加載. 比較流暢. 

演示效果截圖

DIV+CSS實現可用的中國地圖

用到的圖片

\
\

CSS代碼

#main {
MARGIN: 10px auto 0px; WIDTH: 950px; TEXT-ALIGN: left}
#map {
BACKGROUND: url(map.gif) no-repeat left top;
FLOAT: left; WIDTH: 552px; HEIGHT: 447px}
#map H1 {
DISPLAY: block; FONT-WEIGHT: normal;POSITION: absolute}
.mapl A:link {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapl A:visited {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapr A:link {
DISPLAY: block; BACKGROUND: urlmaph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapr A:visited {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapl A:link {
BACKGROUND-POSITION: left 4px; PADDING-LEFT: 20px}
.mapl A:visited {
BACKGROUND-POSITION: left 4px; PADDING-LEFT: 20px}
.mapr A:link {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right 4px}
.mapr A:visited {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right 4px}
.mapl A:hover {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
.mapl A:active {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
.mapr A:hover {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
.mapr A:active {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
#map .mapr A:hover {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right bottom}
#map .mapr A:active {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right bottom}
#map .mapl A:hover {
BACKGROUND-POSITION: left bottom;PADDING-LEFT: 20px}
#map .mapl A:active {
BACKGROUND-POSITION: left bottom;PADDING-LEFT: 20px}
H1 {
PADDING-RIGHT: 0px;PADDING-LEFT: 0px;FONT-SIZE: 12px;PADDING-BOTTOM: 0px;
MARGIN: 0px; WORD-SPACING: 0px; PADDING-TOP: 0px; LETTER-SPACING: 0px}
BODY {
FONT-SIZE: 12px; BACKGROUND: #fff; COLOR: #666; LINE-HEIGHT: 1.8;
FONT-FAMILY: Verdana, "宋體", Arial,Sans; TEXT-ALIGN: center}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px}

HTML代碼

<DIV id=wrapper>
<DIV id=main>
<DIV id=map>
<H1 style="FONT-SIZE: 14px; font-weight:bold;
MARGIN: 90px 0px 0px 220px">www.865171.cn</H1>
<H1 class=mapl style="MARGIN: 162px 0px 0px 396px"><A 
style="FONT-WEIGHT: bold; COLOR: #ff0000" 
href="http://url">北京 </A></H1>
<H1 class=mapl style="MARGIN: 110px 0px 0px 465px"><A 
href="http://url">長春 </A></H1>
<H1 class=mapr style="MARGIN: 165px 0px 0px 305px"><A 
href="http://url">呼和浩特 </A></H1>
<H1 class=mapr style="MARGIN: 293px 0px 0px 255px"><A 
href="http://url">成都 </A></H1>
<H1 class=mapr style="MARGIN: 285px 0px 0px 300px"><A 
href="http://url">重慶 </A></H1>
<H1 class=mapl style="MARGIN: 154px 0px 0px 439px"><A 
href="http://url">大連 </A></H1>
<H1 class=mapr style="MARGIN: 370px 0px 0px 366px"><A 
href="http://url">廣州 </A></H1>
<H1 class=mapl style="MARGIN: 338px 0px 0px 305px"><A 
href="http://url">貴陽 </A></H1>
<H1 class=mapl style="MARGIN: 420px 0px 0px 342px"><A 
href="http://url">�？� </A></H1>
<H1 class=mapl style="MARGIN: 79px 0px 0px 489px"><A 
href="http://url">哈爾濱 </A></H1>
<H1 class=mapl style="MARGIN: 296px 0px 0px 445px"><A 
href="http://url">杭州 </A></H1>
<H1 class=mapr style="MARGIN: 261px 0px 0px 393px"><A 
href="http://url">合肥 </A></H1>
<H1 class=mapr style="MARGIN: 206px 0px 0px 383px"><A 
href="http://url">濟南 </A></H1>
<H1 class=mapr style="MARGIN: 359px 0px 0px 237px"><A 
href="http://url">昆明 </A></H1>
<H1 class=mapr style="MARGIN: 222px 0px 0px 264px"><A 
href="http://url">蘭州 </A></H1>
<H1 class=mapr style="Z-INDEX: 100; MARGIN: 250px 0px 0px 342px"><A 
href="http://url">洛陽 </A></H1>
<H1 class=mapl style="MARGIN: 317px 0px 0px 360px"><A 
href="http://url">長沙</A></H1>
<H1 class=mapl style="MARGIN: 317px 0px 0px 405px"><A 
href="http://url">南昌 </A></H1>
<H1 class=mapl style="MARGIN: 255px 0px 0px 430px"><A 
href="http://url">南京 </A></H1>
<H1 class=mapl style="MARGIN: 229px 0px 0px 418px"><A 
href="http://url">徐州 </A></H1>
<H1 class=mapl style="MARGIN: 214px 0px 0px 433px"><A 
href="http://url">青島 </A></H1>
<H1 class=mapl style="Z-INDEX: 99; MARGIN: 366px 0px 0px 400px"><A 
href="http://url">汕頭 </A></H1>
<H1 class=mapl style="MARGIN: 280px 0px 0px 458px"><A 
style="FONT-WEIGHT: bold; COLOR: #ff0000" 
href="http://url">上海 </A></H1>
<H1 class=mapl style="MARGIN: 383px 0px 0px 392px"><A 
href="http://url">深圳 </A></H1>
<H1 class=mapr style="MARGIN: 138px 0px 0px 433px"><A 
href="http://url">沈陽 </A></H1>
<H1 class=mapr style="MARGIN: 191px 0px 0px 355px"><A 
href="http://url">石家莊 </A></H1>
<H1 class=mapl style="MARGIN: 270px 0px 0px 430px"><A 
href="http://url">無錫 </A></H1>
<H1 class=mapr style="MARGIN: 272px 0px 0px 390px"><A 
href="http://url">馬鞍山 </A></H1>
<H1 class=mapr style="MARGIN: 204px 0px 0px 338px"><A 
href="http://url">太原 </A></H1>
<H1 class=mapl style="MARGIN: 176px 0px 0px 408px"><A 
href="http://url">天津 </A></H1>
<H1 class=mapl style="MARGIN: 115px 0px 0px 145px"><A 
href="http://url">烏魯木齊 </A></H1>
<H1 class=mapr style="MARGIN: 277px 0px 0px 357px"><A 
href="http://url">武漢 </A></H1>
<H1 class=mapr style="MARGIN: 263px 0px 0px 347px"><A 
href="http://url">南陽 </A></H1>
<H1 class=mapr style="MARGIN: 238px 0px 0px 314px"><A 
href="http://url">西安 </A></H1>
<H1 class=mapl style="MARGIN: 353px 0px 0px 424px"><A 
href="http://url">廈門 </A></H1>
<H1 class=mapl style="MARGIN: 189px 0px 0px 438px"><A 
href="http://url">煙臺 </A></H1>
<H1 class=mapl style="MARGIN: 235px 0px 0px 377px"><A 
href="http://url">鄭州 </A></H1>
<H1 class=mapr style="MARGIN: 225px 0px 0px 350px"><A 
href="http://url">焦作 </A></H1>
<H1 class=mapr style="MARGIN: 383px 0px 0px 355px"><A 
href="http://url">珠海 </A></H1>
<H1 class=mapl style="MARGIN: 200px 0px 0px 415px"><A 
href="http://url">淄博 </A></H1>
<H1 class=mapl style="MARGIN: 335px 0px 0px 435px"><A 
href="http://url">福州 </A></H1>
<H1 class=mapl style="MARGIN: 375px 0px 0px 315px"><A 
href="http://url">南寧 </A></H1></DIV>
</DIV>
</DIV>
關鍵詞：CSS

贊助商鏈接:

主站蜘蛛池模板： 隆林| 阜平县| 长岛县| 辛集市| 揭阳市| 元阳县| 华坪县| 红原县| 武川县| 清水河县| 裕民县| 沂南县| 盈江县| 阿勒泰市| 金门县| 磐安县| 尚志市| 和平区| 曲水县| 肥乡县| 洪雅县| 德惠市| 什邡市| 鱼台县| 商水县| 临猗县| 泰兴市| 淮滨县| 徐州市| 报价| 乐至县| 新蔡县| 柞水县| 靖州| 凉城县| 太谷县| 星子县| 平顶山市| 永吉县| 德保县| 霞浦县|