18910140161

Css

首页 >> 前端开发 >> Css

常用的CSS样式-global.css

顺晟科技

2021-09-24 13:24:42

191

自己常用的css样式 
/*更新时间 2021年4月6日23点18分*/
/*@import "./appConfig/global.css";*/
/*.display{*/
/*display:block; !*转换为块级*!*/
/*display:inline; !*转换为行内*!*/
/*display:inline-block; !* 仍未行内元素，但是可以设置width及height属性等*!*/
/*}*/

/*字母或数字强制换行*/
/*white-space:normal;*/
/*word-break:break-all;*/
/*word-wrap: break-word;*/


/*阻止默认事件*/
/** { touch-action: none; }*/

html,body{
    width: ;
    margin: 0 0 0 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: #F8F8F8;
    /*font-family: PingFang-SC-Regular; !*字体*!*/
}

/*<editor-fold desc="20201105 去除input的边框">*/
input {
    outline: none;
    border: none;
    padding-left: 20rpx;
    padding-right: 20rpx;
    height: ;
    flex: 1;
    box-sizing: border-box;
}
/*</editor-fold>*/

/*<!--<editor-fold desc="20201105 去除a标签的样式">-->*/
a {
    text-decoration: none;
}
/*下划线*/
a:link {
    text-decoration: none;
}
/*正常的未被访问过的链接*/
a:visited {
    text-decoration: none;
}
/*已经访问过的链接*/
a:hover {
    text-decoration: none;
}
/*鼠标划过(停留)*/
a:active {
    text-decoration: none;
}

/*<!--</editor-fold>-->*/

/*<editor-fold desc="20201105 弹性布局 外加兼容写法">*/
.a-flex {
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-A { /*分散对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-B { /*两端对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    -o-justify-content:space-between;
    justify-content:space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-C { /*居中对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -o-justify-content:center;
    justify-content:center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-R { /*靠右对齐*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-justify-content:flex-end;
    -moz-justify-content:flex-end;
    -ms-justify-content:flex-end;
    -o-justify-content:flex-end;
    justify-content:flex-end;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-flex-column { /**垂直布局*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction:column;
}
.a-flex-column-A { /**垂直 自动间距*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}
.a-flex-column-B { /**垂直 两端*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    -o-justify-content:space-between;
    justify-content:space-between;
}
.a-flex-column-C { /**垂直居中，位于容器的中心*/
    display: -webkit-box!important; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box!important; /* Firefox 17- */
    display: -webkit-flex!important; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex!important; /* Firefox 18+ */
    display: -ms-flexbox!important; /* IE 10 */
    display: flex!important; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -o-justify-content:center;
    justify-content:center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -o-align-items:center;
    align-items:center;
}
.a-no-align { /**不要上下居中*/
    -webkit-box-align: normal!important;
    -ms-flex-align: normal!important;
    -webkit-align-items:normal!important;
    -moz-align-items:normal!important;
    -ms-align-items:normal!important;
    -o-align-items:normal!important;
    align-items: normal !important;
}
.a-flex-wrap { /**换行*/
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
}
.a-flex-1 {
    flex: 1 !important;
}
.a-flex-shrink { /*不要变形*/
    flex-shrink: 0;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 字体颜色">*/
.a-color-w {
    color: white !important;
}
.a-color-green {
    color: green !important;
}
.a-color-red {
    color: red !important;
}
.a-color-hui {
    color: #989898 !important;
}
.a-color-jinse {
    color: gold !important;
}
.a-color-wheat {
    color: wheat!important;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 字体大小">*/
.a-font-18 {
    font-size: 18rpx !important;
}
.a-font-20 {
    font-size: 20rpx !important;
}
.a-font-22 {
    font-size: 22rpx !important;
}
.a-font-24 {
    font-size: 24rpx !important;
}
.a-font-26 {
    font-size: 26rpx !important;
}
.a-font-28 {
    font-size: 28rpx !important;
}
.a-font-30 {
    font-size: 30rpx !important;
}
.a-font-32 {
    font-size: 32rpx !important;
}
.a-font-34 {
    font-size: 34rpx !important;
}
.a-font-36 {
    font-size: 36rpx !important;
}
.a-font-38 {
    font-size: 38rpx !important;
}
.a-font-40 {
    font-size: 40rpx !important;
}
.a-font-42 {
    font-size: 42rpx !important;
}
.a-font-44 {
    font-size: 44rpx !important;
}
.a-font-46 {
    font-size: 46rpx !important;
}
.a-font-48 {
    font-size: 48rpx !important;
}
.a-font-50 {
    font-size: 50rpx !important;
}
.a-font-weight {
    font-weight: bolder;
}
/*</editor-fold>*/

/*<!--<editor-fold desc="20201105 背景色">-->*/
.a-back-w {
    background: white;
}

.a-back-reds {
    background-image: linear-gradient(0deg, #f30000 0%, #ff1800 ), linear-gradient(#e00f00, #e00f00);
    background-blend-mode: normal, normal;
}

/*<!--</editor-fold>-->*/

/*<editor-fold desc="20201105 背景图">*/
.a-maxImg {
    width: ;
    height: ;
}

.a-maxPic { /*背景图片更大化*/
    background-repeat: no-repeat !important; /*图像的平铺模式*/
    background-size:   !important; /*背景图像扩展至足够大（center、cover、等）*/
    background-position:   !important; /*背景图像的起始位置（center、）*/
}

.a-maxPic-auto { /*背景图片居中自动大小*/
    background-repeat: no-repeat !important; /*图像的平铺模式*/
    background-size: contain !important; /*背景图像扩展至足够大（center、cover、contain等）*/
    background-position: center center !important; /*背景图像的起始位置（center、）*/
}

/*<image mode="aspectFit" src=""></image>*/
.a-iconPic-45 {
    width: 45rpx;
    height: 45rpx;
    background-repeat: no-repeat !important; /*图像的平铺模式*/
    background-size:   !important; /*背景图像扩展至足够大（center、cover、等）*/
    background-position:   !important; /*背景图像的起始位置（center、）*/
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 零散的样式">*/
.a-title-shu { /* |标题左侧的竖线*/
    width: 8rpx;
    height: 30rpx;
    border-radius: 8rpx;
    background: white;
    margin-right: 10rpx;
}

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

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

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

.a-absolute {
    position: absolute;
}

.a-relative {
    position: relative;
}

.a-fixed {
    position: fixed !important;
}

.a-pageEnd-title {
    width: ;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    color: #b7b7b7;
    font-size: 24rpx;
}

.a-click:active {
    cursor: pointer !important;
    border: solid 1px rgba(153, 153, 153, 0.54) !important;
    box-shadow: 0 0 5px rgba(153, 153, 153, 0.49) inset !important;
}

.a-margin-LR28 { /*父级框架宽*/
    margin: auto 28rpx;
}

.a-margin-LR20 { /*父级框架宽*/
    margin: auto 20rpx;
}

.a-padding-noBig { /*padding 不撑大*/
    -moz-box-sizing: border-box; /*Firefox3.5+*/
    -webkit-box-sizing: border-box; /*Safari3.2+*/
    -o-box-sizing: border-box; /*Opera9.6*/
    -ms-box-sizing: border-box; /*IE8*/
    box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合度box-sizing的w3c标准语法)*/
}

.a-noShow {
    display: none !important;
    z-index: -1 !important;
}

.a-onLine { /*单行，禁止换行*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /*禁止换行*/
}
.a-onLine-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;/*限制行数为2行*/
    line-clamp: 2;/*限制行数为2行*/
}
.a-onLine-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;/*限制行数为2行*/
    line-clamp: 4;/*限制行数为2行*/
}


.a-appBtn {
    font-size: 32rpx;
    width: 694rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 60rpx;
    text-align: center;
    color: #222;
    cursor: pointer;
    margin: 60rpx auto auto auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #f8f8f8;
}

.a-appBtn:active {
    cursor: pointer !important;
    border: solid 1px rgba(34, 34, 34, 0.44) !important;
    box-shadow: 0 0 5px rgba(34, 34, 34, 0.44) inset !important;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 上下弹跳">*/
.qrcode{
    animation: myfirst 1s infinite alternate;
    margin-right: 20rpx;
}

@keyframes myfirst {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(7px);
    }

    50% {
        transform: translateY(15px) scale(1.2,0.9);
    }

    75% {
        ransform: translateY(7px);
    }

     {
        ransform: translateY(0);
    }
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 过渡动画">*/
.a-transitionOpacity,view{
    animation: 0.5s transitionOpacity ;
}
@keyframes transitionOpacity{
    0%{opacity:0;}
    {opacity:1;}
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 隐藏滚动条">*/
.a-scrollNoShow div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.a-scrollNoShow div::-webkit-scrollbar-track {
    background-color: transparent !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.a-scrollNoShow div::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0) !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 美化滚动条">*/

/*滚动条的宽度*/
.a-min-scrollbar::-webkit-scrollbar {
    width:4px;
    height:4px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
.a-min-scrollbar::-webkit-scrollbar-track {
    width: 4px;
    background-color: #d0d0d0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}

/*滚动条的设置*/
.a-min-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    background-clip:padding-box;
    min-height:28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
/*滚动条移上去的背景*/

.a-min-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #9f9f9f;
}
/*===============不显示scrollbar==============*/

.a-scrollNoBackground::-webkit-scrollbar-track {
    background: rgba(0,0,0,0)!important;
}
.a-scrollNoBackground::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0)!important;
}

.a-scrollNoBackground::-webkit-scrollbar-thumb:hover{
    background:rgba(0,0,0,0)!important;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 选择栏底部的下划线">*/
.a-select-nav-item{
    height: 90rpx;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.a-select-nav-item:before {
    content: " ";
    position: absolute;
    top: auto;
    bottom: 3upx;
    width: 40%;
    height: 5upx;
    background-color:#FF4A00;
    border-radius: 4px;
    transform: scale3d(0, 1, 1);
    transform-origin: left;
    transition: all 0.5s;
}
.a-select-nav-item-this {
    color: #FF4A00;
    font-weight: bold!important;
}
.a-select-nav-item-this:before {
    transform: scale3d(1, 1, 1) !important;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 无样式button (用于伪submit)">*/
.a-no-button {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;
}
.a-no-button:after {
    content: none;
    border: none;
}
/*</editor-fold>*/

/*<editor-fold desc="20201105 无样式button (用于伪submit)">*/
.a-no-button {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;
}
.a-no-button:after {
    content: none;
    border: none;
}
/*</editor-fold>*/

/*<editor-fold desc="20201127 是否允许选择文本">*/
/*none：文本不能被选择*/
.a-textCopy-none{
    /* Keyword values */
    user-select: none!important;
    /* Mozilla-specific values */
    -moz-user-select: none!important;
    /* WebKit-specific values */
    -webkit-user-select: none!important;
    /* Microsoft-specific values */
    -ms-user-select: none!important;
}
/*text：可以选择文本*/
.a-textCopy-text{
    /* Keyword values */
    user-select: text!important;
    /* Mozilla-specific values */
    -moz-user-select: text!important;
    /* WebKit-specific values */
    -webkit-user-select: text!important;
    /* Microsoft-specific values */
    -ms-user-select: text!important;
}
/*all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的更高祖先元素。*/
.a-textCopy-all{
    /* Keyword values */
    user-select: all!important;
    /* Mozilla-specific values */
    -moz-user-select: all!important;
    /* WebKit-specific values */
    -webkit-user-select: all!important;
    /* Microsoft-specific values */
    -ms-user-select: all!important;
}
/*element：可以选择文本，但选择范围受元素边界的约束*/
.a-textCopy-element{
    /* Keyword values */
    user-select: element!important;
    /* Mozilla-specific values */
    -moz-user-select: element!important;
    /* WebKit-specific values */
    -webkit-user-select: element!important;
    /* Microsoft-specific values */
    -ms-user-select: element!important;
}
/*</editor-fold>*/

/*<editor-fold desc="20210114 背景动态渐变">*/
.a-back-auto{
    -webkit-animation: changeBg 20s infinite;
    -moz-animation: changeBg 20s infinite;
    animation: changeBg 20s infinite;
    background-color: #ED5564;
}

@-webkit-keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
@-moz-keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
@keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
/*</editor-fold>*/

 

上一篇：CSS模糊和兼容方法 下一篇：前端面试每日3 1 ——第899天
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！