一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一：一个小图标的制作
我们在支付宝、微信等某些地方上传文件时会遇到以下的图标，但是这样的图标其实可以用<a/>标签以及css样式完成，
具体代码如下：
<!DOCTYPE html>
<html>
<head></head>
<style>
.add{
display: block; /*以块级元素展示，可以设置宽高*/
width: 100px;
height: 100px;
position: relative;
color: #ccc;
transition: color .25s; /*实现动画效果*/
border:1px solid;
}
.add:before{ /*在<a/>元素前有些内容*/
content: ""; /*具体内容，此示例就不需要填写*/
width: 80px;
position: absolute;
left: 10px;
top: 45px;
border-top: 10px solid; /*设置上边框，最后显示+当中的- */
}
.add:after{ /*在<a/>元素后有些内容*/
content: ""; /*具体内容，此示例就不需要填写*/
height: 80px;
position: absolute;
left: 45px;
top: 10px;
border-left: 10px solid; /*设置左边框，最后显示+当中的| */
}
.add:hover{
color: #;
}
</style>
<body>
<p>mimimi</p> <!-- 无关的-->
<a class="add" href="javascript:"></a>
</body>
</html>
二、由上例中的<a/>标签中的 href="javascript:" 引发的思考
href="javascript:" 是一个伪协议，可以让我们通过一个链接来调用javascript函数，表示在触发<a>默认动作时，执行一段JavaScript代码；
href="javascript:;" 表示什么都不执行，这样点击<a/>时就没有任何反应,效果等价于 href="javascript:void(0);"
注意：(1)只使用分号可能会影响before、after等操作；
(2)href="javascript:void(0);" 不刷新页面；
(3)如果标签是以下格式：<a href="javascript:void(0);" onclick=function()>......</a>,那么 onclick 会先于 href 执行。
(4)<a href="javascript:void(0)" onclick="return false">......</a> 会阻止冒泡。
后续遇到在更
一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法的更多相关文章
- 一个有趣的小例子,带你入门协程模块-asyncio
一个有趣的小例子,带你入门协程模块-asyncio 上篇文章写了关于yield from的用法,简单的了解异步模式,[https://www.cnblogs.com/c-x-a/p/10106031. ...
- 用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
- 微信小程序-从零开始制作一个跑步微信小程序
来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...
- Python3的tkinter写一个简单的小程序
一.这个学期开始学习python,但是看了python2和python3,最后还是选择了python3 本着熟悉python的原因,并且也想做一些小程序来增加自己对python的熟练度.所以写了一个简 ...
- 【C语言探索之旅】 第一部分第八课：第一个C语言小游戏
内容简介 1.课程大纲 2.第一部分第八课:第一个C语言小游戏 3.第一部分第九课预告: 函数 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写 ...
- python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11<=总值<=18为“大”，3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。
python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- 第一个Mac shell 小脚本
大多数程序员都喜欢偷懒的,我也不例外.相信好多Android开发的coder 在网络http请求方面,会浪费很多时间在接口调试这里..有时候,自己写了一个小测试,行还好,不行的话,还要跟写后台的哥们一 ...
- 一个python爬虫小程序
起因 深夜忽然想下载一点电子书来扩充一下kindle,就想起来python学得太浅,什么“装饰器”啊.“多线程”啊都没有学到. 想到廖雪峰大神的python教程很经典.很著名.就想找找有木有pdf版的 ...
随机推荐
- [MicroPython]TurnipBit开发板旋转按钮控制直流电机转速
1.实验目的: 学习在PC机系统中扩展简单I/O 接口的方法 学习TurnipBit拼插编程 了解直流电机的工作原理 学习L298N的工作原理 学习TurnipBit扩展板L298N和按键模块的接线方 ...
- mac 下利用AndroidStudio APK获取签名信息
注:网上没找到特别好的.不是xxx.keystore 就是debug.keystore 而真正去找这些目录的时候系统就会提示没有这个秘钥库文件.所以就悲剧了 下面附上快速查看APK签名信息的方法(SH ...
- face detection[DSFD]
本文来自<DSFD: Dual Shot Face Detector>,时间线为2018年10月,是南理工Jian Li在腾讯优图实验室实习时候的作品.在WIDER FACE,FDDB上效 ...
- 《Python从菜鸟到高手》已经出版，开始连载了，购买送视频课程
好消息,<Python从菜鸟到高手>已经出版!!! JetBrains官方推荐图书!JetBrains官大中华区市场部经理赵磊作序!送2400分钟同步视频课程!500个案例,400道P ...
- position fixed 相对于父级定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最小的N个和（堆）
描述: 有两个长度为N的序列 AB,从AB中各选一个数,可以得到N^2个和,求这N^2个和中最小的N个 输入 5 1 3 2 4 5 6 3 4 1 7 输出 2 3 4 4 5 分析: 首先限定输出 ...
- Python的socket模块与交互式指令
socket简介 在编程的过程中,我们需要使用网络编程,这时我们不得不和网络通信的底层基础打交道了.我们必须让自己传输的数据符合网络通信的基本协议,即TCP/IP协议,但是网络通信协议本身很复杂.我们 ...
- DevOps工程师到底做些什么？
我们之前已经听到很多谈论DevOps和DevOps世界的最新趋势的事情,但是就DevOps工程师本身,到底干些什么呢? 在最纯粹的存在形式上来说,DevOps工程师是为了加快开发和运营团队之间的交付效 ...
- Individual Project "写一个能自动生成小学四则运算题目的程序"
一.题目简介 写一个能自动生成小学四则运算题目的程序. 初步拟定要实现的功能后,估计一下自己需要花多长时间.编程过程中记录自己实际用了多长时间. 然后和同学们比较一下各自程序的功能.实现方法的异同等等 ...
- PHP的内存回收（GC)
php官方对gc的介绍:http://php.net/manual/zh/features.gc.php