html5-3 html5标签（热点地图如何实现）（边学边做）
2024-08-31 20:09:35
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>
最新文章
- Hadoop入门学习笔记---part3
- label 多行显示自适应高度
- 05Mybatis_入门程序——根据id查询用户
- 团队开发——冲刺1.d
- 从源代码的角度聊聊java中StringBuffer、StringBuilder、String中的字符串拼接
- ZOJ 3860: - Find the Spy
- Scrum Meeting---Two(2015-10-26)
- python添加windows域验证
- RegExp类型和text()方法
- <Araxis Merge>Windows平台下的Merge概览
- dede 日期的所有格式
- office 文件在网页中显示
- Tensorflow学习-数据读取
- SQL数据库索引理解与应用【转贴--收藏】
- OraOLEDB.Oracle找不到驱动问题
- Mysql基础命令（二）select查询操作
- Ansible 远程执行脚本
- 【xsy1504】 pitcure 树状数组
- （转）多种方法实现Loading（加载）动画效果
- Elasticsearch使用BulkProcessor批量插入