zoukankan      html  css  js  c++  java
  • Web中用到的Css图标样式 Murray

    自己闲的无聊写了一个CSS样式,是用于切换网页常用的图标。各位牛人勿喷。

    用到的图标:

      

    在页面中调用:

    如果用彩色的就直接写 :class="icon-R10C1", 若用黑色的图标只需在后面加一个: icon-black 这个即可

    样式命名有点鹾,不要见怪!

    icon-R10C2  为
    Row10 Column2 第10行第2列

    <span class="icon-R10C1 icon-black"></span> 

    <span class="icon-R10C2 icon-black"></span>
    <span class="icon-R10C3 icon-black"></span>
    <span class="icon-R10C4 icon-black"></span>
    <span class="icon-R10C5 icon-black"></span>
    <span class="icon-R10C6 icon-black"></span>
    <span class="icon-R10C7 icon-black"></span>
    <span class="icon-R10C8 icon-black"></span>
    <br />
    <span class="icon-R10C1"></span>
    <span class="icon-R10C2"></span>
    <span class="icon-R10C3"></span>
    <span class="icon-R10C4"></span>
    <span class="icon-R10C5"></span>
    <span class="icon-R10C6"></span>
    <span class="icon-R10C7"></span>
    <span class="icon-R10C8"></span>

    若自己想用其他颜色的图标可以通过PS自己调整颜色之后保存png格式,之后在css文件中添加一个样式,如下:

    .icon-black {
      background-image
    : url("../img/自己保存的文件名称.png");
    } 

     页面效果:

     

    这边我只做了最后一行的显示!

    下载地址:https://files.cnblogs.com/Murray/css.zip

    *-------------------------------------------------------------------------------------------------------------------------------------------* 每一段代码是一级小阶梯,我每爬上一级,就更脱离畜生而上升到人类,更接近美好生活!
  • 相关阅读:
    Maven的配置文件-settings.xml内容分解
    数据库管理工具-Navicat Premium 12
    转:android Support 兼容包详解
    转:聊聊mavenCenter和JCenter
    转:serialVersionUID作用
    Android 6.0 权限知识学习笔记
    X86和X86_64和X64有什么区别?
    Android 问题汇总(持续更新)
    Android-armebi-v7a、arm64-v8a、armebi的坑
    HttpUrlConnection 基础使用
  • 原文地址:https://www.cnblogs.com/Murray/p/3091114.html
Copyright © 2011-2022 走看看