本文主要是介绍微信小程序公共样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
/* create 2021-10-30 author lin*/
page{
font-family: PingFang SC;
}
/* flex布局 */
.dis-flex {
display: flex;
}
.flex-box {
flex: 1;
}
.flex-x-center {
justify-content: center;
}
.flex-x-between {
justify-content: space-between;
}
.flex-x-around {
justify-content: space-around;
}
.flex-x-end {
justify-content: flex-end;
}
.flex-y-center {
align-items: center;
}
.flex-y-end {
align-items: flex-end;
}
.flex-wrap{
flex-wrap: wrap;
}
/* 文字溢出隐藏 */
.onelist-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: 1;
}
.twolist-hidden {
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.threelist-hidden {
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* 图片填充 */
.fill-img-wh image{
width: 100%;
height: 100%;
}
.fill-img-w image{
width: 100%;
}
/* 背景图裁剪 */
.bg-center {
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* --------end-------- */
/* 无样式button (用于伪submit) */
.btn-normal {
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;
}
.btn-normal:after {
border: none;
}
.btn-normal.button-hover {
color: inherit;
}
/* 默认样式取消 */
button::after {
border: none;
}
input {
outline: none;
border: none;
list-style: none;
}
/* 刘海 底部条形返回 安全距离 */
.safety-box{
padding-bottom: env(safe-area-inset-bottom);
}
这篇关于微信小程序公共样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!