1.样式方法
/* function */
.cb:after,.cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.cb,.cbli li{zoom:1;}
.ib{display:inline-block;*display:inline;*zoom:1;}
.dn{display:none;}
.db{display:block;}
.fl{float:left;}
.fr{float:right;}
.pr{position:relative;}
.prz{position:relative;zoom:1;}
.oh{overflow:hidden;}
.ff0{font-family:arial,\5b8b\4f53;}
.ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.fs1{font-size:12px;}
.fs2{font-size:14px;}
.fwn{font-weight:normal;}
.fwb{font-weight:bold;}
.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}
.taj{text-align:justify;text-justify:inter-ideograph;}
.vam,.vama *{vertical-align:middle;}
.wsn{word-wrap:normal;white-space:nowrap;}
.pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.ti{overflow:hidden;text-indent:-30000px;}
.ti2{text-indent:2em;}
.lhn{line-height:normal;}
.tdu,.tdu:hover{text-decoration:underline;}
.tdn,.tdn:hover{text-decoration:none;}
.toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.csp{cursor:pointer;}
.csd{cursor:default;}
.csh{cursor:help;}
.csm{cursor:move;}
.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 screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}
重置样式
PC端
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, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img{
border: none;
}
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }
移动端
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
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, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img{
border: none;
}
/* 去除safari中默认的input样式 */
input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
input{-webkit-appearance:none; resize: none; border-radius: 0;}
动画
/* 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;}
}