一个好玩的小制作，以及在<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版的 ...
随机推荐
- XSS简介
xss又叫css,为了与前端的css区别,所以叫xss,即跨站脚本攻击. XSS原理解析 XSS攻击是在网页中嵌入客户端恶意脚本代码,恶意代码一般都是javascript编写的.想要深入研究XSS,必 ...
- Laravel5：重定向 redirect 函数的详细使用
Laravel5 中新增了一个函数 redirect() 来代替 Laravel4 中 Redirect::to() 来进行重定向操作.函数 redirect() 可以将用户重定向到不同的页面或动作, ...
- PHP创建socket服务
PHP可以创建socket服务. 先熟悉几个php网络方面的函数,操作手册地址 http://php.net/manual/zh/ref.sockets.php 简单介绍下socket,它表示套接字 ...
- Unity热更新学习（一） —— AssetBundle 打包和加载
理论不多说,网上,官方文档都有. 这里有一篇介绍很全面的文章:https://www.cnblogs.com/ybgame/p/3973177.html 示例和注意点记录一下,用到时以便查阅. 一. ...
- IntelliJ IDEA 高效率配置
之前学习和开发的时候一直用Eclipse,现在转战IDEA,记录一下IDEA的个性化设置,有助于提高效率.(参考:http://www.cnblogs.com/huaxingtianxia/p/586 ...
- 在ASP.NET Core MVC中子类Controller拦截器要先于父类Controller拦截器执行
我们知道在ASP.NET Core MVC中Controller上的Filter拦截器是有执行顺序的,那么如果我们在有继承关系的两个Controller类上,声明同一种类型的Filter拦截器,那么是 ...
- 如何备份和恢复你的TFS服务器（一）
备份和恢复一个TFS(Team Foundation Server)服务器常常令人心生畏惧.因为这会涉及到很多服务和步骤.TFS(Team Foundation Server)2010一发布,我就知道 ...
- 给扔物线 HenCoder Plus 学员的一次分享文字版
半个月前,和我的终极技术目标扔物线朱凯一拍即合,到了他所开展的 HenCoder Plus 课程给大家分享了 1 个多小时的「模拟面试」心得,也顺便听了几次凯哥的课程,感觉真的挺用心的.自己也希望能一 ...
- Python实现将爱词霸每日一句定时推送至微信
前言 前几天在网上看到一篇文章<教你用微信每天给女票说晚安>,感觉很神奇的样子,随后研究了一下,构思的确是巧妙.好,那就开始动工吧!服务器有了,Python环境有了,IDE打开了...然而 ...
- python之间的基础
编程第一步 print('hello,world!') 变量名的命名的规则: 1:变量由字母,数字,下划线组成 2:变量不能以数字开头 3:禁止使用python中的关键字,如 'alse', 'Non ...