html 代码片段札记

  1. 自定义苹果图标
    在网站文件根目录放一个 apple-touch-icon.png 文件,苹果设备保存网站为书签或桌面快捷方式时,就会使用这个文件作为图标,文件尺寸建议为:180px × 180px。

  2. 定义浏览器点击行为

    1
    2
    3
    <a href="tel:020-10086">打电话给:020-10086</a>
    <a href="sms:10086">发短信给: 10086</a>
    <a href="mailto:me@22278.club">发送邮件: me@22278.club</a>
  3. 定义上传文件类型和格式

    1
    <input type=file accept="image/*">

    上面的文件上传框中,accept 可以限制上传文件的类型,参数为 image/* 是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成 image/png 则可以限制图片类型为png;参数如果为 video/* 则是选择视频的意思;accept 还可以设置多个文件格式,语法为 accept="image/gif, image/jpeg"

  4. 使用box-shadow改变(挡住)表单自动填充后的黄色

    1
    2
    3
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    box-shadow:inset 0 0 0 1000px #fff;
    }
  5. 用CSS实现省略号文字截断

    1
    2
    3
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  6. 使用border绘制小三角

    原理是:上下和左右的边框对接其实是个斜角,利用这个特性,使其中一边的边框透明,另外一边写成想要的颜色并隐藏对边,就可以变成小箭头形状。

    1
    2
    3
    4
    border-width: 10px 10px 10px 0; //左箭头
    border-color: transparent #fff;
    border-style: solid;
    width: 0;

    Tootip写法:

    1
    2
    <!--html-->
    <div class="box">嗨!点击菜单就可以关注兮兮公众号了哟~</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /*--css--*/
    .box{
    position: relative;
    padding: 0 20px;
    width: 380px;
    height: 80px;
    border-radius: 8px;
    background: #efefef;
    font-size: 18px;
    line-height: 80px;
    }
    .box:after{
    position: absolute;
    top: 50%;
    left: -15px;
    z-index: 1;
    display: block;
    margin-top: -15px;
    width: 0;
    border-color: transparent #efefef;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    content: "";
    }
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Leo
  • 本文链接: https://xuebin.me/posts/e67af75c.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!