常用css代码

/*重置*/
/*rem 必备*/
html{font-size:calc(100vw/7.5) !important;}
/*rem 必备*/
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}

img {
border: none;
max-width: 100%;
vertical-align: top;
}

li {
list-style: none;
}

a {
text-decoration: none;
display: block;
outline: none;
color: #555;
}

select::-ms-expand {
display: none;
}

select {
border: none;
background: none;
/*很关键：将默认的select选择框样式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
background: url(../images/liu_xiala.png) center right no-repeat;
}

input[type=text] {
display: inline-block;
vertical-align: top;
}

input,textarea {
border: none;
background: none;
}

input:focus,textarea:focus,select:focus {
outline: none;
}

input[type=text],textarea {
-moz-border-radius: 0;
/* Firefox */
-webkit-border-radius: 0;
/* Safari 和 Chrome */
border-radius: 0;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

input[type=button], input[type=submit], input[type=file], button {
cursor: pointer;
-webkit-appearance: none;
}
/*设置input样式代码：*/

input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}

input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}

input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}

video {
object-fit: cover;
}
/*移动端去掉hover效果*/
body,html {
-webkit-tap-highlight-color: transparent;
}
/*表格*/
table {
border-collapse: collapse;
}
/*语法： border-collapse : separate | collapse
取值：
separate :　 默认值。边框独立（标准HTML）
collapse :　 相邻边被合并*/

.clear:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}

.clear {
zoom: 1;
}

.center {
max-width: 1200px;
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}

.center:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}

.center {
zoom: 1;
}

/*特殊字体*/
@font-face {
font-family: 'redocn';
src: url(../font/REDOCN.OTF);
font-weight: normal;
font-style: normal;
}

.radius {
-moz-border-radius: 50%;
/* Firefox */
-webkit-border-radius: 50%;
/* Safari 和 Chrome */
border-radius: 50%;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

.radius1 {
-moz-border-radius: 10px;
/* Firefox */
-webkit-border-radius: 10px;
/* Safari 和 Chrome */
border-radius: 10px;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

.shadow {
-moz-box-shadow: 10px 10px 20px #000;
/* Firefox */
-webkit-box-shadow: 10px 10px 20px #000;
/* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

.box-shadow {
box-shadow: -10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green;
/*底边阴影*/
}

.shadow li:hover {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)
}

.tran {
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

/*版块 上下左右居中*/
.cen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}

/*内容部分 不要加 这个*/
.p {
text-indent: 2em;
}

/*前面添加*/
h3:before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
background-color: #AF8C54;
-moz-border-radius: 50%;
/* Firefox */
-webkit-border-radius: 50%;
/* Safari 和 Chrome */
border-radius: 50%;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
margin: 3px 10px 3px 0;
}

/*超出显示省略号*/
p {
width: auto;
height: 30px;
display: block;
text-overflow: ellipsis;
/*表示文本超出用省略号代替*/
white-space: nowrap;
/*表示文本不换行；*/
overflow: hidden;
/*表示超出隐藏；*/
}
/*多行显示*/
p {
width: auto;
height: 30px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

/*css三角*/
.div123 {
width: 0;
height: 0;
border: 10px solid;
border-color: transparent red transparent transparent;
}
/*透明度*/
.opa {
opacity: 0.8;
filter: alpha(opacity=80);
}

/*图片放大*/
.scaleImg img {
transition: transform 1s;
}

.scaleImg:hover img {
transform: scale(1.05,1.05);
}
/*图片变灰*/
.boximg img {
-webkit-filter: grayscale(1);
/* Webkit */
filter: gray;
/* IE6-9 */
filter: grayscale(1);
/* W3C */
}
/*文字垂直居中*/
.div_ul {
display: table;
}

.div_li {
vertical-align: middle;
display: table-cell;
}

.div2{
display: flex;
justify-content: center;
/*左右对齐*/
align-items: center;
/*上下对齐*/
flex-direction: column;
/*单个排版*/
}

/* css3滚动条 */
.min_abo_map::-webkit-scrollbar {
width: 5px;
height: 1px;
}
/* 两端按钮*/
.min_abo_map::-webkit-scrollbar-button {
display: none;
}
/*滚动条轨道背景颜色*/
.min_abo_map::-webkit-scrollbar-track-piece {
background: #fff;
}
/*滚动条样式*/
.min_abo_map::-webkit-scrollbar-thumb {
background: #ff0000;
}
/*
强制换行
1、word-break: break-all; 只对英文起作用，以字母作为换行依据。
2、word-wrap: break-word; 只对英文起作用，以单词作为换行依据。
3、white-space: pre-wrap; 只对中文起作用，强制换行。*/

.sec3 li {
opacity: 0;
transition: 1s all;
transition-delay: 0s;
-webkit-transition: 1s all;
transform: translateY(100%);
-webkit-transform: translateY(100%);
}

.active .sec3 li {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px)
}

.active .sec3 li:first-child {
transition-delay: 0.3s;
}

.active .sec3 li:first-child+li {
transition-delay: 0.6s;
}

.active .sec3 li:first-child+li+li {
transition-delay: 0.9s;
}

.active .sec3 li:first-child+li+li+li {
transition-delay: 1.2s;
}

.active .sec3 li:first-child+li+li+li+li {
transition-delay: 1.5s;
}

.active .sec3 li:first-child+li+li+li+li+li {
transition-delay: 1.8s;
}

.active .sec3 li:first-child+li+li+li+li+li+li {
transition-delay: 2.1s;
}

.active .sec3 li:first-child+li+li+li+li+li+li+li {
transition-delay: 2.4s;
}