提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

工具类css框架

工具框架CSS
2023-09-14 08:57:23 时间
@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;
     width: 20%;
     height: 5px;
     left: 39%;
     bottom: 3px;
     background: #000;
     border-radius: 5px;
 }
 /* tab */
 .tab--kk{
     width: 100px;
     position: relative;
 }
 
 .indent-10{
     text-indent: 10px;
 }
 .indent-20{
     text-indent: 20px;
 }
 .indent-30{
     text-indent: 30px;
 }
 
 .radius50-100px{
     height: 100px !important;
     width: 100px !important;
     border-radius: 50%;
 }
 
 .flex-center{
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .w-10 {
    width: 10%;
}
.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}
.w-40 {
    width: 40%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.w-80 {
    width: 80%;
}
.w-90 {
    width: 90%;
}
.w-100 {
    width: 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 {
    width: 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;
}

相关文章