jinsha/css/base.css

130 lines
3.4 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* -moz-:代表firefox(火狐)浏览器私有属性
-ms-:代表ie浏览器私有前缀
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性
*/
/* 清空所有标签的内外边距 */
* {
padding: 0;
margin: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
header,
main{
background-color: #FFFFFF;
min-width: 320px;
/* max-width: calc(100% - 180px); */
max-width: calc(1920px - 640px);
margin: 0 auto;
}
body {
/* 抗锯齿性-让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #F5F5F5;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #333;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li 的小圆点 */
li {
list-style: none;
}
button {
/* 当我们鼠标经过button按钮的时候鼠标变成小手 */
cursor: pointer;
}
img {
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 ① */
vertical-align: middle;
/* 取消图片底侧有空白缝隙的问题 ② */
display: block;
object-fit: cover;
width: 100%;
box-sizing: border-box;
}
/* 去掉a标签的下划线并修改字体颜色 */
a {
color: #666;
text-decoration: none;
/* 手机端去除a标签点击时的背景样式 */
/* -webkit-tap-highlight-color: transparent; */
/* 去除边距 */
display: inline-block;
}
a:hover {
color: #c81623;
}
/* 禁用长按时弹出的菜单 */
img , a {
-webkit-touch-callout: none;
}
button,
input,
textarea{
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 取消轮廓 */
outline: none;
/* 去掉默认外观 */
/* -webkit-appearance: none; */
/* 去掉点击时的默认外观 */
outline-style: none;
}
textarea {
/* 禁止自定义拉伸 */
resize: none;
}
.hide,
.none {
display: none
}
/* 清楚浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
.logo h1 a {
display: flex;
align-items: center;
}
.clips1{
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 用省略号代替 */
text-overflow: ellipsis;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 禁止数字和英文换行 */
word-break: break-all;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 1;
/* 溢出隐藏 */
overflow: hidden;
}
.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;}
.clips5{display: -webkit-box;-webkit-line-clamp: 5;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips6{display: -webkit-box;-webkit-line-clamp: 6;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips7{display: -webkit-box;-webkit-line-clamp: 7;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}