CSS实例讲解:地图提示

CSS实例讲解:地图提示

作者的BLOG:http://www.planabc.net/

地图弹窗(map pop)具体演示

运行代码框

<!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实例讲解:地图提示(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(http://www.blueidea.com/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;

第 1 2 3 4 5 6 7 8 9 10 11 页

CSS实例讲解:地图提示

相关文章:

你感兴趣的文章:

标签云: