默认a标签及其包含的html元素和map中的area（图片热区映射）在点击过后留有默认的蓝色边框，如下图

可以看到，蓝色的边框破坏了页面的整体美感，很多时候我们都是不需要的。通过设置相应的css可以去除点击过后的蓝色边框。

map area {

	outline: none;

}

效果如图，点击过后厌人的蓝色的边框不见了，页面也美美的了！

css移除a标签及map、area（图片热区映射）点击过后的边框的更多相关文章

  1. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  2. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  3. 谈谈html中一些比较"偏门"的知识(map&area；iframe；label)

    说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...

  4. HTML图片热区map area的用法

    <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...

  5. 如何为图片添加热点链接？（map + area）

    所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...

  6. [转]如何为图片添加热点链接？（map + area）

    原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...

  7. html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...

  8. html+css学习笔记 2[标签]

    img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:    ...

  9. (转)CSS颜色及<a>标签超链接颜色改变

    CSS颜色大全 <a>标签超链接颜色改变 A:hover   {BACKGROUND-COLOR:   #ffccff;   COLOR:   #0080ff}     (hover表示鼠 ...

随机推荐

  1. 《Effective C++》第4章 设计与声明（1）-读书笔记

    章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...

  2. SQL2008R2 收缩数据库问题 - 日志文件不变小

    数据库的日志文件(*.ldf)越来越大,怎么办? 收缩吧.收缩日志文件的操作真不简单哟,还跟数据库的恢复模式有关啊. 一.“简单恢复模式”时的日志收缩 1. 截断日志 当数据库的恢复模式为“简单”的时 ...

  3. 运算符和typeof

    算术运算符 例: var  a =10; var  b = "a"; var c = a-b; 那么c的值是NaN. 逻辑运算符:&&,|| 注意:如果是非布尔类型 ...

  4. Lodash 浓缩

    Lodash 是个十分有用的工具库,但我们往往只需要其中的一小部分函数.这时,整个 lodash 库就显得十分庞大,我们需要减小 lodash 的体积. cherry-pick 方法 Lodash 官 ...

  5. Cannot mix incompatible Qt library (version 0x40805) with this library (version 0x40801)

    问题描述 今天运行我的 linux 上的 go 语言 IDE liteide 突然报错,错误如下: Cannot mix incompatible Qt library (version 0x4080 ...

  6. Java property 的加载读取

    方法一 Properties properties = new Properties(); InputStream stream = PropertiesUtil.class.getClassLoad ...

  7. 深入理解Feign之源码解析

    转载请标明出处: 本文出自方志朋的博客 什么是Feign Feign是受到Retrofit,JAXRS-2.0和WebSocket的影响,它是一个jav的到http客户端绑定的开源项目. Feign的 ...

  8. linux远程win7教程

    http://jingyan.baidu.com/article/c275f6bacd2227e33c756754.html 1 在ubuntu下搜索Remmina(超级方便,应该也可以控制linux ...

  9. learn go recursive

    package main // 参考文章: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/06.6.md im ...

  10. （效果四）jst如何判断对象是否为空？

    前言:在实现业务逻辑的过程中,很多工程师都会遇到需要判断一个对象,数组是否为空的情景,很多时候我们在请求数据的时候都需要判断请求的对象数据是否为空,如果直接使用,在数据请求为空时,控制台就会报错.因此 ...