zoukankan      html  css  js  c++  java
  • 工具类css框架

    @charset "UTF-8";

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
    }

    .breake-word{
        word-wrap: break-word;
     }
     .ellipsis{
         white-space:nowrap;
         overflow:hidden;
         text-overflow: ellipsis;   
     }
     .p-limit4{
         display: -webkit-box;
         overflow: hidden;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         font-size: 12px;
     }
     .b600{
         font-weight: 600;
     }

     .flex-bt{
         display: flex;
         justify-content: space-between;
     }
     
     .tab-active::before {
         content: '';
         position: absolute;
          20%;
         height: 5px;
         left: 39%;
         bottom: 3px;
         background: #000;
         border-radius: 5px;
     }
     /* tab */
     .tab--kk{
          100px;
         position: relative;
     }
     
     .indent-10{
         text-indent: 10px;
     }
     .indent-20{
         text-indent: 20px;
     }
     .indent-30{
         text-indent: 30px;
     }
     
     .radius50-100px{
         height: 100px !important;
          100px !important;
         border-radius: 50%;
     }
     
     .flex-center{
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .w-10 {
         10%;
    }
    .w-20 {
         20%;
    }
    .w-30 {
         30%;
    }
    .w-40 {
         40%;
    }
    .w-50 {
         50%;
    }
    .w-60 {
         60%;
    }
    .w-70 {
         70%;
    }
    .w-80 {
         80%;
    }
    .w-90 {
         90%;
    }
    .w-100 {
         100%;
    }

    .h-100 {
        height: 100%;
    }


    html {
        font-size: 13px;
    }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.2em;
        background: #f1f1f1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    a {
        color: #999;
    }

    .w-100 {
         100%;
    }

    .h-100 {
        height: 100%;
    }

    .text-info {
        color: #4b67af;
    }

    .bg-info {
        background: #4b67af;
    }

    .text-primary {
        color: #db9e2f;
    }

    .bg-primary {
        background: #db9e2f;
    }

    .text-white {
        color: #fff;
    }

    .bg-white {
        background: #fff;
    }

    .text-light {
        color: #f9f9f9;
    }

    .bg-light {
        background: #f9f9f9;
    }

    .text-light-1 {
        color: #d4d9de;
    }

    .bg-light-1 {
        background: #d4d9de;
    }

    .text-black {
        color: #000;
    }

    .bg-black {
        background: #000;
    }

    .text-dark-1 {
        color: #343440;
    }

    .bg-dark-1 {
        background: #343440;
    }

    .text-dark-2 {
        color: #222;
    }

    .bg-dark-2 {
        background: #222;
    }

    .text-gray {
        color: #999;
    }

    .bg-gray {
        background: #999;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .fs-xss {
        font-size: 0.6154rem;
    }

    .fs-xs {
        font-size: 0.7692rem;
    }

    .fs-sm {
        font-size: 0.9231rem;
    }

    .fs-md {
        font-size: 1rem;
    }

    .fs-lg {
        font-size: 1.0769rem;
    }

    .fs-xl {
        font-size: 1.2308rem;
    }

    .d-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .flex-1 {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .flex-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flex-wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .jc-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .jc-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .jc-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .jc-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .jc-around {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .ai-start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .ai-end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .ai-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .ai-stretch {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    .m-0 {
        margin: 0rem;
    }

    .m-1 {
        margin: 0.25rem;
    }

    .m-2 {
        margin: 0.5rem;
    }

    .m-3 {
        margin: 1rem;
    }

    .m-4 {
        margin: 1.5rem;
    }

    .m-5 {
        margin: 3rem;
    }

    .mx-0 {
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .my-0 {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    .mx-1 {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .my-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .mx-2 {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .my-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .mx-3 {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .my-3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .mx-4 {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .my-4 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .mx-5 {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .my-5 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .mt-0 {
        margin-top: 0rem;
    }

    .mt-1 {
        margin-top: 0.25rem;
    }

    .mt-2 {
        margin-top: 0.5rem;
    }

    .mt-3 {
        margin-top: 1rem;
    }

    .mt-4 {
        margin-top: 1.5rem;
    }

    .mt-5 {
        margin-top: 3rem;
    }

    .mb-0 {
        margin-bottom: 0rem;
    }

    .mb-1 {
        margin-bottom: 0.25rem;
    }

    .mb-2 {
        margin-bottom: 0.5rem;
    }

    .mb-3 {
        margin-bottom: 1rem;
    }

    .mb-4 {
        margin-bottom: 1.5rem;
    }

    .mb-5 {
        margin-bottom: 3rem;
    }

    .ml-0 {
        margin-left: 0rem;
    }

    .ml-1 {
        margin-left: 0.25rem;
    }

    .ml-2 {
        margin-left: 0.5rem;
    }

    .ml-3 {
        margin-left: 1rem;
    }

    .ml-4 {
        margin-left: 1.5rem;
    }

    .ml-5 {
        margin-left: 3rem;
    }

    .mr-0 {
        margin-right: 0rem;
    }

    .mr-1 {
        margin-right: 0.25rem;
    }

    .mr-2 {
        margin-right: 0.5rem;
    }

    .mr-3 {
        margin-right: 1rem;
    }

    .mr-4 {
        margin-right: 1.5rem;
    }

    .mr-5 {
        margin-right: 3rem;
    }

    .p-0 {
        padding: 0rem;
    }

    .p-1 {
        padding: 0.25rem;
    }

    .p-2 {
        padding: 0.5rem;
    }

    .p-3 {
        padding: 1rem;
    }

    .p-4 {
        padding: 1.5rem;
    }

    .p-5 {
        padding: 3rem;
    }

    .px-0 {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .py-0 {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .px-3 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .py-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .px-4 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .py-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .px-5 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .py-5 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .pt-0 {
        padding-top: 0rem;
    }

    .pt-1 {
        padding-top: 0.25rem;
    }

    .pt-2 {
        padding-top: 0.5rem;
    }

    .pt-3 {
        padding-top: 1rem;
    }

    .pt-4 {
        padding-top: 1.5rem;
    }

    .pt-5 {
        padding-top: 3rem;
    }

    .pb-0 {
        padding-bottom: 0rem;
    }

    .pb-1 {
        padding-bottom: 0.25rem;
    }

    .pb-2 {
        padding-bottom: 0.5rem;
    }

    .pb-3 {
        padding-bottom: 1rem;
    }

    .pb-4 {
        padding-bottom: 1.5rem;
    }

    .pb-5 {
        padding-bottom: 3rem;
    }

    .pl-0 {
        padding-left: 0rem;
    }

    .pl-1 {
        padding-left: 0.25rem;
    }

    .pl-2 {
        padding-left: 0.5rem;
    }

    .pl-3 {
        padding-left: 1rem;
    }

    .pl-4 {
        padding-left: 1.5rem;
    }

    .pl-5 {
        padding-left: 3rem;
    }

    .pr-0 {
        padding-right: 0rem;
    }

    .pr-1 {
        padding-right: 0.25rem;
    }

    .pr-2 {
        padding-right: 0.5rem;
    }

    .pr-3 {
        padding-right: 1rem;
    }

    .pr-4 {
        padding-right: 1.5rem;
    }

    .pr-5 {
        padding-right: 3rem;
    }

    .btn {
        border: none;
        border-radius: 0.1538rem;
        font-size: 0.9231rem;
        padding: 0.2rem 0.6rem;
    }
  • 相关阅读:
    OpenLiveWriter博客工具
    mysql主从复制原理分析
    linux mysql主从复制配置
    linux mysql数据库安装
    linux 下安装maven私服
    eclipse新建maven项目和聚合项目
    入门Kubernetes -基础概念
    Java中5种List的去重方法及它们的效率对比,你用对了吗?
    谈一谈程序员的职业发展路线
    虚拟机中如何Linux系统如何访问PC硬盘中的文件(如何将windows下的文件夹挂载到linux虚拟机下)
  • 原文地址:https://www.cnblogs.com/500m/p/11664325.html
Copyright © 2011-2022 走看看