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. 005 python 整数类型/字符串类型/列表类型/可变/不可变

    可变/不可变类型 可变类型 ID不变的情况下,值改变,则称之为可变类型,如列表,字典 不可变类型 值改变,ID改变,则称之为不可变类型,如 整数 字符串,元组 整数类型 int 正整数 用途就是记录年 ...

  2. 今天看到可以用sqlalchemy在python上访问Mysql

    from sqlalchemy import create_engine, MetaData, and_ 具体的还没有多看.

  3. [bzoj1269]文本编辑器editor [bzoj1500]维修数列

    1269: [AHOI2006]文本编辑器editor Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2540 Solved: 923 [Submit ...

  4. PowerApps和Flow，Power BI开发

    为PowerApps和Flow,Power BI开发自定义连接器 作者:陈希章 发表于 2017年12月20日 前言 我在之前用了几篇文章来介绍新一代微软商业应用平台三剑客(PowerApps,Mic ...

  5. C#程序集引入无效的解决方法

    在项目类库中已经引用了相关了类库,生成解决方案也没问题,但是到了后置代码,通过using引用其他类库的时候,再生成解决方案或者生成单个类库,就会报“未能找到类型或命名空间“xxx"(是否缺少 ...

  6. JQuery 各节点获取函数：父节点，子节点，兄弟节点

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children ...

  7. Linux字符界面安装图形界面XWindow

    https://jingyan.baidu.com/article/219f4bf790f4c7de442d3825.html

  8. python 的spyder用法

    ctrl+tab可以进行跳转 https://blog.csdn.net/luckygirl0809/article/details/79929491

  9. jQuery中$(document).ready()和window.onload的区别？

    document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...

  10. WPF 支持分组互斥的 RadioButton 式单选菜单

    扩展 MenuItem 为同组互斥的 RadioMenuItem,并且将对勾符号修改为圆点. http://stackoverflow.com/a/35692688/5972372 这个问题下还有其他 ...