h5固定表头公共样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5固定表头公共样式相关的知识,希望对你有一定的参考价值。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

 

css

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    /*-webkit-overflow-scrolling: touch;*/
}

body {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    background-color: #fff;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline;
    *display: inline;
    *zoom: 1
}

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

a {
    background: transparent;
    text-decoration: none;
    color: #08c
}

a:active,a:hover {
    outline: 0
}

a:hover {
    color: #069
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0;
    /*vertical-align: middle;*/
    -ms-interpolation-mode: bicubic
}

svg:not(:root) {
    overflow: hidden
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

code,kbd,pre,samp {
    font-family: monospace, monospace;
    _font-family: ‘courier new‘, monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
    *margin-left: -7px
}

textarea {
    overflow: auto;
    resize: vertical
}

optgroup {
    font-weight: bold
}

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

td,th {
    padding: 0
}

q {
    quotes: none
}

html,button,input,select,textarea {
    font-family: "Helvetica Neue",Helvetica,Tahoma,sans-serif
}

h1,h2,h3,h4,h5,h6,p,figure,form,blockquote {
    margin: 0
}

ul,ol,li,dl,dd {
    margin: 0;
    padding: 0
}

ul,ol {
    list-style: none outside none
}

h1,h2,h3 {
    line-height: 2;
    font-weight: normal
}

h1 {
    font-size: 21px
}

h2 {
    font-size: 18.2px
}

h3 {
    font-size: 16.38px
}

h4 {
    font-size: 14px
}

h5,h6 {
    font-size: 11.9px;
    text-transform: uppercase
}

input:-moz-placeholder,textarea:-moz-placeholder {
    color: #ccc
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #ccc
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #ccc
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc
}
/*# sourceMappingURL=reset.css.map */

/*font by yuncanqin 20151127*/
@media screen and ( min-width: 319px){html{ font-size: 100px;}}
@media screen and ( min-width: 359px){html{ font-size: 106px;}}
@media screen and ( min-width: 383px){html{ font-size: 112px;}}
@media screen and ( min-width: 399px){html{ font-size: 118px;}}
@media screen and ( min-width: 414px){html{ font-size: 120px;}}
@media screen and ( min-width: 423px){html{ font-size: 130px;}}
@media screen and ( min-width: 479px){html{ font-size: 140px;}}
body{ font-family: Microsoft YaHei,STXihei,sans-serif; font-size: 14px}
p{margin: 0}
*{ box-sizing: border-box;-webkit-tap-highlight-color:rgba(255,0,0,0);margin: 0;padding: 0}
:focus{outline:none;}
input,a,img{border:0;}
input[type=text],input[type=checkbox],input[type=button],input[type=date]{-webkit-appearance: none;}
input,button{ outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
html, body { width: 100%; min-width: 320px; max-width: 640px;margin: 0px auto; font-family: "Microsoft YaHei"; color: #333;background: #f0eff5;}
a{blr:expression(this.onFocus=this.blur())}

以上是关于h5固定表头公共样式的主要内容,如果未能解决你的问题,请参考以下文章

H5公共样式,用于所有H5开发页面

带排序的固定表头

html页面中 一旦加入 doctype 会使 固定表头的样式失效, 不加又会使页面所有其它样式失效。 求助啊。

JavaScript:固定table的表头

使用ivew组件,如何对table组件实现每行可以配置(字体颜色、大小,每行的背景颜色,固定表头等)

固定table的表头同时固定列