CSS常用样式

/* CSS Document */@charset "gb2312";* {    margin: 0;    padding: 0;    border: none;    list-style: none;    text-decoration: none;    box-sizing: border-box;    font-family: "Microsoft Yahei";    /*letter-spacing: 2px;*/}a {    color: #333333;}a:focus {    outline: none;}a:hover {    color: #E20000;}.width1000 {    width: 1000px;    margin: auto;}.width1200 {    width: 1200px;    margin: auto;}.blank10 {    width: 100%;    height: 10px;}.displaynone {    display: none;}.text-align-center {    text-align: center;}.floatleft {    float: left;}.floatright {    float: right;}.grayborder {    border: 1px solid #CCCCCC;}.split-line {    width: 100%;    height: 1px;    background: #CCCCCC;}.center-vertical{  position: relative;  top:50%;  transform:translateY(-50%);}.center-horizontal{  position: relative;  left:50%;  transform:translateX(-50%); }.clear:after {    content: "";    clear: both;    display: block;}.box-shadow {    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);}.animation {    -moz-transition: all 0.5s;    -webkit-transition: all 0.5s;    -o-transition: all 0.5s;    transition: all 0.5s;    z-index: 0;}.animation:hover {    -moz-transform: scale(1.12);    -webkit-transform: scale(1.12);    -o-transform: scale(1.12);    -ms-transform: scale(1.12);    -moz-transition: all 0.5s;    -webkit-transition: all 0.5s;    -o-transition: all 0.5s;    transition: all 0.5s;    z-index: 100;}

CSS页面内容很少时，footer也显示在底部，设置wrap的最小高度为100%

html, body, .wrap { height:100%; }.wrap {    height:auto;     min-height:100%;     _height:100%;     background:#CCC;     color:#fff;     font-size:18px;     text-align:center; }

CSS使用image data设置背景色

body {    background: #EFEFEF url(data:image/png;base64,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);}