zzwy-news/css/base.css

259 lines
4.2 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;
/* 取消轮廓 */
outline: none;
/* 去掉默认外观 */
-webkit-appearance: none;
/* 去掉点击时的默认外观 */
outline-style: none;
/* 去除点击出现背景 */
-webkit-tap-highlight-color:transparent;
}
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;
/* 手机端去除a标签点击时的背景样式 */
-webkit-tap-highlight-color: transparent;
}
a {
/* 修改颜色 */
color: #333333;
}
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;
}
.color-coffee{
color: #6e4e1f
}
.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';
}