html5-3 html5标签（热点地图如何实现）（边学边做）

最新推荐文章于 2023-09-12 18:11:19 发布

weixin_34278190

最新推荐文章于 2023-09-12 18:11:19 发布

阅读量1.2k

点赞数 1

文章标签：人工智能

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>