html5-3 html5标签（热点地图如何实现）（边学边做）
一、总结
一句话总结：热点地图用绝对定位实现。
1、自定义列表怎么弄？
dl 自定义列表
dt 自定义标题
dd 自定义列表内容
2、热点地图怎么弄？
a标签或者别的来绝对定位
3、绝对定位的时候什么工具好用？
尺子工具
4、自定义列表可以做什么？
做选择题
13 <dl>
14 <dt>请选择:</dt>
15 <dd>A linux</dd>
16 <dd>A linux</dd>
17 <dd>A linux</dd>
18 <dd>A linux</dd>
19 </dl>
二、html5标签（热点地图如何实现）
1、相关知识
格式标签:
br 换行,单标签
nobr 不换行,双标签
p 段落,align属性:left|center|right
center 居中
pre 按源代码显示
ul 无序列表
ol 有序列表
dl 自定义列表
dt 自定义标题
dd 自定义列表内容
hr 导航线
标签分类:
1.块标签
#独占一行，自动换行
2.行标签
#自己有多宽占多宽
文本标签:
p
h1-h6
i
u
font
图片:
<img src="xj.png" alt="小金不在了!" title='小金的照片!' width='256px' height='256px' usemap="#mymap">
<map name="mymap" id="mymap">
<area shape="circle" coords="170,100,21" href ="http://www.baidu.com" />
</map>
2、代码
usemap热点地图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云知梦</title>
<style>
*{
font-family: 微软雅黑;
} </style>
</head>
<body>
<img src="xj.png" alt="小金不在了!" title='小金的照片!' width='256px' height='256px' usemap="#mymap">
<map name="mymap" id="mymap">
<area shape="circle" coords="170,100,21" href ="http://www.baidu.com" />
</map>
</body>
</html>
css代替热点地图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云知梦</title>
<style>
*{
font-family: 微软雅黑;
} .hot{
width:50px;
height:50px;
background: #000;
border-radius:50px;
position: absolute;
left:150px;
top:80px;
opacity:0;
cursor: pointer;
}
</style>
</head>
<body>
<img src="xj.png" alt="小金不在了!" title='小金的照片!' width='256px' height='256px'>
<a class='hot' href='http://www.baidu.com' target='_blank'></a>
</body>
</html>
dl自定义列表
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云知梦</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
</head>
<body>
<dl>
<dt>请选择:</dt>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
</dl>
<dl>
<dt>请选择:</dt>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
</dl>
<dl>
<dt>请选择:</dt>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
</dl>
<dl>
<dt>请选择:</dt>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
</dl>
<dl>
<dt>请选择:</dt>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
<dd>A linux</dd>
</dl>
</body>
</html>