161 lines
3.2 KiB
CSS
161 lines
3.2 KiB
CSS
/* -moz-:代表firefox(火狐)浏览器私有属性
|
||
-ms-:代表ie浏览器私有前缀
|
||
-webkit-:代表safari、chrome私有属性
|
||
-o-:代表Opera私有属性
|
||
*/
|
||
|
||
/* 清空所有标签的内外边距 */
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
box-sizing: border-box; /* css3盒子模型 */
|
||
outline: none; /* 取消轮廓 */
|
||
-webkit-appearance: none; /* 去掉默认外观 */
|
||
outline-style: none; /* 去掉点击时的默认外观 */
|
||
-webkit-tap-highlight-color:rgba(0,0,0,0); /* 取消点击高亮 */
|
||
}
|
||
|
||
body {
|
||
background-color: #f6f6f6;
|
||
font: 16px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||
color: #383838;
|
||
-webkit-font-smoothing: antialiased; /* 抗锯齿性-让文字显示的更加清晰 */
|
||
}
|
||
|
||
/* em 和 i 斜体的文字不倾斜 */
|
||
em,
|
||
i {
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 去掉li 的小圆点 */
|
||
ul,
|
||
ol,
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
button,
|
||
select {
|
||
cursor: pointer; /* 当我们鼠标经过button按钮的时候，鼠标变成小手 */
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
border: 0; /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
||
vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ① */
|
||
object-fit: cover; /* 取消图片底侧有空白缝隙的问题 ① */
|
||
}
|
||
|
||
/* 去掉a标签的下划线，并修改字体颜色 */
|
||
a,
|
||
ins{
|
||
color: #383838;
|
||
text-decoration: none;
|
||
-webkit-tap-highlight-color: transparent; /* 手机端去除a标签点击时的背景样式 */
|
||
}
|
||
|
||
/* 禁用长按时弹出的菜单 */
|
||
img,
|
||
a {
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
/* 强制给a添加小手样式 */
|
||
a{
|
||
cursor: pointer;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea {
|
||
font-family: auto;
|
||
background: none;
|
||
border: 0;
|
||
outline: none; /* 取消轮廓 */
|
||
-webkit-appearance: none; /* 去掉默认外观 */
|
||
outline-style: none; /* 去掉点击时的默认外观 */
|
||
}
|
||
|
||
textarea {
|
||
resize: none; /* 禁止自定义拉伸 */
|
||
}
|
||
|
||
/* 改变表单默认值样式 */
|
||
input::-webkit-input-placeholder,
|
||
textarea::-webkit-input-placeholder{
|
||
color:#adadad;
|
||
}
|
||
input::-moz-placeholder,
|
||
textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
|
||
color:#adadad;
|
||
}
|
||
input:-moz-placeholder,
|
||
textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
|
||
color:#adadad;
|
||
}
|
||
input:-ms-input-placeholder,
|
||
textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */
|
||
color:#adadad;
|
||
}
|
||
|
||
/* 清楚浮动 */
|
||
.clearfix:after {
|
||
visibility: hidden;
|
||
clear: both;
|
||
display: block;
|
||
content: ".";
|
||
height: 0
|
||
}
|
||
|
||
.clearfix {
|
||
*zoom: 1
|
||
}
|
||
|
||
/* 控制显示文字行数 */
|
||
.clips1 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.clips2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.clips3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.clips4 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* 页面宽度 */
|
||
.w100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.w1140 {
|
||
width: 1140px;
|
||
margin: auto;
|
||
}
|