常用css

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, 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;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display: block;}
*[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: none;}
table {border-collapse: collapse;border-spacing: 0;}
.clearfix:after, .clearfix:before{content: " ";display: table;}
.clearfix:after{clear: both;}
.center-block{display: block;margin-left: auto;margin-right: auto;}
.right{float: right!important;}
.left{float: left!important;}
.hide{display: none!important;}
.show{display: block!important;}
.invisible{visibility: hidden;}
.text-hide{color: transparent;text-shadow: none;background-color: transparent;border: 0;}
.hidden{display: none!important;}
.fixed{position: fixed;}
.font-s12{font-size: 12px!important}
.font-s13{font-size: 13px!important}
.font-s14{font-size: 14px!important;}
.font-s16{font-size: 16px!important;}
.font-s18{font-size: 18px!important;}
.font-s20{font-size: 20px!important;}
.border-none{border: none!important;}
.border-radius-none{border-radius: 0!important;}
.line-height-18{line-height: 18px!important;}
.padding-none{padding: 0!important;}
.padding-5{padding: 5px!important}
.padding-10{padding: 10px!important}
.padding-15{padding: 15px!important}
.padding-20{padding: 20px!important}
.padding-25{padding: 25px!important}
.padding-top-0{padding-top: 0!important;}
.padding-top-5{padding-top: 5px!important;}
.padding-top-10{padding-top: 10px!important;}
.padding-top-15{padding-top: 15px!important;}
.padding-top-20{padding-top: 20px!important;}
.padding-left-0{padding-left: 0!important;}
.padding-left-5{padding-left: 5px!important;}
.padding-left-10{padding-left: 10px!important;}
.padding-left-15{padding-left: 15px!important;}
.padding-left-20{padding-left: 20px!important;}
.padding-right-0{padding-right: 0!important;}
.padding-right-5{padding-right: 5px!important;}
.padding-right-10{padding-right: 10px!important;}
.padding-right-15{padding-right: 15px!important;}
.padding-right-20{padding-right: 20px!important;}
.padding-bottom-0{padding-bottom: 0!important;}
.padding-bottom-5{padding-bottom: 5px!important;}
.padding-bottom-10{padding-bottom: 10px!important;}
.padding-bottom-15{padding-bottom: 15px!important;}
.padding-bottom-20{padding-bottom: 20px!important;}
.margin-none{margin: 0!important;}
.margin-5{margin: 5px!important}
.margin-10{margin: 10px!important}
.margin-15{margin: 15px!important}
.margin-20{margin: 20px!important}
.margin-25{margin: 25px!important}
.margin-top-0{margin-top: 0!important;}
.margin-top-5{margin-top: 5px!important;}
.margin-top-10{margin-top: 10px!important;}
.margin-top-15{margin-top: 15px!important;}
.margin-top-20{margin-top: 20px!important;}
.margin-left-0{margin-left: 0!important;}
.margin-left-5{margin-left: 5px!important;}
.margin-left-10{margin-left: 10px!important;}
.margin-left-15{margin-left: 15px!important;}
.margin-left-20{margin-left: 20px!important;}
.margin-right-0{margin-right: 0!important;}
.margin-right-5{margin-right: 5px!important;}
.margin-right-10{margin-right: 10px!important;}
.margin-right-15{margin-right: 15px!important;}
.margin-right-20{margin-right: 20px!important;}
.margin-bottom-0{margin-bottom: 0!important;}
.margin-bottom-5{margin-bottom: 5px!important;}
.margin-bottom-10{margin-bottom: 10px!important;}
.margin-bottom-15{margin-bottom: 15px!important;}
.margin-bottom-20{margin-bottom: 20px!important;}

grid

.container{margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
.row{margin-left: -15px; margin-right: -15px;}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float: left;}
.col-xs-12{width: 100%;}
.col-xs-11{width: 91.66666667%;}
.col-xs-10{width: 83.33333333%;}
.col-xs-9{width: 75%;}
.col-xs-8{width: 66.66666667%;}
.col-xs-7{width: 58.33333333%;}
.col-xs-6{width: 50%;}
.col-xs-5{width: 41.66666667%;}
.col-xs-4{width: 33.33333333%;}
.col-xs-3{width: 25%;}
.col-xs-2{width: 16.66666667%;}
.col-xs-1{width: 8.33333333%;}
.col-xs-pull-12{right: 100%;}
.col-xs-pull-11{right: 91.66666667%;}
.col-xs-pull-10{right: 83.33333333%;}
.col-xs-pull-9{right: 75%;}
.col-xs-pull-8{right: 66.66666667%;}
.col-xs-pull-7{right: 58.33333333%;}
.col-xs-pull-6{right: 50%;}
.col-xs-pull-5{right: 41.66666667%;}
.col-xs-pull-4{right: 33.33333333%;}
.col-xs-pull-3{right: 25%;}
.col-xs-pull-2{right: 16.66666667%;}
.col-xs-pull-1{right: 8.33333333%;}
.col-xs-pull-0{right: auto;}
.col-xs-push-12{left: 100%;}
.col-xs-push-11{left: 91.66666667%;}
.col-xs-push-10{left: 83.33333333%;}
.col-xs-push-9{left: 75%;}
.col-xs-push-8{left: 66.66666667%;}
.col-xs-push-7{left: 58.33333333%;}
.col-xs-push-6{left: 50%;}
.col-xs-push-5{left: 41.66666667%;}
.col-xs-push-4{left: 33.33333333%;}
.col-xs-push-3{left: 25%;}
.col-xs-push-2{left: 16.66666667%;}
.col-xs-push-1{left: 8.33333333%;}
.col-xs-push-0{left: auto;}
.col-xs-offset-12{margin-left: 100%;}
.col-xs-offset-11{margin-left: 91.66666667%;}
.col-xs-offset-10{margin-left: 83.33333333%;}
.col-xs-offset-9{margin-left: 75%;}
.col-xs-offset-8{margin-left: 66.66666667%;}
.col-xs-offset-7{margin-left: 58.33333333%;}
.col-xs-offset-6{margin-left: 50%;}
.col-xs-offset-5{margin-left: 41.66666667%;}
.col-xs-offset-4{margin-left: 33.33333333%;}
.col-xs-offset-3{margin-left: 25%;}
.col-xs-offset-2{margin-left: 16.66666667%;}
.col-xs-offset-1{margin-left: 8.33333333%;}
.col-xs-offset-0{margin-left: 0;}

button

.btn{display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}
.btn.focus,.btn:focus,.btn:hover{color: #333; text-decoration: none;}
.btn.active,.btn:active{outline: 0; background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 3px 5px rgba(0,0,0,.125);}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor: not-allowed; opacity: .65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none;}
a.btn.disabled,fieldset[disabled] a.btn{pointer-events: none;}
.btn-default{color: #333; background-color: #fff; border-color: #ccc;}
.btn-default.focus,.btn-default:focus{color: #333; background-color: #e6e6e6; border-color: #8c8c8c;}
.btn-default:hover{color: #333; background-color: #e6e6e6; border-color: #adadad;}
.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color: #333; background-color: #e6e6e6; border-color: #adadad;}
.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color: #333; background-color: #d4d4d4; border-color: #8c8c8c;}
.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image: none;}
.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color: #fff; border-color: #ccc;}
.btn-default .badge{color: #fff; background-color: #333;}
.btn-primary{color: #fff; background-color: #337ab7; border-color: #2e6da4;}
.btn-primary.focus,.btn-primary:focus{color: #fff; background-color: #286090; border-color: #122b40;}
.btn-primary:hover{color: #fff; background-color: #286090; border-color: #204d74;}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color: #fff; background-color: #286090; border-color: #204d74;}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color: #fff; background-color: #204d74; border-color: #122b40;}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image: none;}
.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color: #337ab7; border-color: #2e6da4;}
.btn-primary .badge{color: #337ab7; background-color: #fff;}
.btn-success{color: #fff; background-color: #5cb85c; border-color: #4cae4c;}
.btn-success.focus,.btn-success:focus{color: #fff; background-color: #449d44; border-color: #255625;}
.btn-success:hover{color: #fff; background-color: #449d44; border-color: #398439;}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color: #fff; background-color: #449d44; border-color: #398439;}
.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color: #fff; background-color: #398439; border-color: #255625;}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image: none;}
.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color: #5cb85c; border-color: #4cae4c;}
.btn-success .badge{color: #5cb85c; background-color: #fff;}
.btn-info{color: #fff; background-color: #5bc0de; border-color: #46b8da;}
.btn-info.focus,.btn-info:focus{color: #fff; background-color: #31b0d5; border-color: #1b6d85;}
.btn-info:hover{color: #fff; background-color: #31b0d5; border-color: #269abc;}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color: #fff; background-color: #31b0d5; border-color: #269abc;}
.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color: #fff; background-color: #269abc; border-color: #1b6d85;}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image: none;}
.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color: #5bc0de; border-color: #46b8da;}
.btn-info .badge{color: #5bc0de; background-color: #fff;}
.btn-warning{color: #fff; background-color: #f0ad4e; border-color: #eea236;}
.btn-warning.focus,.btn-warning:focus{color: #fff; background-color: #ec971f; border-color: #985f0d;}
.btn-warning:hover{color: #fff; background-color: #ec971f; border-color: #d58512;}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color: #fff; background-color: #ec971f; border-color: #d58512;}
.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color: #fff; background-color: #d58512; border-color: #985f0d;}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image: none;}
.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color: #f0ad4e; border-color: #eea236;}
.btn-warning .badge{color: #f0ad4e; background-color: #fff;}
.btn-danger{color: #fff; background-color: #d9534f; border-color: #d43f3a;}
.btn-danger.focus,.btn-danger:focus{color: #fff; background-color: #c9302c; border-color: #761c19;}
.btn-danger:hover{color: #fff; background-color: #c9302c; border-color: #ac2925;}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color: #fff; background-color: #c9302c; border-color: #ac2925;}
.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color: #fff; background-color: #ac2925; border-color: #761c19;}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image: none;}
.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color: #d9534f; border-color: #d43f3a;}
.btn-danger .badge{color: #d9534f; background-color: #fff;}
.btn-link{color: #337ab7; font-weight: 400; border-radius: 0;}
.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color: transparent; -webkit-box-shadow: none; box-shadow: none;}
.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color: transparent;}
.btn-link:focus,.btn-link:hover{color: #23527c; text-decoration: underline; background-color: transparent;}
.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color: #777; text-decoration: none;}
.btn-lg{padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;}
.btn-sm{padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;}
.btn-xs{padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;}
.btn-block{display: block; width: 100%;}
.btn-block+.btn-block{margin-top: 5px;}
input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width: 100%;}

media

@media (min-width:640px){  html{font-size:24px;}}
@media (min-width:631px) and (max-width:639px){html{font-size:23.66px;}}
@media (min-width:622px) and (max-width:630px){html{font-size:23.33px;}}
@media (min-width:613px) and (max-width:621px){html{font-size:23px;}}
@media (min-width:604px) and (max-width:612px){html{font-size:22.66px;}}
@media (min-width:595px) and (max-width:603px){html{font-size:22.33px;}}
@media (min-width:586px) and (max-width:594px){html{font-size:22px;}}
@media (min-width:577px) and (max-width:585px){html{font-size:21.66px;}}
@media (min-width:568px) and (max-width:576px){html{font-size:21.33px;}}
@media (min-width:559px) and (max-width:567px){html{font-size:21px;}}
@media (min-width:550px) and (max-width:558px){html{font-size:20.66px;}}
@media (min-width:541px) and (max-width:549px){html{font-size:20.33px;}}
@media (min-width:533px) and (max-width:540px){html{font-size:20px;}}
@media (min-width:524px) and (max-width:532px){html{font-size:19.66px;}}
@media (min-width:515px) and (max-width:523px){html{font-size:19.33px;}}
@media (min-width:506px) and (max-width:514px){html{font-size:19px;}}
@media (min-width:497px) and (max-width:505px){html{font-size:18.66px;}}
@media (min-width:488px) and (max-width:496px){html{font-size:18.33px;}}
@media (min-width:480px) and (max-width:487px){html{font-size:18px;}}
@media (min-width:471px) and (max-width:479px){html{font-size:17.66px;}}
@media (min-width:462px) and (max-width:470px){html{font-size:17.33px;}}
@media (min-width:453px) and (max-width:461px){html{font-size:17px;}}
@media (min-width:444px) and (max-width:452px){html{font-size:16.66px;}}
@media (min-width:435px) and (max-width:443px){html{font-size:16.33px;}}
@media (min-width:426px) and (max-width:434px){html{font-size:16px;}}
@media (min-width:417px) and (max-width:425px){html{font-size:15.66px;}}
@media (min-width:408px) and (max-width:416px){html{font-size:15.33px;}}
@media (min-width:400px) and (max-width:407px){html{font-size:15px;}}
@media (min-width:391px) and (max-width:399px){html{font-size:14.66px;}}
@media (min-width:382px) and (max-width:390px){html{font-size:14.33px;}}
@media (min-width:374px) and (max-width:381px){html{font-size:14px;}}
@media (min-width:365px) and (max-width:373px){html{font-size:13.66px;}}
@media (min-width:356px) and (max-width:364px){html{font-size:13.33px;}}
@media (min-width:347px) and (max-width:355px){html{font-size:13px;}}
@media (min-width:338px) and (max-width:346px){html{font-size:12.66px;}}
@media (min-width:329px) and (max-width:337px){html{font-size:12.44px;}}
@media (max-width:328px){html{font-size:12px;}}

typography

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight: normal; line-height: 1; color: #777777;}
h1,.h1,h2,.h2,h3,.h3{margin-top: 20px; margin-bottom: 10px;}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size: 65%;}
h4,.h4,h5,.h5,h6,.h6{margin-top: 10px; margin-bottom: 10px;}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size: 75%;}
h1,.h1{font-size: 36px;}
h2,.h2{font-size: 30px;}
h3,.h3{font-size: 24px;}
h4,.h4{font-size: 18px;}
h5,.h5{font-size: 14px;}
h6,.h6{font-size: 12px;}
p{margin: 0 0 10px;}
.lead{margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;}
small,.small{font-size: 85%;}
mark,.mark{background-color: #fcf8e3; padding: .2em;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}
.text-justify{text-align: justify;}
.text-nowrap{white-space: nowrap;}
.text-lowercase{text-transform: lowercase;}
.text-uppercase{text-transform: uppercase;}
.text-capitalize{text-transform: capitalize;}
.text-muted{color: #777777;}
.text-primary{color: #337ab7;}
a.text-primary:hover,a.text-primary:focus{color: #286090;}
.text-success{color: #3c763d;}
a.text-success:hover,a.text-success:focus{color: #2b542c;}
.text-info{color: #31708f;}
a.text-info:hover,a.text-info:focus{color: #245269;}
.text-warning{color: #8a6d3b;}
a.text-warning:hover,a.text-warning:focus{color: #66512c;}
.text-danger{color: #a94442;}
a.text-danger:hover,a.text-danger:focus{color: #843534;}
.bg-primary{color: #fff; background-color: #337ab7;}
a.bg-primary:hover,a.bg-primary:focus{background-color: #286090;}
.bg-success{background-color: #dff0d8;}
a.bg-success:hover,a.bg-success:focus{background-color: #c1e2b3;}
.bg-info{background-color: #d9edf7;}
a.bg-info:hover,a.bg-info:focus{background-color: #afd9ee;}
.bg-warning{background-color: #fcf8e3;}
a.bg-warning:hover,a.bg-warning:focus{background-color: #f7ecb5;}
.bg-danger{background-color: #f2dede;}
a.bg-danger:hover,a.bg-danger:focus{background-color: #e4b9b9;}
.page-header{padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eeeeee;}
ul,ol{margin-top: 0; margin-bottom: 10px;}
ul ul,ol ul,ul ol,ol ol{margin-bottom: 0;}
.list-unstyled{padding-left: 0; list-style: none;}
.list-inline{padding-left: 0; list-style: none; margin-left: -5px;}
.list-inline > li{display: inline-block; padding-left: 5px; padding-right: 5px;}
dl{margin-top: 0; margin-bottom: 20px;}
dt,dd{line-height: 1.42857143;}
dt{font-weight: bold;}
dd{margin-left: 0;}
abbr[title],abbr[data-original-title]{cursor: help; border-bottom: 1px dotted #777777;}
.initialism{font-size: 90%; text-transform: uppercase;}
blockquote{padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eeeeee;}
blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom: 0;}
blockquote footer,blockquote small,blockquote .small{display: block; font-size: 80%; line-height: 1.42857143; color: #777777;}
blockquote footer:before,blockquote small:before,blockquote .small:before{content: '\2014 \00A0';}
.blockquote-reverse,blockquote.pull-right{padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; text-align: right;}
.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content: '';}
.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content: '\00A0 \2014';}
address{margin-bottom: 20px; font-style: normal; line-height: 1.42857143;}

shape

1.正方形

#square {
width: 100px;
height: 100px;
background: red;}

2.长方形

#rectangle {
width: 200px;
height: 100px;
background: red;}

3.左上三角

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red; 
border-right: 100px solid transparent;
}

4.右上三角

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red; 
border-left: 100px solid transparent;}

5.左下三角

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red; 
border-right: 100px solid transparent;
}

6.右下三角

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red; 
border-left: 100px solid transparent;
}

7.平行四边形

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: red;
}

8.梯形

#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

9.六角星

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

10.五角星

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

11.五边形

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

12.六边形

#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px; 
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px; 
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

13.桃心

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

14.无限大符号

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

15.蛋

#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;
}

16.提示对话框

#talkbubble {
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

17.十二角星

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

18.八角星

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

19.钻石

#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

20.八卦

#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
} 

21.开关

/**开关按钮**/
.switch{
    position:relative;
    display: block;
    padding: 1px;
    border-radius: 24px;
    height: 36px;
    width: 86px;
    margin-bottom: 15px;
    background-color: #eee;
    cursor: pointer;
    vertical-align: top;
    -webkit-user-select: none;
}
.switch:before{
    content: '';
    display: block;
    border-radius: 24px;
    height: 36px;
    background-color: white;
    -webkit-transform: scale(1, 1);
    -webkit-transition: all 0.3s ease;
}
.switch:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -19px;
    margin-left: -34px;
    width: 36px;
    height: 36px;
    border-radius: 22px;
    background-color: white;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
    -webkit-transform: translateX(-9px);
    -webkit-transition: all 0.3s ease;
}
.switch.checked:after{
    -webkit-transform: translateX(9px);
}

.switch.checked:before{
    background-color:#ffcd20;
}

media-2

@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphone4/4s */
}

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphone5/SE */
 
}

@media (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphone6、iphone7、iphone8 */
  
}

@media (device-height: 736px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphone6plus、iphone7plus、iphone8plus */
  
}

@media (device-height: 812px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphoneX */
 
}