pure响应式布局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"><!--viewport meta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，需要加入该行-->
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<link href="css/pure-min.css" rel="stylesheet" /><!--将pure引入页面-->
<link href="css/grids-responsive-min.css" rel="stylesheet" /><!--引入响应式pure的栅格系统-->
</head>
<body>
<div class="pure-g" id="d1"><!--固定写法必须放在class=pure-g里面-->
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div><!--单元格大小是分数-->
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
<!--<div class="pure-u-1 pure-u-sm-2-5 pure-u-md-4-5"><p>AAAA</p></div>两个单元格相加要等于1
<div class="pure-u-1 pure-u-sm-3-5 pure-u-md-1-5"><p>AAAA</p></div>-->
</div>
</body>
</html>
#d1 p{
background-color:#0094ff;
padding:50px;
margin:10px;
}
pure响应式布局的更多相关文章
- 响应式布局框架 Pure-CSS 5.0 示例中文版-上
0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 【Win10开发】响应式布局——AdaptiveTrigger
接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- 1.5 xss漏洞修复
1.XSS漏洞修复 从上面XSS实例以及之前文章的介绍我们知道XSS漏洞的起因就是没有对用户提交的数据进行严格的过滤处理.因此在思考解决XSS漏洞的时候,我们应该重点把握如何才能更好的将用户提交的数据 ...
- C# 写 LeetCode easy #21 Merge Two Sorted Lists
21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...
- Other - 个人对知识讨论、分享等平台上抄袭乱象的看法
在某论坛上看到这样一句话,深表赞同.
- KOL运营之——如何与网文作者高效地约稿？
本文来自网易云社区,转载务必请注明出处. 随着网络文学的发展,影响力逐渐扩大,越来越多的同事在工作中遇到需要和这些作者打交道的时候.对于作者这个群体,很多时候都是只闻其书,不见其人.要跟这样的群体打交 ...
- loj#6433. 「PKUSC2018」最大前缀和（状压dp）
传送门 今天\(PKUWC\)试机的题 看着边上的大佬们一个个\(A\)穿咱还是不会-- 我们考虑枚举最大前缀和,如果一个前缀\(1\)到\(p\)是最大前缀和,那么\(p\)后面的所有前缀和都要小于 ...
- Unity---DOTween插件学习(3)---获取数据、协程、路径动画
目录 10.获取数据 11.携程 12.路径动画 本文及系列参考于Andy老师的DOTween系列 欢迎大家关注Andy老师 10.获取数据 类方法 返回所有暂停的动画,没有则返回null var l ...
- iOS拼图
#import "ViewController.h" @interface ViewController () @end @implementation ViewContro ...
- Error: Attribute application@allowBackup value=(false) from AndroidManifest.xml:14:7-34 is also present at [:react-native-qq] AndroidManifest.xml:14:18-44 value=(true).
解决方法: 修改文件: 在manifest标签中添加 xmlns:tools="http://schemas.android.com/tools" 在application标签中添 ...
- Luogu P4901 排队 fib数列+树状数组+倍增
这题让我升华..还好只重构了一遍 首先我们发现:$n$较小时,整个队伍的形态 跟 $n$ 比较大时的局部是一样的 所以我们预处理出这个队伍的形态,和每一行每个位置的质因子个数的前缀和,$O(nlogn ...
- Java面向对象_内部类
概念:内部类就是类的内部定义的类 成员内部类格式如下:class Outer{ class Inner{} } 编译上述代码会产生两个文件:Outer.class和Outer$Inner.class ...