css工具类封装

温馨提示：一下css封装，建议按需使用，否则会造成很大的代码冗余，且很多样式会造成不符合预期的效果，建议合理使用

<a href="https://meyerweb.com/eric/tools/css/reset/">Reset.css</a>

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 }
.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: 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;
}

hr {
 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;
}

audio,
video {
 display: inline-block;
}

audio:not([controls]) {
 display: none;
 height: 0;
}

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: 0;
 /* 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: 0;
}

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: 0;
 /* 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: 0;
 /* 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: 0; padding: 0; 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: 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;
}

hr {
 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;
}

audio,
video {
 display: inline-block;
}

audio:not([controls]) {
 display: none;
 height: 0;
}

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: 0;
 /* 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: 0;
}

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: 0;
 /* 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: 0;
 /* 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: 0;
 padding: 0;
 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;
}

原文地址：https://www.cnblogs.com/bgwhite/p/9582400.html

时间： 2024-10-24 16:20:29

css工具类封装的相关文章

fastdfs-client-java工具类封装

FastDFS是通过StorageClient来执行上传操作的 通过看源码我们知道,FastDFS有两个StorageClient工具类. StorageClient的上传方法upload_file(...)返回的是字符串数组String[], 如[group1,M00/00/00/wKgAb1dBK2iANrayAA1rIuRd3Es112.jpg] StorageClient1的上传方法upload_file(...)返回的是字符串数组String, 如group1/M00/00/00/wK

【Cocos2d-x Lua】http工具类封装

实现 该工具类对Cocos2d-x中的HttpClient进行了封装,使可以在Lua中实现http异步请求. LuaHttpClient.h #ifndef __LUAHTTPCLIENT_H__ #define __LUAHTTPCLIENT_H__ #include "cocos2d.h" USING_NS_CC; #include "cocos-ext.h" USING_NS_CC_EXT; // 参数封装类 class LuaParams{ public:

utils部分--一些通用的工具类封装

1.简介 utils部分是对一些常用的工具类进行简单的封装,使用起来比较方便.这里列举常用的一些. 2.ContextUtils使用 主要封装了网络判断.一些方法解释如下: ? 1 2 3 4 5 6 7 8 //判断是否存在网络连接 public static boolean hasNetwork(Context context); //判断GPS是否打开 public static boolean isGpsEnabled(Context context); //SD卡是否可用 public

Android Sqlite 工具类封装

鉴于经常使用 Sqlite 数据库做数据持久化处理,进行了一点封装,方便使用. 该封装类主要支持一下功能 支持多用户数据储存 支持 Sqlite数据库升级 支持传入 Sql 语句建表 支持 SQLiteDatabase 基本操作.比如:execSQL.rawQuery.insert等等 解决了数据库并发问题 先贴上封装类代码 /** * * @ClassName: DataBaseOpenHelper * @Description: 数据库工具类 * @author lhy * @date 20

微信支付(二)：工具类封装

package net.xdclass.xdvideo.utils; import java.security.MessageDigest; import java.util.UUID; /** * 常用工具类的封装,md5,uuid等 */ public class CommonUtils { /** * 生成 uuid, 即用来标识一笔单,也用做 nonce_str * @return */ public static String generateUUID(){ String uuid =

静态资源上传至远程ftp服务器，ftp工具类封装

工具类,是一个单独的工程项目 提取必要信息至ftp.properties配置文件中 ftp_host=192.168.110.128 ftp_port=21 ftp_username=ftpuser ftp_password=ftpuser ftp_dir=/home/ftpuser/jd ftp_url=http://www.images.com 封装FtpUtils工具类 public class FtpUtils { private static String ftp_host = nul

突破CRUD | 万能树工具类封装

0.学完本文你或许可以收获感受一个树工具从初始逐步优化完善的过程 树工具封装的设计思考与实现思路 最后收获一款拿来即用的树工具源代码 对于前端树组件有一定了解和使用过的同学可直接跳跃到第3章节开始. 1.树长什么样 ?前端的树组件大多数情况下出现在后端的管理系统中,比如我们常见的菜单树.机构树.某某分类树.树表格等.大致像下方图片所展示的这样. 菜单树 机构树 org_tree.pngorg_tree.png 树表格 大致上来说,前端树的展现形式就是上面3张图所列的几种形式.而这种前端树组件的展

Android 常见工具类封装

1,MD5工具类: public class MD5Util { public final static String MD5(String s) { char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' }; try { byte[] btInput = s.getBytes(); // 获得MD5摘要算法的 MessageDigest 对象 Mes

常用工具类封装

日期转换工具类 CommUtil.java [java] view plain copy package com.util; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; /** * 日期转换工具类 */ public class CommUtil { /** * 将日期格式转换成yyyy-MM-dd的字符串格式 * 返回值如:2010-10-06 * @par