css工具类封装
温馨提示：一下css封装，建议按需使用，否则会造成很大的代码冗余，且很多样式会造成不符合预期的效果，建议合理使用
<a href="https://meyerweb.com/eric/tools/css/reset/">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:;
left:;
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:;
left:;
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:;
left:;
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;
height: 200%;
top:;
right:;
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:;
left:;
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:; }
.cf:after {
content:".";
display:block;
clear:both;
visibility:hidden;
height:;
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 }
.red,a.red { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.gray,a.gray { 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;
}
.wb { /* 强制换行 */
white-space:normal;
word-wrap:break-word;
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:;
overflow: hidden;
}
.wes-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
.wes-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
} /* 溢出样式 */
.ofh { overflow: hidden; }
.ofs {overflow: scroll; }
.ofa {overflow: auto; }
.ofv {overflow: visible; } /* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:; }
.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:;right:;
bottom:; top:;
margin: auto;
} /* 辅助 */
.mask-fixed-wrapper {
width: 100%;
height: 100%;
position: fixed;
left:;top:;
background: rgba(0, 0, 0, 0.65);
z-index:;
}
.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:;
}
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;
}
hr {
box-sizing: content-box;
/* 1 */
height:;
/* 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:;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height:;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin:;
/* 2 */
}
button,
input {
/* 1 */
overflow: visible;
}
button,
select {
/* 1 */
text-transform: none;
}
button,
html [type="button"],
/* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding:;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding:;
/* 3 */
white-space: normal;
/* 1 */
}
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding:;
/* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
details,
/* 1 */
menu {
display: block;
}
summary {
display: list-item;
}
canvas {
display: inline-block;
}
template {
display: none;
}
[hidden] {
display: none;
}
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu {
margin:; padding:; box-sizing: border-box;
}
移动端
/* normalize.css */
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
margin:;
}
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;
}
hr {
box-sizing: content-box;
/* 1 */
height:;
/* 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:;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height:;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin:;
/* 2 */
}
button,
input {
/* 1 */
overflow: visible;
}
button,
select {
/* 1 */
text-transform: none;
}
button,
html [type="button"],
/* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding:;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding:;
/* 3 */
white-space: normal;
/* 1 */
}
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding:;
/* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
details,
/* 1 */
menu {
display: block;
}
summary {
display: list-item;
}
canvas {
display: inline-block;
}
template {
display: none;
}
[hidden] {
display: none;
}
/* reset */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin:;
padding:;
box-sizing: border-box;
}
html,
body {
/* 禁止选中文本 */
-webkit-user-select: none;
user-select: none;
font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif
}
/* 禁止长按链接与图片弹出菜单 */
a,
img {
-webkit-touch-callout: none;
}
/*ios android去除自带阴影的样式*/
a,
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input[type="text"] {
-webkit-appearance: none;
}
css工具类封装的更多相关文章
- Redis操作Set工具类封装，Java Redis Set命令封装
Redis操作Set工具类封装,Java Redis Set命令封装 >>>>>>>>>>>>>>>>& ...
- Redis操作List工具类封装，Java Redis List命令封装
Redis操作List工具类封装,Java Redis List命令封装 >>>>>>>>>>>>>>>> ...
- Redis操作Hash工具类封装，Redis工具类封装
Redis操作Hash工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>> ...
- Redis操作字符串工具类封装，Redis工具类封装
Redis操作字符串工具类封装,Redis工具类封装 >>>>>>>>>>>>>>>>>>& ...
- (转载) 百度地图工具类封装(包括定位,附近、城市、范围poi检索,反地理编码)
目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选 程序员8月书讯 项目管理+代码托管+文档协作,开发更流畅 百度地图工具类封装(包括定位,附近.城市.范围poi检索, ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战
笔记 4.Redis工具类封装讲解和实战 简介:高效开发方式 Redis工具类封装讲解和实战 1.常用客户端 https://redisdesktop.com/download ...
- flink---实时项目--day02-----1. 解析参数工具类 2. Flink工具类封装 3. 日志采集架构图 4. 测流输出 5. 将kafka中数据写入HDFS 6 KafkaProducer的使用 7 练习
1. 解析参数工具类(ParameterTool) 该类提供了从不同数据源读取和解析程序参数的简单实用方法,其解析args时,只能支持单只参数. 用来解析main方法传入参数的工具类 public c ...
- 关于TornadoFx和Android的全局配置工具类封装实现及思路解析
原文地址: 关于TornadoFx和Android的全局配置工具类封装实现及思路解析 - Stars-One的杂货小窝 目前个人开发软件存在设置页面,可以让用户自定义些设置,但我发现,存储数据的代码逻 ...
- Android Sqlite 工具类封装
鉴于经常使用 Sqlite 数据库做数据持久化处理,进行了一点封装,方便使用. 该封装类主要支持一下功能 支持多用户数据储存 支持 Sqlite数据库升级 支持传入 Sql 语句建表 支持 SQLit ...
随机推荐
- 转：MySQL 的show processlist
processlist 命令的输出结果显示了有哪些线程在运行,可以帮助识别出有问题的查询语句,两种方式使用这个命令. 1. 进入 mysql/bin 目录下输入 mysqladmin p ...
- 【转】GitHub汉化脚本（谷歌浏览器）
// ==UserScript== // @name GitHub 汉化插件 // @description 汉化 GitHub 界面的部分菜单及内容. // @copyright 2016, 楼教主 ...
- uva 1619 - Feel Good || poj 2796 单调栈
1619 - Feel Good Time limit: 3.000 seconds Bill is developing a new mathematical theory for human ...
- linux du命令的疑惑
起因是测试rsync传输数据.传输完成后,想看一下传输的文件是不是完整,所以检测了下源目录和目标目录的大小,竟然出现了巨大的差距: [root@w anaconda3]$ du -sh ./ .9G ...
- 【三小时学会Kubernetes！（一） 】容器简介及为每个服务创建镜像
容器是什么 Kubernetes 是容器管理平台.可想而知我们需要容器去管理它们.但是容器是什么?Docker 官方文档的最佳答案如下: 容器映像是轻量级的.独立的.可执行软件包,包含所有可运行的东西 ...
- maven笔记（3）
项目管理利器(Maven)——Pom.xml解析 <name>项目的描述名</name> <url>项目的地址</url> <descriptio ...
- 【转】Java运行时数据区简介及堆与栈的区别
理解JVM运行时的数据区是Java编程中的进阶部分.我们在开发中都遇到过一个很头疼的问题就是OutOfMemoryError(内存溢出错误),但是如果我们了解JVM的内部实现和其运行时的数据区的工作机 ...
- Integer 类型数值判断相等的坑
题目: public static void main(String[] args) { Integer a = 100, b = 100; Integer c = 150, d = 150; Sys ...
- 8.初识Lock与AbstractQueuedSynchronizer(AQS)
1. concurrent包的结构层次 在针对并发编程中,Doug Lea大师为我们提供了大量实用,高性能的工具类,针对这些代码进行研究会让我们对并发编程的掌握更加透彻也会大大提升我们队并发编程技术的 ...
- js中的数据类型和判断数据类型
js中的数据类型和判断数据类型 基本数据类型,六大基本数据类型:字符串(String).数字(Number).布尔(Boolean).对象(Object).空(Null).未定义(Undefined) ...