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())}

时间: 2024-10-06 02:12:16

h5固定表头公共样式的相关文章

表格在固定表头遇到样式问题

css 样式来固定表头,首先设置两个table,这个时候就遇到了一个问题,那就是两个表格td的宽度要保持对其.这样才能做到固定表头的效果. 首先给table设置一个固定宽度.然后添加样式 table{table-layed:fixed} 有可能还会遇到其他的问题就是在设置td的宽度无效,这个时候不要慌.先检查是否为td设置了colspan和rowsapn等属性.如果是表格的第一列tr设置了这两个属性很可能导致td的宽度无效.我前面就是,利用一个其他的元素代替  然后就可以肆无忌惮的修改td的宽度

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

@charset "UTF-8"; /* H5公共样式,用于所有H5开发页面*/ html { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body

css控制固定表头,兼容行列合并

项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏览器没有做太多测试,在ie6中已测试通过. 功能期待了很久今天终于找到解决的方式,总结到javaeye中方便日后查阅.实现方式可能还有更好的,希望有大牛路过,给我留点更好的实现例子作日后交流之用. 以下是相关的css Html代码   <style type="text/css"&g

jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对

公共样式base.css

/*公共样式*/ /*css初始化*/ html,body,ul,li,ol,ul,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset{ margin: 0; padding: 0; } /*fieldset组合表单中的相关元素*/ fieldset,img,input,button{ border: none; padding: 0; margin: 0; outline-style: none; } /*清除列表风格*/ ul,ol{ list-style:

下载不含数据EXCEL的固定表头模版(标准EXCEL只含有列头),然后上传EXCEL.显示成功和上传失败的EXCEL连接

<div id="import" runat="server" visible="false"> Step1:<asp:HyperLink ID="HyperLink1" NavigateUrl="~/CommonTemplate/设备清单模版.xlsx" runat="server">下载模版</asp:HyperLink><br />

原生javascript 固定表头原理与源码

我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" 有人叫  "freeze-header" ,算了,看心情吧,最近心情不太好就不改了~~~ 想了想,我还是改成原生吧,angularjs就是个毛毛~~~. 先讲一下思路: 1.想一想,再想一想,肯定用定位了,具体是绝对定位还是固定定位,看实际情况:     2.clone 一份thead元素,用于再创建一个定位的表头:    

固定表头、锁定前几列的代码参考[JS篇]

引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活,这TM真是一个糟糕的事情!这两天,终于把项目上上去了,不管结果怎么样,总算是交差了吧.趁着这空档的时间,写点东西. 本篇,就来写写关于固定表头和表列的事儿吧. 相信大家使用excel的时候,肯定都会用到一项冻结的功能,冻结之后,可以让你很方便的查看到各种标题,从而能清楚的查看到当前行的内容. 这个

jquery固定表头或冻结表头的方法

html中经常遇到要把一个table的表头部分冻结,以便浏览时有更好的体验,百度完了大多数的网上解决方案,高级的bootstrap和angularjs中都没有清晰的解决方案,难道就我们中国人需要固定表头或者冻结table表头不成?其实自己写一个也没什么不可,eacherp中就有一个很方便的解决办法,一个函数而已,使用起来比较方便. javascript代码: <script> var container="#grid"; var url="abc.php"