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: 0;
  padding: 0;
  border: 0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
  display: block;
  margin: 0;
  padding: 0;
}
audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
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: 0;
  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: 0;
  border: 0;
}
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: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,th {
  padding: 0;
}
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: 0;
}
/*通过为父元素添加 .clearfix 类可以很容易地清除浮动*/
.clearfix:after,.clearfix:before {
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

/*---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: 0;
  left: 0;
  z-index: 10;
}

.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: 0;
  left: 0;
  width: 0.48rem;
  height: 0.48rem;
  background: url(../images/sprite.png) -0.5rem -1rem no-repeat;
  background-size: 2rem 1.5rem;
  z-index: 2;
}

.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: 0;
  overflow: hidden;
  z-index: 2;
  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: 2;
}

.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: 999;
}

.page-warp {
  padding-top: 0.48rem;
}

.page-warp.pdt108 {
  padding-top: 1.08rem;
}

原文地址:https://www.cnblogs.com/z45281625/p/10540382.html

时间: 2024-11-09 22:20:18

H5公共样式,用于所有H5开发页面的相关文章

h5开发页面逻辑

一.页面展示 http://192.168.3.3:8080/dist/view/index.html 1.简单编写了一个阅读器的模式 2.h5+css3+base64(字体图形) 3.页面逻辑commonjs+webpack //用localStorage保存设置信息方法 exports.Util = (function() { var prefix = 'ficiton_reader_'; var StorageGetter = function(key) { return localSto

Mac下快速对H5鱼虾蟹棋牌搭建PHP开发环境

Mac下快速对H5鱼虾蟹棋牌搭建PHP开发环境论坛:aqiulian.com,更多PHP搭建MVC开发环境咨询Q:212303635. 最近做了一个后端的项目,是用PHP+MySQL+Nginx做的,所以把搭建环境的方法简单总结一下. 备注: 物料:Apache/Nginx+PHP+MySQL+MAMP Mac OS 10.12.1 自带Apache,Nginx和PHP 1.运行Apache 查看Apache版本,在终端根目录输入如下命令: sudo apachectl -v 终端会输出Apac

CSS 公共样式

global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致. common.css(公共组件样式) 一般一个网站所有页面头部.底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品.运营的经常需要添加.去掉某些入口的需求,要保证全站所有页面头部一次替换生效,只要把头文件,已经对应的样式一发,马上生效,很快就有响应. 比如翻页.表单(输入框.按

css公共样式

一.总结的公用样式解析 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } img { border: 0 none; vertical-align: top; } ul, li { list-style-type: none; } h1, h2,

【转】CSS 公共样式分享

global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致. common.css(公共组件样式) 一般一个网站所有页面头部.底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品.运营的经常需要添加.去掉某些入口的需求,要保证全站所有页面头部一次替换生效,只要把头文件,已经对应的样式一发,马上生效,很快就有响应. 比如翻页.表单(输入框.按

ASP.NET4 与 VS2010 Web 开发页面服务改进

转:http://blog.163.com/kele_lipeng/blog/static/81345278201132754729336/ 作者:朱先忠 本文将接着上一篇 ASP.NET4与VS2010Web开发核心服务改进 继续讨论核心ASP.NET服务方面的改进. 四.永久重定向页面 一种常见的Web应用程序做法是,随着时间的推移经常移动网页和其他内容,从而导致搜索引擎失效链接的积累.在ASP.NET中,开发商通常采用的处理旧网址请求的方案是,使用 Response.Redirect方法把

允许用样式表来格式化Visio页面!Aspose.Diagram v19.11双语言平台同步更新!

Microsoft Office是市场上最强大的绘图工具之一.通常,执行基本任务会较为困难 - 比如在页面内绘制形状等等. 如果你想以编程方式使用它并开发Add-Ons,小编为你推荐Aspose.Diagram. Aspose.Diagram for .NET是专门用于处理Microsoft Visio文件的API.它允许开发人员创建,操作和转换本机Visio文件格式.开发人员可以从头开始创建图表,并轻松加载现有文件并操纵图表元素以将结果导出为其他格式. 近日,Aspose.Diagram的.N

公共样式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:

CSS覆盖公共样式中的某个属性

CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g