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. jmeter实现分布式压测步骤

    环境说明:安装与控制机相同版本的jdk与jmeter 1.修改控制机中的jmeter.properties文件 将<remote_hosts=127.0.0.1>改为<remote_ ...

  2. 微信小程序仿微信运动步数排行-交互

    效果图如下: 图片.png wxml: <view class="item-box"> <view class="items"> < ...

  3. [selenium]选取下拉框内容的方法

    说明:本文章主要是对select元素操作的讲解,非select元素的下拉框需要另外分析 1.select元素示例: 2.select下拉框选取的3种方法 WebElement selector = d ...

  4. PatentTips - Adaptive algorithm for selecting a virtualization algorithm in virtual machine environments

    BACKGROUND A Virtual Machine (VM) is an efficient, isolated duplicate of a real computer system. Mor ...

  5. linux删除svn版本号库

    当使用了svn版本号控制系统后每一个文件夹下都会有一个.svn文件夹存在,开发完当交付产品或者上传到server时一般要把这些文件夹删除.事实上在linux删除这些文件夹是非常easy的,命令例如以下 ...

  6. iOS_07_流程控制

    一.流程控制 * 顺序结构:默认的流程结构.按照书顺序执行每一条语句. * 选择结构:对给定得条件进行判断,再根据判断结果来决定执行哪一段代码. * 循环结构:在给定条件成立的情况下,反复执行某一段代 ...

  7. 2018VMware虚拟机安装Mac OS 10.12.1

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载安装中所需的镜像文件以及补丁工具 Mac OS 10.12.1 Sierra (16B2555) 懒人版(下载地址):ht ...

  8. 30分钟学会如何使用Shiro（转）

    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...

  9. HDU 5372 线段树

    给出两种操作: 第i个0:在x位置插入一个长度为i的线段,并输出该线段共覆盖了多少之前增加的线段 1:删除第i次插入的线段 官方题解:对于新插入的线段,查询有多少个线段左端点大于等于该线段的左端点. ...

  10. ViewPage第二课为ViewPage加入标题

    在第一课 学前准备:掌握ViewPage第一课http://blog.csdn.net/wei_chong_chong/article/details/50468832 为ViewPage加入标题: ...