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 {
font-family: inherit;
font-size: 14px;
background: #fff;
}
/* 将具有默认margin和padding的标记置零,所有标记的margin、padding都在使用时具体定义 */
* {
box-sizing: border-box;
}
/* 常用标签,基本标签默认样式取消,HTML标签,取消基本标签默认样式,防止不同浏览器显示效果不同 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,button,input,textarea,th,td,div {
margin:;
padding:;
border:;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
display: block;
margin:;
padding:;
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline;
margin:;
padding:;
}
b,strong {
font-weight: bold;
}
small {
font-size: 80%;
}
code,kbd,pre,samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,input,optgroup,select,textarea {
margin:;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,select {
text-transform: none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
/*清除移动端默认的表单样式*/
-webkit-appearance: none;
cursor: pointer;
}
button[disabled],html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,input::-moz-focus-inner {
padding:;
border:;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #ddd;
}
legend {
padding:;
border:;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing:;
border-collapse: collapse;
}
td,th {
padding:;
}
body,input,select,textarea,button {
/*字体变清晰*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 清除ul列表标记的样式 */
ol,ul {
list-style: none;
}
/* 定义默认的链接样式,仅仅是作为默认样式提供,可以在各自的实例中覆盖掉 */
a,a:hover,a:focus {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
tap-highlight-color: transparent;
}
/* 定义图片边框,当图片作为链接内容被填充时,会有默认边框出现,重定义掉 */
img {
width: 100%;
border: 0 none;
-ms-interpolation-mode: bicubic;
}
/* 去掉虚线框 */
input:focus,textarea:focus,select:focus,button:focus,a:focus {
outline:;
}
/*通过为父元素添加 .clearfix 类可以很容易地清除浮动*/
.clearfix:after,.clearfix:before {
content: ".";
display: block;
font-size:;
height:;
line-height:;
overflow: hidden;
visibility: hidden;
width:;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom:;
} /*---common style ---*/
.fontSTsong {
font-family: "NSimSun", "SimSun", "STSong", "FangSong", "FangSong_GB2312" !important;
}
.app-table {
display: table;
} .app-tr {
display: table-row;
} .app-td {
display: table-cell;
} html {
font-size: 100px;
} @media only screen and (min-width: 401px) {
html {
font-size: 125px !important;
}
} @media only screen and (min-width: 428px) {
html {
font-size: 133.75px !important;
}
} @media only screen and (min-width: 481px) {
html {
font-size: 150px !important;
}
} @media only screen and (min-width: 569px) {
html {
font-size: 175px !important;
}
} @media only screen and (min-width: 641px) {
html {
font-size: 200px !important;
}
} html,body {
min-height: 100%;
} body {
margin: 0 auto;
width: 100%;
max-width: 640px;
font-size: 0.14rem;
color: #333;
} h1,h2,h3,h4,h5,h6 {
font-weight: normal;
} .hide {
display: none;
} .show {
display: block;
} a {
color: #333;
}
.abs{ position: absolute; }
.rel{ position: relative; }
.bg-white { background: #fff;}
.bg-gray { background: #f2f2f2;}
img { display: block;}
.ver-m{vertical-align: middle;}
.ver-t{vertical-align: top;}
.ver-b{vertical-align: bottom;}
.fr{float: right;}
.fl{float: left;}
.tl { text-align: left !important;}
.tc { text-align: center !important;}
.tr { text-align: right !important;}
.bdb-1 { border-bottom: 1px solid #d7d6dc;}
.bdt-1 { border-top: 1px solid #d7d6dc;}
.fc-yellow{ color: #ff9900; }
.fc-blue{ color: #0a5ecc; }
.fs-xs{font-size: 0.12rem;}
.fs-s{font-size: 0.14rem;}
.fs-m{font-size: 0.16rem;}
.fs-l{font-size: 0.18rem;}
.mg-s{margin: 0.1rem;}
.mg-m{margin: 0.15rem;}
.mg-l{margin: 0.2rem;}
.mg-xl{margin: 0.25rem;}
.mg-xxl{margin: 0.3rem;}
.mgt-s{margin-top: 0.1rem;}
.mgt-m{margin-top: 0.15rem;}
.mgt-l{margin-top: 0.2rem;}
.mgb-s{margin-bottom: 0.1rem;}
.mgb-m{margin-bottom: 0.15rem;}
.mgb-l{margin-bottom: 0.2rem;}
.pd-s{padding: 0.1rem;}
.pd-m{padding: 0.15rem;}
.pdb-s{padding-bottom: 0.1rem;}
.pdb-m{padding-bottom: 0.15rem;}
.pdb-l{padding-bottom: 0.2rem;}
.pdt-s{padding-top: 0.1rem;}
.pdt-m{padding-top: 0.15rem;}
.pdt-l{padding-top: 0.2rem;} /*顶部*/ header {
width: 100%;
position: fixed;
top:;
left:;
z-index:;
} .nav-warp {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 640px;
height: 0.48rem;
background: #0066ff;
} .nav-warp .nav-menu-btn {
position: absolute;
top:;
left:;
width: 0.48rem;
height: 0.48rem;
background: url(../images/sprite.png) -0.5rem -1rem no-repeat;
background-size: 2rem 1.5rem;
z-index:;
} .nav-warp .nav-menu-btn.show {
background: url(../images/sprite.png) #333 0 -1rem no-repeat;
background-size: 2rem 1.5rem;
opacity: 0.8;
filter: alpha(opacity=80);
} .nav-warp .nav-con {
position: relative;
padding: 0 0.45rem;
} .nav-warp .nav-con .page-title {
height: 0.48rem;
line-height: 0.48rem;
text-align: center;
font-size: 0.18rem;
color: #fff;
} .nav-warp .nav-menu {
display: none;
position: absolute;
width: 100%;
top: 0.48rem;
left:;
overflow: hidden;
z-index:;
background: #333;
opacity: 0.8;
filter: alpha(opacity=80);
} .nav-warp .nav-menu-lists {
width: 100%;
max-width: 640px;
} .nav-warp .nav-menu-lists li {
float: left;
width: 0.64rem;
height: 0.54rem;
line-height: 0.54rem;
text-align: center;
} .nav-warp .nav-menu-lists a {
display: block;
font-size: 0.12rem;
color: #fff;
} .nav-warp .nav-menu-lists a.cur,
.nav-warp .nav-menu-lists a:active {
color: #ffc600;
} .nav-warp .page-title {
font-size: 0.15rem;
} .nav-warp .logo {
position: absolute;
top: 0.1rem;
right: 0.1rem;
width: 0.28rem;
height: 0.28rem;
z-index:;
} .nav-warp .logo img {
width: 0.28rem;
height: 0.28rem;
} footer {
background: #efeff4;
padding: 0.14rem;
/*margin-top:0.15rem;*/
} footer .server-tel {
padding: 0.1rem 0;
border: 0.01rem solid #cdcdcd;
border-radius: 0.05rem;
background: #fff;
} footer .server-tel .icon-tel {
float: left;
margin-left: 0.2rem;
} footer .server-tel .icon-tel img {
width: 0.41rem;
height: 0.39rem;
} footer .server-tel .server-info {
float: left;
margin-left: 0.15rem;
} footer .server-tel .server-info .tel {
font-size: 0.16rem;
color: #333;
} footer .server-tel .server-info .time {
font-size: 0.13rem;
color: #666;
} footer .address-info {
margin-left: 0.05rem;
padding: 0.15rem 0;
} footer .address-info p {
font-size: 0.13rem;
color: #333;
line-height: 0.2rem;
} footer .copyright-wrap .logo {
float: left;
width: 0.35rem;
height: 0.35rem;
margin-top: 0.06rem;
} footer .copyright-wrap .logo img {
width: 0.35rem;
height: 0.35rem;
} footer .copyright-wrap .copyright {
/*float: left;*/
/*width: 2.45rem;*/
margin-left: 0.08rem;
} footer .copyright-wrap .copyright .company-name {
font-size: 0.15rem;
color: #333;
} footer .copyright-wrap .copyright .text {
font-size: 0.09rem;
color: #666;
} .goto-top {
position: fixed;
right: 0.1rem;
bottom: 0.2rem;
width: 0.44rem;
height: 0.44rem;
text-indent: -9999em;
background: url(../images/sprite.png) 0 -0.5rem no-repeat;
background-size: 2rem 1.5rem;
z-index:;
} .page-warp {
padding-top: 0.48rem;
} .page-warp.pdt108 {
padding-top: 1.08rem;
}
H5公共样式,用于所有H5开发页面的更多相关文章
- css公共样式 | 标签元素初始化
PC参考样式1: @charset "utf-8"; html{background:#fff;overflow:auto;} body{min-width:1200px;font ...
- CSS 公共样式分享
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...
- CSS 公共样式
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...
- h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例
html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...
- css中一些必要的公共样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend ...
- css清除默认样式和设置公共样式
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textar ...
- 9 个用于移动APP开发的顶级 JavaScript 框架
顶级 Java 框架 对于Web开发而言,Java是一个有前途的编程语言,并且在不久的将来它将依然在这个领域大放光彩.Java在移动app开发上也有同样的影响吗?让我们一起来看看ValueCoders ...
- ASP.NET4 与 VS2010 Web 开发页面服务改进
转:http://blog.163.com/kele_lipeng/blog/static/81345278201132754729336/ 作者:朱先忠 本文将接着上一篇 ASP.NET4与VS20 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
随机推荐
- Install SharePoint 2013 with SP1 on Windows Server 2012 R2 error - This Product requires .NF 4.5
博客地址:http://blog.csdn.net/FoxDave 最近因为项目需要要搭建SharePoint 2013的开发环境. 准备了Windows Server 2012 R2系统和Sha ...
- JavaWeb:一个Servelt多个请求
一个Servelt多个请求 基础模拟 方法一:使用switch方法 一.方法介绍 方法:switch 优点:方法简单,明了 缺点:维护麻烦,保密性不好 二.代码实现 1.servlet类 packa ...
- mkdir 获得新建文件权限
使用mkdir创建文件夹时,发现这个函数有两个参数,第二个参数是为新创建的文件夹指定权限. 但是如果直接用mkdir('文件地址', 0777);时 发现新文件夹的权限并不是777,一般情况下会是02 ...
- uniDAC 7.2.14直联sqlite存在问题
用最新的uniDAC 7.2.14,设置Direct=True,直联sqlite数据库,发现Release状态下出错,Debug没有问题. 改成Direct=False,则没有问题. 警告! 各 ...
- 读懂TCP状态转移
读懂TCP状态转移过程,对理解网络编程颇有帮助,本文将对TCP状态转移过程进行介绍,但各状态(总共11个)含义不在本文介绍的范围,请参考文末的书目列表. TCP状态转换图(state transiti ...
- 2.22 JS处理富文本
2.22 JS处理富文本 前言 <富文本>这篇解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一.加 ...
- ___security_cookie机制
.text:00411500 ; int __cdecl wmainCRTStartup().text:00411500 _wmainCRTStartup proc near ...
- Redis持久化--RDB+AOF(转)
1.Redis两种持久化方式 RDB 执行机制:快照,直接将databases中的key-value的二进制形式存储在了rdb文件中 优点:性能较高(因为是快照,且执行频率比aof低,而且rdb文件中 ...
- TensorRT caffemodel serialize
1.TensorRT的需要的文件 需要的基本文件(不是必须的) 1>网络结构文件(deploy.prototxt) 2>训练的权重模型(net.caffemodel) TensorRT 2 ...
- python中的list按照某一列进行排序的方法
如题,python中的list着实很好用,我有如下一个list 可以看出list中的每一个元素是由字符串,两个新的list,以及一个float组成,现在想根据这最后一个float对这个list进行排序 ...