一个好玩的小制作，以及在<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版的 ...
随机推荐
- JUnit5 快速指南
JUnit5 快速指南 version: junit5 1. 安装 2. JUnit 注解 3. 编写单元测试 3.1. 基本的单元测试类和方法 3.2. 定制测试类和方法的显示名称 3.3. 断言( ...
- Maven之profile实现多环境配置动态切换
一般的软件项目,在开发.测试及生产等环境下配置文件中参数是不同的.传统的做法是在项目部署的时候,手动修改或者替换这个配置文件.这样太麻烦了,我们可以用Maven的profile来解决这 ...
- UI 前端参考
:http://amazeui.org/ :http://www.dcloud.io/index.html :https://weui.io/ :http://m.sui.taobao.org/get ...
- ML.NET 示例：多类分类之鸢尾花分类
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- python2.x版本与python3.x版本的区别以及运算符
python2.x中: 重复代码,语言不统一,不支持中文 py2中除法获取的都是整形 py2中有long(长整形) print 可以加括号也可以不加括号 range 在py2中打印的结果是列表 py2 ...
- Python-正则表达式总结版
前言: 总是写不好正则表达式,时间长不用就有些忘记了,故此在总结一篇文章以便日后查阅. 一.常用的匹配规则总结表 模式 描述 \w 匹配字母数字及下划线 \W 匹配非字母数字及下划线 \s 匹配任意空 ...
- 网络编程-C/S架构
什么是C/S架构 C指的是client(客户端软件),S指的是Server(服务端软件),本章的重点就是教大家写一个C/S架构的软件,实现服务端软件与客户端软件基于网络通信. 计算机基础知识 作为应用 ...
- VUE工程上线首页加载慢问题优化
使用webpack-bundle-analyzer工具 下面介绍几种压缩文件的方式. 1.vue-router懒加载 2.工程文件打包的时候不生成.map文件 3.gzip压缩 4.CDN 5.VUE ...
- c++入门之 再话类
对于类,其结构并不难,但要理解其设计思想也并不容易,在此,我们可以通过下面的代码进一步理解和使用类: # ifndef VECTOR_H_ # define VECTOR_H_ # include & ...
- vscode中php断点调试方法！
一.PHP的代码断点调试 1.打开vscode的首选项设置,添加"php.validate.executablePath": "D:\\newXampp\\php\\ph ...