css⼯具类封装
温馨提⽰：⼀下css封装，建议按需使⽤，否则会造成很⼤的代码冗余，且很多样式会造成不符合预期的效果，建议合理使⽤<a href="">Reset.css</a>
common.css
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜⾊/fill */
fill: currentColor;
overflow: hidden;
}
html, body {
width: 100%;
height: 100%;
}
.border-half-left {
position: relative;
}
.border-half-left:before {
content: '';
position: absolute;
transform-origin: 0 0;
transform: scale(0.5);
}
.border-half-left:before {
width: 2px;
height: 200%;
top: 0;
left: 0;
border-left: 1px solid #ddd;
}
.border-half-top {
position: relative;
}
.
border-half-top:before {
content: '';
position: absolute;
transform-origin: 0 0;
transform: scale(0.5);
}
.border-half-top:before {
width: 200%;
height: 2px;
top: 0;
left: 0;
border-top: 1px solid #ddd;
}
.border-half-bottom {
position: relative;
}
.border-half-bottom:before {
content: '';
position: absolute;
transform-origin: 0 0;
transform: scale(0.5);
}
.
border-half-bottom:before {
width: 200%;
height: 2px;
bottom: 0;
left: 0;
border-bottom: 1px solid #ddd;
}
.border-half-right {
position: relative;
}
.border-half-right:before {
content: '';
position: absolute;
transform-origin: 0 0;
transform: scale(0.5);
}
.border-half-right:before {
width: 2px;
top: 0;
right: 0;
border-right: 1px solid #ddd;
}
.
border-half {
position: relative;
}
.border-half:before {
content: '';
position: absolute;
transform-origin: 0 0;
transform: scale(0.5);
}
.border-half:before {
width: 200%;
height: 200%;
top: 0;
left: 0;
border: 1px solid #ddd;
}
function.css
/* 禁⽌选中⽂本 */
.usn{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-
o-user-select:none;
user-select:none;
}
/* 浮动 */
.fl { float: left; }
.fr { float: right; }
.cf { zoom: 1; }
.cf:after {
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
overflow:hidden;
}
/* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}
.transparent { opacity: 0 }
/*⽂字排版、颜⾊*/
.
f12 { font-size:12px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f20 { font-size:20px }
.fb { font-weight:bold }
.fn { font-weight:normal }
.t2 { text-indent:2em }
.d { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.ay { color:#878787 }
.
lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.unl { text-decoration:underline; }
.no_unl { text-decoration:none; }
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.tj { text-align: justify; text-justify: inter-ideograph; } .wn { /* 强制不换⾏ */
word-wrap:normal;
white-space:nowrap;
}
white-space:normal;
word-wrap:break-word;
absolute relative
word-break:break-all;
}
.wp { /* 保持空⽩序列*/
overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all; }
.wes { /* 多出部分⽤省略号表⽰ , ⽤于⼀⾏ */
overflow:hidden;
word-wrap:normal;
white-space:nowrap;
text-overflow:ellipsis;
}
.wes-2 { /* 适⽤于webkit内核和移动端 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.wes-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-
webkit-line-clamp: 3;
overflow: hidden;
}
.wes-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* 溢出样式 */
.ofh { overflow: hidden; }
.
ofs {overflow: scroll; }
.ofa {overflow: auto; }
.ofv {overflow: visible; }
/* 定位⽅式 */
.ps {position: static; }
.pr {position: relative;zoom:1; }
.pa {position: absolute; }
.pf {position: fixed; }
/* 垂直对齐⽅式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.
vb {vertical-align: bottom; }
/* ⿏标样式 */
.csd {cursor: default; }
.csp {cursor: pointer; }
.csh {cursor: help; }
.csm {cursor: move; }
/* flex布局 */
.df-sb {
display:flex;
align-items: center;
justify-content: space-between;
}
.df-sa {
display:flex;
align-items: center;
justify-content: space-around;
}
/* 垂直居中 */
.df-c {
display: flex;
align-items: center;
justify-content: center;
}
.tb-c {
text-align:center;
display:table-cell;
vertical-align:middle;
.ts-c {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%); }
.ts-mc {
position: absolute;
left: 0;right: 0;
bottom: 0; top: 0;
margin: auto;
}
/* 辅助 */
.mask-fixed-wrapper {
width: 100%;
height: 100%;
position: fixed;
left:0;top:0;
background: rgba(0, 0, 0, 0.65);
z-index: 999;
}
.bg-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
.bg-cover-all {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center; }
PC端
/
* normalize.css */
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
figcaption,
figure,
main {
/* 1 */
display: block;
}
figure {
margin: 1em 40px;
}
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em;
/* 2 */
}
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em;
/* 2 */
}
dfn {
font-style: italic;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。