1-26 图片+相对位置+地图式跳转

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<STYLE>

picture{position:relative;}

TITLE{position:absolute;margin-top:50px;margin-left:50px;font-family:"Comic Sans MS", cursive, serif}

</STYLE>

</head>

<body>

<div id="picture" position:relative>

<div id="title">
<h1>FACE</h1>
<p>
<a href ="http://img.hb.aicdn.com/000dcb55c1b0f5c8e790daf42ea1678f500194565d54-djOlcI_fw658"
target ="_blank"
alt="eyes" style="textdecoration:none">EYES</a>
LIPS
NOSE
LOVE

</div>
<img src="http://img.hb.aicdn.com/1e98f2aa291c25060809dbfa5b89bde5d302539cb099-q4lyxq_fw658" width="600" height="800" usemap="#face">

<map name="face" id="face">

<area shape="circle" coords="370,163,28" href ="http://img.hb.aicdn.com/000dcb55c1b0f5c8e790daf42ea1678f500194565d54-djOlcI_fw658"
target ="_blank"
alt="eyes" />
</map>
</div>
</p>

</body>

</html>

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 1,254评论 0 8
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 585评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 5,780评论 0 6
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 876评论 0 1
  • 作者:樊荣强 俗话说:“良言一句三冬暖,恶语伤人六月寒。”还有句俗话说:“一句话可以把人说笑,一句话也可以把人说跳...
    樊荣强阅读 1,189评论 3 39