pc端样式重置以及常用样式规范class

//reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer,
header, menu, nav, section, summary, time, mark, audio, video, input /*,hgroup*/
{
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

body {
  font-family: arial, sans-serif;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust: none;
}

div, address, article, aside, details, figcaption, figure, footer, header, menu, nav, section /*,hgroup*/
{
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

i, cite, em, var, address, dfn {
  font-style: normal;
}

[hidefocus], summary {
  outline: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
  font-weight: normal;
}

textarea {
  overflow: auto;
  resize: none;
}

label, summary {
  cursor: default;
}

a, button {
  cursor: pointer;
}

del, ins, u, s, a, a:hover {
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.container {
  width: auto;
  margin: 0 auto;
}

.container-fluid {
  width: 100%;
  margin: 0;
}

.container:before, .clear-botn:before, .container-fluid:before {
  content: " ";
  display: table;
}

.container:after, .clear-both:after, .container-fluid:after {
  content: " ";
  display: table;
  clear: both;
}

//function
.f-cb:after, .f-cbli li:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  content: ".";
}

.f-cb, .f-cbli li {
  zoom: 1;
}

.f-ib {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.f-dn {
  display: none;
}

.f-db {
  display: block;
}

.f-fl {
  float: left;
}

.f-fr {
  float: right;
}

.f-pr {
  position: relative;
}

.f-prz {
  position: relative;
  zoom: 1;
}

.f-oh {
  overflow: hidden;
}

.f-fs1 {
  font-size: 12px;
}

.f-fs2 {
  font-size: 14px;
}

.f-fwn {
  font-weight: normal;
}

.f-fwb {
  font-weight: bold;
}

.f-tal {
  text-align: left;
}

.f-tac {
  text-align: center;
}

.f-tar {
  text-align: right;
}

.f-taj {
  text-align: justify; /*text-justify:inter-ideograph;*/
}

.f-vam, .f-vama * {
  vertical-align: middle;
}

.f-wsn {
  word-wrap: normal;
  white-space: nowrap;
}

.f-pre {
  overflow: hidden;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

.f-wwb {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.f-ti {
  overflow: hidden;
  text-indent: -30000px;
}

.f-ti2 {
  text-indent: 2em;
}

.f-lhn {
  line-height: normal;
}

.f-tdu, .f-tdu:hover {
  text-decoration: underline;
}

.f-tdn, .f-tdn:hover {
  text-decoration: none;
}

.f-toe {
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.f-csp {
  cursor: pointer;
}

.f-csd {
  cursor: default;
}

.f-csh {
  cursor: help;
}

.f-csm {
  cursor: move;
}

.f-usn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

// media
//横屏
@media screen and (orientation: landscape) {
}

//竖屏
@media screen and (orientation: portrait) {
}

//窗口宽度<960,设计宽度=768
@media screen and (max-width: 959px) {
}

//窗口宽度<768,设计宽度=640
@media screen and (max-width: 767px) {
}

//窗口宽度<640,设计宽度=480
@media (min-width: 480px) and (max-width: 639px) {
}

//窗口宽度<480,设计宽度=320
@media (min-width: 414px) and (max-width: 479px) {
}

@media screen and (max-width: 413px) {
}

//windows UI 贴靠
//@media screen and (-ms-view-state:snapped){  }
//打印
@media print {
}

//animation
//淡入
.a-fadein {
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  animation-name: fadein;
}

//define
//淡入
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

less模式下的颜色变量

//standard gray color
@standard-gray-333: #333;
@standard-gray-444: #444;
@standard-gray-555: #555;
@standard-gray-666: #666;
@standard-gray-777: #777;
@standard-gray-888: #888;
@standard-gray-999: #999;
@standard-gray-aaa: #aaa;
@standard-gray-bbb: #bbb;
@standard-gray-ccc: #ccc;
@standard-gray-ddd: #ddd;
@standard-gray-eee: #eee;
@standard-gray-fff: #fff;
//standard color
@standard-danger: #f6383a;
@standard-loveliness: #ff009c;
@standard-vivacious: #ff6600;
@standard-calmness: #0894ec;
@standard-safety: #4cd964;

html

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Template</title><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="shortcut icon" href="/favicon.ico"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--></head><body><h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script></body></html>

 

转载于:https://www.cnblogs.com/myclovers/p/5289527.html