一个好玩的小制作，以及在<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版的 ...
随机推荐
- SimpleDialogBox
import 'package:flutter/material.dart';import 'dart:ui';import 'dart:async';enum Option{A,B,C}void m ...
- Autofac踩坑经历
背景 接口框架使用反射,动态生成Controller,使用Autofac进行依赖注入,并替换默认DependencyResolver及IControllerFactory,Controller实例化代 ...
- linux上搭建svn服务器
1.检查当前版本,没有的话用yum安装rpm -qa subversion 2.安装yum install subversion -y 2.建库mkdir -p /home/svn/projectsv ...
- 固态硬盘的PCIE，SATA，M2，NVMe，AHCI分别都指什么？别再搞混了
原文:https://baijiahao.baidu.com/s?id=1616207956596122967&wfr=spider&for=pc 科技娱乐屋 18-11-0420:5 ...
- Truncated Power Method for Sparse Eigenvalue Problems
目录 算法 k的选择 \(x\)的初始化 代码 抱歉,真的没怎么看懂,当然,估计和我现在没法静下心来好好看也有关系. 算法 想法非常非常简单吧,就是在原来幂法的基础上,每次迭代的时候再加个截断.当然, ...
- 009-定时关闭弹出广告窗口 By BoAi 20190414
;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...
- SPA单页面优缺点
优点: 1.体验好,不刷新,减少 请求 数据ajax异步获取 页面流程: 2.前后端分离 3.减轻服务端压力 4.共用一套后端程序代码,设配多端 缺点: 1.首屏加载过慢: 2.SEO 不利于搜索引 ...
- 软件工程(FZU2015) 学生博客列表(最终版)
FZU:福州大学软件工程 张老师的博客:http://www.cnblogs.com/easteast/ 经过前两周选课,最后正式选上课程的所有学生博客如下: 序号 学号后3位 博客 1 629 li ...
- jQuery中.html(“xxx”)和.append("xxx")有什么区别
append是追加,html是完全替换比如<p id="1"><p>123</p></p>$("#1").htm ...
- Spring Boot 中使用 @Transactional 注解配置事务管理
事务管理是应用系统开发中必不可少的一部分.Spring 为事务管理提供了丰富的功能支持.Spring 事务管理分为编程式和声明式的两种方式.编程式事务指的是通过编码方式实现事务:声明式事务基于 AOP ...