123 lines
3.8 KiB
CSS
123 lines
3.8 KiB
CSS
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
display: block;
|
|
overflow-x: hidden;
|
|
font-size: 100px;
|
|
}
|
|
|
|
body {
|
|
font-family: "微软雅黑", Helvetica, STHeiTi, sans-serif;
|
|
-webkit-text-size-adjust: 100% !important; /*禁止IOS调整字体大小*/
|
|
max-width: 750px;
|
|
margin: 0 auto;
|
|
padding-bottom: .96rem;
|
|
font-size: 0.14rem;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
}
|
|
|
|
ul,ol,li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
em,ins{
|
|
font-style: normal;
|
|
}
|
|
|
|
a {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
|
|
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
|
text-decoration: none;
|
|
color: #000000;
|
|
}
|
|
|
|
img {
|
|
border: 0; /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
|
vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ① */
|
|
object-fit: cover; /* 取消图片底侧有空白缝隙的问题 ② */
|
|
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
|
text-decoration: none;
|
|
color: #262626;
|
|
}
|
|
|
|
button,input,select,textarea {
|
|
border: 0; /* 去掉边框 */
|
|
background: none; /* 去掉背景 */
|
|
-webkit-appearance: none; /*去掉webkit默认的表单样式*/
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
|
|
outline: none; /* 去掉获取焦点时边框 */
|
|
}
|
|
|
|
/* flex布局 */
|
|
.flex {display: flex;}
|
|
|
|
/* 盒模型 */
|
|
.border-box{box-sizing: border-box;}
|
|
|
|
/* 圆角 */
|
|
.radius10{border-radius: .10rem;}
|
|
.radius15{border-radius: .15rem;}
|
|
.radius20{border-radius: .20rem;}
|
|
.radius25{border-radius: .25rem;}
|
|
.radius30{border-radius: .30rem;}
|
|
.radius35{border-radius: .35rem;}
|
|
.radius40{border-radius: .40rem;}
|
|
.radius45{border-radius: .45rem;}
|
|
.radius50{border-radius: .50rem;}
|
|
.radius100{border-radius: 100%;}
|
|
|
|
/* 字体 */
|
|
.font18{ font-size: .18rem;}
|
|
.font20{ font-size: .20rem;}
|
|
.font22{ font-size: .22rem;}
|
|
.font24{ font-size: .24rem;}
|
|
.font26{ font-size: .26rem;}
|
|
.font28{ font-size: .28rem;}
|
|
.font30{ font-size: .30rem;}
|
|
.font32{ font-size: .32rem;}
|
|
.font34{ font-size: .34rem;}
|
|
.font36{ font-size: .36rem;}
|
|
.font38{ font-size: .38rem;}
|
|
.font40{ font-size: .40rem;}
|
|
.font42{ font-size: .42rem;}
|
|
.font44{ font-size: .44rem;}
|
|
.font46{ font-size: .46rem;}
|
|
.font48{ font-size: .48rem;}
|
|
.font50{ font-size: .50rem;}
|
|
.font60{ font-size: .60rem;}
|
|
.font62{ font-size: .62rem;}
|
|
.font70{ font-size: .70rem;}
|
|
.font80{ font-size: .80rem;}
|
|
.font90{ font-size: .90rem;}
|
|
.font100{ font-size: 1.0rem;}
|
|
.font110{ font-size: 1.1rem;}
|
|
.font120{ font-size: 1.2rem;}
|
|
|
|
/* 文字颜色 */
|
|
.color-ff{ color: #ffffff;}
|
|
.color-af{ color: #afafaf;}
|
|
.color-99{ color: #999999;}
|
|
.color-93{ color: #939393;}
|
|
.color-ae{ color: #aeaeae;}
|
|
.color-83{ color: #838383;}
|
|
.color-86{ color: #868686;}
|
|
.color-66{ color: #666666;}
|
|
.color-2c{ color: #2c2c2c;}
|
|
.color-00{ color: #000000;}
|
|
.color-f35{ color: #f35b00;}
|
|
|
|
/* 背景颜色 */
|
|
.background-00{ background-color: #000000;}
|
|
.background-ff{ background-color: #ffffff;}
|
|
.background-f35{ background-color: #f35b00;}
|
|
.background-ae{ background-color: #aeaeae;}
|
|
|
|
/* 文字行数 */
|
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} |