html5外置样式表,HTML5移动端通用css详解

HTML5移动端通用css

下面是common.css内容

/*css初始化*/

/*清除内外边距*/

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img{

margin: 0;

padding: 0;

border: medium none;

}

h1,h2,h3,h4,h5,h6{

font-size: 100%;

}

*{

box-sizing:border-box;

}

em{

font-style: normal;

}

/*重置列表元素*/

ul,li{

list-style: none;

}

/*重置超链接元素*/

a{

text-decoration: none;

color: #333333;

}

a:hover{

text-decoration: underline;

color: #f40;

}

/*重置图片元素*/

img{

border: 0px;

vertical-align:middle;

}

/*重置表格元素*/

table{

border-collapse: collapse;

border-spacing: 0;

}

html,body{

font-size:11px;

font-family:Helvetica;

height: 100%;

color: #333;

}

@media screen and (max-width:320px){html,body {font-size:11px}}

@media screen and (min-width:321px) and (max-width:375px){html,body {font-size:12px}}

@media screen and (min-width:376px) and (max-width:414px){html,body {font-size:13px}}

@media screen and (min-width:415px) and (max-width:639px){html,body{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html,body{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html,body{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html,body{font-size:23.5px}}

@media screen and (min-width:800px){html,body{font-size:25px}}

.icon{

height: 1.5rem;

vertical-align: middle;

}

/*头部*/

.l_header {

position: relative;

height: 48px;

background: rgba(0,0,0,.1);

color: #fff;

text-align: center;

line-height: 48px;

font-size: 1.3rem;

background-color: #48C23D;

/* background: -webkit-linear-gradient(left,#5191FF, #3CA8FE,#29C1FE,#38BAFE); */

}

.l_header a img {

width: 30px;

position: absolute;

top: 9px;

left: 10px;

}

/** 无数据 */

.no-result{

display:none;

padding-top: 30px;

text-align: center;

font-size: 14px;

}

.no-result img{

width: 273px;

height: 56px;

margin-bottom: 5px;

}

.no-result text{

width: 100%;

color: #666;

float: left;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411272.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LINUX下tar.gz包的安装方法

LINUX下tar.gz包的安装方法 在tar.gz的东西不多了~~~~ =============&…

工作381-兼容移动端头部

<meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0">

目前流行的微型计算机内存的配置为,全国计算机一级考试模拟试题

出国留学网计算机等级考试网为大家提供全国计算机一级考试模拟试题&#xff0c;更多计算机等级考试资讯请关注我们网站的更新!1)根据汉字国标GB2312-80的规定&#xff0c;二级次常用汉字个数是A) 3000个 B)7445个 C)3008个 D)3755个2)在下列字符中&#xff0c;其ASCII码值最小的…

insert 和 insertSelective的区别

使用逆向工程生成的代码做一个添加时通常都会给出两个答案&#xff0c;如题目想要增加一条数据会让你选择insert或者insertSelective 两者的区别在于如果选择insert 那么所有的字段都会添加一遍即使没有值 <insert id"insert" parameterType"com.ego.pojo.Tb…

事务处理

第13章 事务处理 事务处理是包含一个或多个任务的一组关联操作的提交或回滚操作。在事务执行的过程中&#xff0c;保证事务具有基本的ACID属性&#xff08;原子、一致性、隔离和持久性&#xff09;。.NET Framework的事务管理支持多种事务处理方式&#xff0c;包括显性事务和隐…

工作382-vant弹框不能直接用

this.$toast.success("当前所填项不能为空")

为多孔介质的当量直径_多孔介质流建模简介

拥有一款先进的多孔介质建模工具&#xff0c;是许多行业的刚性需求。COMSOL Multiphysics 软件 5.5 版本新增的附加产品——多孔介质流模块&#xff0c;可以满足众多行业的需求。使用该模块可以定量研究多孔介质中的质量、动量和能量传递。该模块适用于燃料电池、纸浆和纸张干燥…

北航计算机网络 传输层实验,北航研究生计算机网络实验_实验七 传输层实验

** 这个实验我没有约到没有问题的机子(连续三台机子都是坏的...)因此仅供参考1、根据2.6中步骤3回答&#xff1a;TCP的连接和建立采用的是&#xff1a;三次握手方式&#xff0c;PCA是主动打开方(C)&#xff0c;PCB是被动打开方(S)。先点击发送再点击接收&#xff0c;会出现什么…

学习,学习javascript

学习javascript,时常看看这个朋友的博客&#xff1a;http://hi.baidu.com/mataofq/blog/category/Javascripthttp://www.zzsky.cn/build/content/543.htmhttp://www.zzsky.cn/build/content/1213.htm 转载于:https://www.cnblogs.com/xinzhuangzi/archive/2009/09/30/4100668.h…

python 竖线 绘图_Python可视化 | Seaborn5分钟入门(二)——barplot countplot

Seaborn是基于matplotlib的Python可视化库。 它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易&#xff0c;不需要经过大量的调整就能使你的图变得精致。注&#xff1a;所有代码均在IP…

计算机网络工程综合布线目的,弱电工程综合布线系统与计算机网络布线系统有何不同?【网络综合布线】...

弱电工程的综合布线是模块化和灵活的建筑物或建筑物之间的信息传输通道。 综合配电系统可以连接到声音设备、数据设备、开关设备和各种控制设备和信息管理系统。 同时&#xff0c;它还使这些设备与外部通信网络连接起来。弱电工程综合布线系统与计算机网络布线系统有何不同..弱…

课堂练习-水帖之王(水王)

今天的课堂练习是关于众数的查找。但是在这个枯燥的算法上&#xff0c;老师提出了一个很有意思而且很贴近我们日常上网生活的情景&#xff1a;有一个网友&#xff0c;他在一个吧里发帖数最多&#xff0c;而且占到了一半以上&#xff0c; 现在给出所有的帖子以及帖主的姓名&…

group by 与 order by

group by 1.对重复的数据合并分组,(group by a,b a列和b列的行数据相等才会合并)2.分组筛选(having\聚合函数)3.对各分组数据进行统计(聚合函数) order by order by a,b (先按a排序再按b排序)转载于:https://www.cnblogs.com/Ewin/archive/2009/10/05/1578293.html

只腐蚀毛刺 腐蚀算法_图像的腐蚀 膨胀及细化

转载&#xff1a;http://blog.sina.com.cn/s/blog_4bdb170b0100sgtj.html今天所讲的内容属于一门新兴的学科&#xff1a;数学形态学(Mathematical Morphology)。说起来很有意思&#xff0c;它是法国和德国的科学家在研究岩石结构时建立的一门学科。形态学的用途主要是获取物体拓…

计算机专硕专业课单科分数线,计算机考研|这两所自划线,单科没过线也能复试?...

原标题&#xff1a;计算机考研|这两所自划线&#xff0c;单科没过线也能复试&#xff1f;东南、浙大&#xff01;单科没过线也能复试&#xff01;关注量子考研公众号&#xff0c;获取最新计算机考研咨询1.东南大学&#xff1a;统考考生(不含报考苏州联合研究生院考生和管理类联…

Saltstack_使用指南17_salt-ssh

1. 主机规划 salt 版本 1 [rootsalt100 ~]# salt --version 2 salt 2018.3.3 (Oxygen) 3 [rootsalt100 ~]# salt-minion --version 4 salt-minion 2018.3.3 (Oxygen) salt ssh文档 https://docs.saltstack.com/en/latest/topics/ssh/index.html 2. salt-ssh实现步骤 2.1. 部署s…

Python 各种应用收集

--共享文件的web server把文件放到一个目录中&#xff0c;使用终 端进入这个目录&#xff0c;输入python -m SimpleHTTPServer 8888。然后访问ip:8888。这个也 可以不过麻烦些&#xff1a;python -c "import SimpleHTTPServer ; SimpleHTTPServer.test()"转载于:http…

联想微型计算机M3500q怎么拆,联想ThinkCentre 超级Q 23 创新插拔 一机多用

继PC小型化、一体化风潮之后&#xff0c;联想再次取得突破性创新&#xff0c;为用户带来全球首创二合一可插拔一体机——ThinkCentre 超极Q 23继PC小型化、一体化风潮之后&#xff0c;联想再次取得突破性创新&#xff0c;为用户带来全球首创二合一可插拔一体机——ThinkCentre …

js正则匹配闭合标签_正则匹配闭合HTML标签(支持嵌套)

OK&#xff0c;先确定我们要解决的问题——从一段Html文本中找出特定id的标签的innerHTML。这里面最大的难点就是&#xff0c;Html标签是支持嵌套的&#xff0c;怎么能够找到指定标签相对应的闭合标签呢&#xff1f;我们可以这样想&#xff0c;先匹配最前面的起始标签&#xff…