zzwy-news/css/base.css

254 lines
4.1 KiB
CSS
Raw Normal View History

2022-09-23 10:15:52 +00:00
/* -moz-:firefox()
-ms-:ie
-webkit-:safarichrome
-o-:Opera
*/
* {
/* 清除内边距 */
padding: 0;
/* 清除外边距 */
margin: 0;
/* css3盒子模型 */
box-sizing: border-box;
/* 取消轮廓 */
outline: none;
/* 去掉默认外观 */
-webkit-appearance: none;
/* 去掉点击时的默认外观 */
outline-style: none;
}
body {
/* 设置字体 */
font: 16px/1.5 Microsoft YaHei, Heiti SC, PingFang SC, Arial, SimHei, Hiragino Sans GB, Helvetica, "\5B8B\4F53", serif, sans-serif;
/* 设置行高 */
line-height: 1.5;
/* 设置颜色 */
color: #333333;
/* 抗锯齿性-让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
}
em,i{
/* 取消文字倾斜 */
font-style: normal;
}
ul,ol,li {
/* 去掉小圆点 */
list-style: none;
}
button {
/* 当我们鼠标经过button按钮的时候鼠标变成小手 */
cursor: pointer;
}
img {
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 ① */
vertical-align: middle;
/* 取消图片底侧有空白缝隙的问题 ② */
object-fit: cover;
user-select: none;
}
a,ins {
/* 去掉a标签的下划线 */
text-decoration: none;
/* 修改颜色 */
color: #333333;
/* 手机端去除a标签点击时的背景样式 */
-webkit-tap-highlight-color: transparent;
}
img,a {
/* 禁用长按时弹出的菜单 */
-webkit-touch-callout: none;
}
button,input,textarea {
/* 设置字体 */
font-family: Microsoft YaHei, Heiti SC, PingFang SC, Arial, SimHei, Hiragino Sans GB, Helvetica, "\5B8B\4F53", serif, sans-serif;
/* 取消轮廓 */
outline: none;
/* 去掉默认外观 */
-webkit-appearance: none;
/* 去掉点击时的默认外观 */
outline-style: none;
}
textarea {
/* 禁止自定义拉伸 */
resize: none;
}
/* 清楚浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
/* 字体颜色 */
.color-99{
color: #999999;
}
.color-66{
color: #666666;
}
.color-33{
color: #333333;
}
2022-09-26 10:22:55 +00:00
.color-coffee{
color: #6e4e1f
}
2022-09-23 10:15:52 +00:00
.color-white{
color: #ffffff;
}
.color-orange{
color: #fe8917;
}
.color-blue{
color: #0e357f;
}
/* 背景颜色 */
.bg-col-orange{
background-color: #fe8917;
}
.bg-col-blue{
background-color: #0e357f;
}
.bg-col-white{
background-color: #ffffff;
}
.bg-col-f5{
background-color: #f5f5f5;
}
/* 控制显示文字行数 */
.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;
}
.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;
}
/* 页面宽度 */
.w100 {
width: 100%;
}
.w1360 {
width: 1360px;
margin: auto;
}
/* flex布局 */
.flex{
display: flex;
}
/* 英文大小写 */
.uppercase{
text-transform: uppercase; /* 大写 */
}
.lowercase{
text-transform: lowercase; /* 小写 */
}
.capitalize{
text-transform: capitalize; /* 首字母大写 */
}
/* 顶部距离 */
.pull-margin{
margin-top: 88px;
}
/* 加载字体 */
@font-face{
font-family: 'helvetica';
src:url("../fonts/Helvetica.ttf");
}
.font-helvetica{
font-family: 'helvetica';
}