1.css文件夾下新建global.css文件並粘貼復制:
=======================
:root{
--bgColor : #d3252a;
--pinkColor : #ff4e81;
--textColor : #d3252a;
--selectdBg:#823d3e;
--textHuge : 38%;
--textSuitb: 33%;
--textMin: 27%;
--text12: 12px;
--headerHeight : 1.2rem;
--icon : 26px;
--iconFoot : 32%;
--lineSuperPure:#d9d9d9;
--linePure:#e9e9e9;
}
/* 93%居中 */
.widMargin{
width: 100%;
}
.marginAuto{
margin: 0 auto;
}
.marg93{
width: 93%;
margin: 0 auto;
}
/* 透明度 */
.opacinone{
opacity: 0;
}
.disNone{
display:none!important
}
/* 彈性盒 */
.flex-around{
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
.flex-left{
display: flex;
justify-content: left;
align-items: center;
}
.flex-between{
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-between-top{
display: flex;
justify-content: space-between;
align-items: top;
}
/* inputNone */
.inputNone{
background: none;
border: 0;
outline: 0;
color: #696969;
font-size: 15px;
text-indent: 10px;
display: block;
height: 38px;
}
.inputNone:focus{
color: black;
}
/* 取消默認樣式 */
img, span{
display: block;
}
.borderNone{
border: 0!important;
}
/* header+footer+body自適應 */
.AllPage{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
}
.ScrollContent{
width: 100%;
overflow:scroll;
flex:1;
}
/* button默認 */
button{
border: 0;
display: block;
padding: 0;
}
/* 彈性盒,怪異盒模型盒陰影 */
.boxTurnStr{
box-sizing: border-box;
}
.boxShado{
box-shadow:#e8e0e0 0px 11px 6px -10px
}
/* 萬惡的定位 */
.posiRelat{
position: relative;
}
.posiAbsol{
position: absolute;
}
.posiFixed{
position: fixed;
}
================================
注意:root的使用:
p{
color:(--bgColor )
}