希望以下小小的效果，能给做网站设计的你提供些许灵感。

前些日在QQ群里讨论网站标准的问题，在群空间里发现了一个css地图，我想可能是哪个网站上下载下来的吧，我拿下来看看，发现效果很好，能把地图做成这样，一定费了很大的功夫，但是css超级混乱，所以重新整理了一下。当然，h1可以换成其他标签，比如p

代码如下：

样式表

<style type="text/css">
<!--
#main_position {
    margin: 10px auto 0px;
    width: 950px;
    text-align: left;
    font-size: 12px;
    color: #666;
    font-family: verdana, "宋体", arial, sans;   
}

#map {
    background: url(/static/userfiles/Image/design/article/104/map.gif) no-repeat left top;
    float: left;
    width: 552px;
    height: 447px
}

#map h1 {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    display: block;
    font-weight: normal;
    position: absolute；
}
#map a {
    text-decoration: none;
    display: block;
    background-image:url(/static/userfiles/Image/design/article/104/maph1.gif);
    background-repeat:no-repeat;
}

/***连接颜色***/
#map a:link {
    color: #000;
}

#map a:visited {
    color: #000;
}

#map a:hover {
    color: #ff0000;
}

#map a:active {
    color: #000;
}

/***图标在左侧***/
.mapl a{
    padding-left: 20px;
    }

.mapl a:link, .mapl a:visited {
    background-position: left 4px;
}

.mapl a:hover, .mapl a:active {
    background-position: left bottom;
}

/***图标在右侧***/
.mapr a {
    padding-right: 20px;
}

.mapr a:link, .mapr a:visited {
    background-position: right 4px;
}

.mapr a:hover, .mapr a:active {
    background-position: right bottom;
}
-->
</style>

xhtml 代码

<div id="main_position">
    <div id="map">
        <h1 style="font-size: 14px; margin: 90px 0px 0px 210px">请先选择您所在的城市：</h1>
        <h1 class="mapl" style="margin: 162px 0px 0px 396px"><a href="#" style="font-weight: bold; color: #ff0000">北京 </a></h1>
        <h1 class="mapl" style="margin: 110px 0px 0px 465px"><a href="#">长春 </a></h1>
        <h1 class="mapr" style="margin: 165px 0px 0px 305px"><a href="#">呼和浩特 </a></h1>
        <h1 class="mapr" style="margin: 293px 0px 0px 255px"><a href="#">成都 </a></h1>
        <h1 class="mapr" style="margin: 285px 0px 0px 300px"><a href="#">重庆 </a></h1>
        <h1 class="mapl" style="margin: 154px 0px 0px 439px"><a href="#">大连 </a></h1>
        <h1 class="mapr" style="margin: 370px 0px 0px 366px"><a href="#">广州 </a></h1>
        <h1 class="mapl" style="margin: 338px 0px 0px 305px"><a href="#">贵阳 </a></h1>
        <h1 class="mapl" style="margin: 420px 0px 0px 342px"><a href="#">海口 </a></h1>
        <h1 class="mapl" style="margin: 79px 0px 0px 489px"><a href="#">哈尔滨 </a></h1>
        <h1 class="mapl" style="margin: 296px 0px 0px 445px"><a href="#">杭州 </a></h1>
        <h1 class="mapr" style="margin: 261px 0px 0px 393px"><a href="#">合肥 </a></h1>
        <h1 class="mapr" style="margin: 206px 0px 0px 383px"><a href="#">济南 </a></h1>
        <h1 class="mapr" style="margin: 359px 0px 0px 237px"><a href="#">昆明 </a></h1>
        <h1 class="mapr" style="margin: 222px 0px 0px 264px"><a href="#">兰州 </a></h1>
        <h1 class="mapr" style="z-index: 100; margin: 250px 0px 0px 342px"><a href="#">洛阳 </a></h1>
        <h1 class="mapl" style="margin: 317px 0px 0px 360px"><a href="#">长沙</a></h1>
        <h1 class="mapl" style="margin: 317px 0px 0px 405px"><a href="#">南昌 </a></h1>
        <h1 class="mapl" style="margin: 255px 0px 0px 430px"><a href="#">南京 </a></h1>
        <h1 class="mapl" style="margin: 229px 0px 0px 418px"><a href="#">徐州 </a></h1>
        <h1 class="mapl" style="margin: 214px 0px 0px 433px"><a href="#">青岛 </a></h1>
        <h1 class="mapl" style="z-index: 99; margin: 366px 0px 0px 400px"><a href="#">汕头 </a></h1>
        <h1 class="mapl" style="margin: 280px 0px 0px 458px"><a style="font-weight: bold; color: #ff0000" href="#">上海 </a></h1>
        <h1 class="mapl" style="margin: 383px 0px 0px 392px"><a href="#">深圳 </a></h1>
        <h1 class="mapr" style="margin: 138px 0px 0px 433px"><a href="#">沈阳 </a></h1>
        <h1 class="mapr" style="margin: 191px 0px 0px 355px"><a href="#">石家庄 </a></h1>
        <h1 class="mapl" style="margin: 270px 0px 0px 430px"><a href="#">无锡 </a></h1>
        <h1 class="mapr" style="margin: 272px 0px 0px 390px"><a href="#">马鞍山 </a></h1>
        <h1 class="mapr" style="margin: 204px 0px 0px 338px"><a href="#">太原 </a></h1>
        <h1 class="mapl" style="margin: 176px 0px 0px 408px"><a href="#">天津 </a></h1>
        <h1 class="mapl" style="margin: 115px 0px 0px 145px"><a href="#">乌鲁木齐 </a></h1>
        <h1 class="mapr" style="margin: 277px 0px 0px 357px"><a href="#">武汉 </a></h1>
        <h1 class="mapr" style="margin: 263px 0px 0px 347px"><a href="#">南阳 </a></h1>
        <h1 class="mapr" style="margin: 238px 0px 0px 314px"><a href="#">西安 </a></h1>
        <h1 class="mapl" style="margin: 353px 0px 0px 424px"><a href="#">厦门 </a></h1>
        <h1 class="mapl" style="margin: 189px 0px 0px 438px"><a href="#">烟台 </a></h1>
        <h1 class="mapl" style="margin: 235px 0px 0px 377px"><a href="#">郑州 </a></h1>
        <h1 class="mapr" style="margin: 225px 0px 0px 350px"><a href="#">焦作 </a></h1>
        <h1 class="mapr" style="margin: 383px 0px 0px 355px"><a href="#">珠海 </a></h1>
        <h1 class="mapl" style="margin: 200px 0px 0px 415px"><a href="#">淄博 </a></h1>
        <h1 class="mapl" style="margin: 335px 0px 0px 435px"><a href="#">福州 </a></h1>
        <h1 class="mapl" style="margin: 375px 0px 0px 315px"><a href="#">南宁 </a></h1>
    </div>
</div>