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. 1.1 Introduction中 Apache Kafka™ is a distributed streaming platform. What exactly does that mean?（官网剖析）（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Apache Kafka™ is a distributed streaming p ...

  2. AndroidStudio MAT LeakCanary 内存分析之 LeakCanary

    现在我们换一种更清晰方便的方式:LeakCanary https://github.com/square/leakcanary 首先将LeakCanary绑在我们的app上 build.gradle ...

  3. Android Service com.android.exchange.ExchangeService has leaked ServiceConnection

    启动Android项目的时候,clean  Project的时候,报错: android.app.ServiceConnectionLeaked: Service com.android.exchan ...

  4. idea 配置文件导出，导入

    俗话说的好,磨刀不误砍柴工.配置好自己的工具,这样撸码就会更爽. 来来来,傻瓜式配图开始. 点击后会出现有一个导出设置框默认为全部导出 点击...处 可设置导出的settings.jar包的位置 在新 ...

  5. uiautomator_python使用汇总

    1.判断按钮状态 if d(resourceId="id",enabled=False): #判断当前按钮是否为未激活状态,为True则为激活状态2.获取toast提示语 d.to ...

  6. SpringMVC-如何接收各种参数（普通参数，对象，JSON, URL）

    在交互的过程中,其中一个关键的节点就是获取到客户端发送过来的请求参数,本篇文章,我们来罗列下SpringMVC对于各种数据的获取方式: 说明:以下重点在讲解如何获取参数上,所以返回的数据不是重点 1, ...

  7. 洛谷——U10223 Cx大帝远征埃及

    https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...

  8. [D3] Add image to the node

    We can create node with 'g' container, then append 'image' to the nodes. // Create container for the ...

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

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

  10. Java设计模式——代理模式实现及原理

    简介 Java编程的目标是实现现实不能完成的,优化现实能够完成的,是一种虚拟技术.生活中的方方面面都可以虚拟到代码中.代理模式所讲的就是现实生活中的这么一个概念:中介. 代理模式的定义:给某一个对象提 ...