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;
}
html5外置样式表,HTML5移动端通用css详解相关推荐
- 移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除 保存 Canvas画板 var draw; v ...
- html5硬件接口,HTML5通用接口详解
1.先说几个基本类型: DOMString, boolean, long, unsigned long, double,BmBHTML5中文学习网 - HTML5先行者学习网 NaN(Not-a-Nu ...
- 【前端就业课 第一阶段】HTML5 零基础到实战(六)表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
- css网站样式表是什么,什么是css样式表
css样式表指的是层叠样式表(Cascading Style Sheets),简称CSS,是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内 ...
- HTML样式表优先级最低的是,css的样式优先级
前几天做百度的笔试题,第一题就是关于css优先级的,虽然知道一些规则,但碰上把各条规则相互组合就懵逼了,所以还是得来好好总结一下的. 首要原则 就两条: 优先级高的样式覆盖优先级低的样式 同一优先级的 ...
- html5 游戏 算法,JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家 阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...
- php 表单提交文件大小,PHP如何通过表单直接提交大文件详解
PHP如何通过表单直接提交大文件详解 前言 我想通过表单直接提交大文件,django 那边我就是这么干的.而对于 php 来说,我认为尽管可以设置最大上传的大小,但最大也无法超过内存大小,因为它无法把 ...
- Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- IoT:大端与小端字节数据详解
大端与小端字节数据详解 转自:https://blog.csdn.net/dosthing/article/details/80641173 前言 计算机的数据以01构成的字节存储,这就涉及数据大小端 ...
最新文章
- JVM内存管理–GC算法精解(五分钟让你彻底明白标记/清除算法)
- 蜘蛛纸牌java注释_自己摸索的纸牌游戏代码,感觉还有很多知识不懂,任重道远啊!...
- Java和WebSocket开发网页聊天室
- spring-boot配置readonly
- SpringCloud Ribbon(三)之IPing机制
- java 生成log4j_Java log4j配置每天生成一个日志文件 - 永恒ぃ☆心 的日志 - 网易博客...
- 小白 LeetCode 242 有效的字母异位词
- Java8 Stream详解~映射(map/flatMap)
- 互联网晚报 | 2月21日 星期一 | 北京冬奥会闭幕;天猫将新增菜鸟驿站送货上门服务;上汽奥迪首款电动车型开启预售...
- php调用airtestide,raw device
- 提高千倍效率的35个编码小技巧,老司机带你飞!
- 系统学习深度学习(四十)--基于模拟的搜索与蒙特卡罗树搜索(MCTS)
- 美团云的网络架构演进之路
- 关于3CDaemon的FTP服务端异常
- 计算机网络复习题(全套)
- 安卓插件化框架Shadow原理分析
- 玩转CSDN之自定义博客栏目
- django中查询的select_related方法和prefetch_related方法
- Java的应用领域有哪些
- 魔兽会封python_Python爬取大量数据时,如何防止IP被封?