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热点地图
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>云知梦</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 </style> 12 </head> 13 <body> 14 <img src="xj.png" alt="小金不在了!" title='小金的照片!' width='256px' height='256px' usemap="#mymap"> 15 <map name="mymap" id="mymap"> 16 <area shape="circle" coords="170,100,21" href ="http://www.baidu.com" /> 17 </map> 18 </body> 19 </html>
css代替热点地图
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>云知梦</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 .hot{ 12 width:50px; 13 height:50px; 14 background: #000; 15 border-radius:50px; 16 position: absolute; 17 left:150px; 18 top:80px; 19 opacity:0; 20 cursor: pointer; 21 } 22 </style> 23 </head> 24 <body> 25 <img src="xj.png" alt="小金不在了!" title='小金的照片!' width='256px' height='256px'> 26 <a class='hot' href='http://www.baidu.com' target='_blank'></a> 27 </body> 28 </html>
dl自定义列表
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>云知梦</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 </style> 11 </head> 12 <body> 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> 20 <dl> 21 <dt>请选择:</dt> 22 <dd>A linux</dd> 23 <dd>A linux</dd> 24 <dd>A linux</dd> 25 <dd>A linux</dd> 26 </dl> 27 <dl> 28 <dt>请选择:</dt> 29 <dd>A linux</dd> 30 <dd>A linux</dd> 31 <dd>A linux</dd> 32 <dd>A linux</dd> 33 </dl> 34 <dl> 35 <dt>请选择:</dt> 36 <dd>A linux</dd> 37 <dd>A linux</dd> 38 <dd>A linux</dd> 39 <dd>A linux</dd> 40 </dl> 41 <dl> 42 <dt>请选择:</dt> 43 <dd>A linux</dd> 44 <dd>A linux</dd> 45 <dd>A linux</dd> 46 <dd>A linux</dd> 47 </dl> 48 </body> 49 </html>