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. Node里面的对象创建问题

    1.利用new Object()创建时 var a =new Object() a.b = 1 console.log(a) // 打印出来是[object Object] console.log(J ...

  2. Python Jsonpath模块用法

    在使用Python做自动化校验的时候,经常会从Json数据中取值,所以会用到Jsonpath模块,这里做个简单的总结 1.关于jsonpath用来解析多层嵌套的json数据;JsonPath 是一种信 ...

  3. h.264硬件解码

    // H264HWDecoder.m // H264EncoderDecoder // // Created by lujunjie on 2016/11/28. // Copyright © 201 ...

  4. javascript中if条件

    1.布尔变量 true/false 2.数字非0.非NaN/0.NaN 3.对象非null/null.nudefined 4.字符串非空串/空串 if(!!str){ //do something } ...

  5. 记一些stl的用法（持续更新）

    有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...

  6. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  7. JSP中的EL表达式详细介绍

    一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 JSP 文件中嵌入 Java 代码的元素.它们通常用于对象操作以及执行那些 ...

  8. Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值

    Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值 题外话:一个问题研究到最后,那边记录文档的前半部分基本上都是没用的,甚至是错误的. 重点在最后,前边不过一些假想猜測. ht ...

  9. GridView与ArrayAdapter的结合

    activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...

  10. [React Intl] Get locale value from intl injector

    Get 'injectIntl' from  'react-intl', it is a high order componet. We need to wrap our component into ...