zoukankan      html  css  js  c++  java
  • 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

    一:一个小图标的制作

    我们在支付宝、微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成,

    具体代码如下:

    <!DOCTYPE html>
    <html>
    <head></head>
    <style>
        .add{
            display: block;    /*以块级元素展示,可以设置宽高*/
             100px;
            height: 100px;
            position: relative;
            color: #ccc;
            transition: color .25s; /*实现动画效果*/
            border:1px solid;
        }
        .add:before{      /*在<a/>元素前有些内容*/
            content: "";  /*具体内容,此示例就不需要填写*/
             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: #067;
        }
    </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> 会阻止冒泡

     后续遇到在更
  • 相关阅读:
    Python基础之zip和enumerate
    python3中map()函数用法
    python列表推导式
    python面试常问的几个内置装饰器:@staticmethod、@classmethod和@property
    linux的解压与压缩
    python中 s f各种转移字符含义
    fixture 调用函数名传参(转载)
    3.css选择器
    实战有感3
    实战有感2-轮播图
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/7737407.html
Copyright © 2011-2022 走看看