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>
 

html5-3 html5标签（热点地图如何实现）（边学边做）的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  3. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  4. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  5. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  6. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  7. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  8. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  9. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

随机推荐

  1. django-rest-framework框架 第四篇 认证Authentication

    认证Authentication 什么是身份认证 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或与其签名的令牌)关联的机制. 视图的最开始处运行身份验证 在权限和限制检查发生之前,以及在允许 ...

  2. 【习题 7-7 UVA-12558】Egyptian Fractions (HARD version)

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大量maxdep 在dfs里面传剩余的要凑的分子.分母 以及上一次枚举的值是多少. 然后找到最小的k,满足1/ ...

  3. HDU——T 2824 The Euler function

    http://acm.hdu.edu.cn/showproblem.php?pid=2824 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  4. Spark应用程序部署工具Spark Submit

    不多说,直接上干货!  spark-submit在哪个位置 [spark@master ~]$ cd $SPARK_HOME/bin [spark@master bin]$ pwd /usr/loca ...

  5. 原生js大总结八

    071.如何组织事件冒泡   利用事件对象属性:stopPropagation 和 cancelBubble   stopPropagetion是一个方法:e.stopPropagetion();   ...

  6. Git 经常使用命令

    Git经常使用命令备忘: Git配置 git config --global user.name "storm" git config --global user.email &q ...

  7. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  8. python中数据结构

    列表:数组,矩阵 元组 映射:字典 集合

  9. uva 10710 - Chinese Shuffle(完美洗牌)

    option=com_onlinejudge&Itemid=8&category=474&page=show_problem&problem=1651"> ...

  10. HDU - 4552 怪盗基德的挑战书 (后缀数组)

    Description "在树最漂亮的那天,当时间老人再次把大钟平均分开时,我会降临在灯火之城的金字塔前.带走那最珍贵的笑容."这是怪盗基德盗取巴黎卢浮宫的<蒙娜丽莎的微笑& ...