一:一个小图标的制作
我们在支付宝、微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<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> 会阻止冒泡。
后续遇到在更