weigang992004
weigang992004

purecss.org 一组轻量级、响应式的CSS模块

页面中引入Pure

可以使用雅虎免费的CDN，把下面一行加入页面的<head>。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

添加 Viewport Meta 元素

viewport meta 元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，下面一行加入 <head>。

<meta name="viewport" content="width=device-width, initial-scale=1">

显示全部

http://purecss.org/start/

你可能感兴趣的:(purecss)

  • 前端ui库搜集 大猫会长 javascript
    涟漪动画效果-MDUI开发文档,MaterialDesign前端框架添加涟漪动画效果后，会在点击元素时，产生向外扩散的水波纹效果。https://www.mdui.org/docs/ripple#ripplehttps://semantic-ui.com/https://getuikit.com/https://www.purecss.cn/grids.html
  • 分享一个简单容易上手的CSS框架：Pure.Css 前端达人 css前端
    雅虎（Yahoo!）创建了一个简单的CSS框架，被称为Pure.css（https://purecss.io/），以提供一套基础样式集，可作为网页开发的起点。Pure.css旨在轻量、模块化和响应式，使构建快速加载、适用于任何设备的移动友好网站变得简单。在本文中，我们将讨论Pure.css的工作原理以及如何使用它。为了使默认样式在多个浏览器中保持一致，我们使用Normalize.css来构建Pur
  • 发现一个轻量级的前端框架PureCss i娟儿
    最近在抽空自学前端帮朋友公司写了几个HTML5页面，纯原生的，仍有一些老的浏览器的兼容问题，解决起来既费劲又头疼。本人09到12年学过Html，15年的时候学过一点html5，有点js基础（但是拿不出手），不过现下阶段自己的前端编码能力已经完全不够用了，需要更新迭代知识。今天在找前端资料的时候，偶然发现了这个很好用的框架Purecss（国内简称Pure），是一个经典的轻量级框架，无需下载到本地可以
  • 12个非常有用的JavaScript和CSS库 急速奔跑中的蜗牛
    web前端学习群，189394454，有视频、源码、学习方法等大量干货分享1、HR.js关注公众号→‘学习web前端’开启你的web前端学习之路2、Barba.js3、AcrossTabs4、Buefy5、ReactVR6、UIkit7、Tippy.js8、Iconate9、Chroma.js10、Weex11、Stylelint12、PureCSS
  • CSS实现loading小动画(附源码) Johnny_Pig csshtml
    今天无意看到一篇大神对css+html实现简单loading小动画的资源整合文章,https://www.qianduan.net/free-html5-css3-loaders-preloaders/无聊便想自己实现一个简单的,于是挑了一个最简单的,名字里面还带pure,看到这个就高兴.03.PureCSS3loader（原Demo地址:http://cssdeck.com/labs/loade
  • purecss form 鸭梨山大哎
    inlineform一个简单的单行表单记住我登录resultsimage.png一个简单的单行表单记住我登录image.pngstackedformAStackedFormEmailThisisarequiredfield.PasswordStateALCAILRemembermeSigninbeforepurecssimage.pngafterpurecssimage.pngAlignedFor
  • 30个漂亮的HTML5和CSS3下拉菜单 -御舟- HTML/CSS
    一些漂亮的HTML5和CSS3下拉菜单列表。这些例子可以帮助你得到灵感。让我们一起来看看这些下拉菜单。DarkMenu:PureCSS3TwoLevelMenuPureCSS3LavaLampMenuHTML5/CSS3GrayNavigationMenuHowtoBuildandEnhancea3-LevelNavigationMenuCSS3MinimalisticNavigationMenu
  • purecss grid 鸭梨山大哎
    exampleThirdsThirdsThirdsimage.pngexample2ThirdsThirdsThirdsThirdsimage.png
  • purecss tables 鸭梨山大哎
    pure-table#MakeModelYear1HondaAccord20092ToyotaCamry20123HyundaiElantra2010beforeimage.pngafterimage.pngrefhttps://purecss.io/tables/
  • 基于SCSS的移动端响应式样式库 王下邀月熊_Chevalier scss
    MobileStylePreset项目的很多设想受Mobi.css启发,这是一个非常优秀的面向移动端样式的CSS轻量级库,如果想要寻找合适的Production-Ready的库请直接转向Mobi.css笔者最近一直在基于APICloud做MobileWeb与HybridAPP开发,。笔者在构想MobileStylePreset之处,觉得它应该具有如下特性:PureCSS,不考虑引入JavaScri
  • 使用jQuery和Pure.CSS创建一个可编辑的表格 天梯梦
    阅读更多使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素。在本教程中，我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格。如果想看教程演示的话，请点击这里查看。开始你要做的第一件事情是，在你的服务器或本地硬盘上创建一个index.html文件。粘贴以下基本代码到新创建的文档中，然后保存。Editabletablebody{padding:1%3%;color:rg
  • PureCSS框架 css
    http://www.tuicool.com/articles/iyiI32 Pure中的主要组件包括：   一个响应式网格，可根据需求定制。 一个基于 Normalize.css 的基础库，用于修复跨浏览器兼容问题。 统一的按钮风格，可与<a>、<button>元素结合使用。 水平、垂直菜单，支持下拉菜单
  • purecss.org 一组轻量级、响应式的CSS模块 weigang992004 purecss
    页面中引入Pure可以使用雅虎免费的CDN，把下面一行加入页面的。添加ViewportMeta元素viewport meta 元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，下面一行加入 。显示全部http://purecss.org/start/
  • 前端开发用到的好的测试网站和ＪＳ插件网站 sinat_29843547
    https://tinypng.com/是一个好的图片压缩网站http://purecss.io/是一个好用的ＣＳＳ响应式库http://app.protofluid.com/#http://192.168.1.236/singlescreen/好用的单屏测试网站https://developers.google.com/speed/pagespeed/insights/?url=http%3A%
  • 如何调整wicket的PagingNavigator的html输出 jianglibo
    这是默认模板： << < 5 > >> 当然最外围的tag由该组件的模板决定。比如外围用div：现在假设需要purecss样式的pagingNavigator，它的html如下：     «     1     2     3     4     5     » 可见两者的差别还是不少。让我们看看可能的方法：1、新建一个类，继承Pagin
  • 程序猿学习的网站 qianqianyihao html安卓技术mobile开源中国
    android：安卓巴士：http://www.apkbus.com/eoe：http://www.eoeandroid.com/android学习网站：http://www.android-study.com/JQuery：pure：http://purecss.io/bootstrap：http://v3.bootcss.com/getting-started/JQueryMobile:htt
  • Purecss bytebear
    http://www.onextrapixel.com/2009/08/25/how-to-use-pure-css-to-style-web-form-dynamically-plus-12-awesome-javascript-plugins/http://www.16code.com/topics/jquery-plugins/
  • 35+ 个免费下载的 HTML5/CSS3 下拉菜单 wuqinfei_cs 下拉菜单HTML5CSS3
    ElegantDarkCSS3MenuTemplate( Demo | Download )Musicaldropdownmenu( Demo | Download )DarkMenu:PureCSS3TwoLevelMenu( Demo | Download )PureCSS3LavaLampMenu( Demo | Download )HTML5/CSS3GrayNavigationMenu(
  • pure & tornado -- table flyking tornadoPure
    环境:1.tornado的template2.yui/pure文档 http://purecss.io/tables/使用:handler代码  handlers/table.pyclass MainHandler(tornado.web.RequestHandler):     def get(self):         # 存放表头的         header_field = ["#",
  • Pure0.3.0更新了！ chensy0203
    Pure网站：http://purecss.io/Pure中文网站：http://pure-site.ap01.aws.af.cm/更新日志：http://chensy0203.github.io/posts/update-pure-site-03.html
  • CSS编码器 qbg19881206 css
    摘要：本文收集了九款超级有用的CSS编码必备神器，包括：PureCSS、CSSTrashman、Glue、HeliumCSS、BearCSS等等，希望你会喜欢。当你在开发某个网站或者应用时，找到适宜的工具绝对能帮助您节省大量的时间，本文，笔者收集了九款超级有用的CSS编码工具，借助这些优秀的工具能大大地减少开发时间，加快开发进度。PureCSSPure是CSS模块的组件，你可以在每个项目中将其作为
  • CSS 编码中超级有用的工具集合 煮_蛋 在线Navigation雅虎开发网站大项目
    当你开发网站和Web应用时，使用合适的工具可以节省大量的时间。本文我将收集一些非常有用的CSS编码工具，希望对你有帮助。PureCSSPure是来自雅虎的CSS框架，使用Normalize.CSS无需任何JavaScript代码。框架基于响应式设计，提供多种样式的组件，包括表格、表单、按钮、表、导航等。标识使用非常简单，整个框架非常轻量级，压缩后只有5.7k。主页:http://purecss.i
  • Pure中文版发布了 chensy0203 翻译Purecss框架
    折腾了几天，终于把Pure这个CSS框架的网站翻译完了，初次翻译，难免有些问题，欢迎指正！Pure网站：http://purecss.io/Pure中文网站：http://pure-site.ap01.aws.af.cm/
  • 8 个很有用的免费 CSS 的 UI 工具箱 panzertank css
     文章转载自：开源中国社区 [http://www.oschina.net]1) UICSSui.css是一个用来创建简洁的Web用户界面的工具，下载的文件只包含一个css文件。2) UIKit 3) CSSUIKit4) LionUIKitCSS该工具箱基于Xcode组件(OSXLion)，提供了OSX应用的原型，主要用于WebKit，但其他浏览器表现也不错。5) PureCSS6) CSSUI
  • 25个免费及收费CSS3的导航菜单 小编辑 css3菜单网页设计
    免费的CSS3导航和菜单HowtospiceupyourmenuwithCSS3BlurMenuwithCSS3TransitionsCreativeCSS3AnimationMenusPureCSSDropDownMenuDarkMenu:PureCSS3TwoLevelMenuMakingaCSS3AnimatedMenuCSS3dropdownmenuSexyCSS3menuPureCSS3
  • CSS渐变文本效果 RandyWei css
    DoyouwanttocreatefancyheadingswithoutrenderingeachheadingwithPhotoshop?HereisasimpleCSStricktoshowyouhowtocreategradienttexteffectwithaPNGimage(pureCSS,noJavascriptorFlash).Allyouneedisanempty taginth
  • 24个效果新颖的CSS3实例教程 gkvalley .netWebmvcC#it
    PureCSS3PageFlipEffect这是一个通过CSS3渐变、过渡、二维变换和剪裁技术,RomanCortes实现这一个纯CSS3的翻页效果(没有用javascript).当然也指定了Webkit的浏览器(SafariandChrome).CreateaVibrantDigitalPosterDesignwithCSS3一个通过纯html和CSS来设计的充满活力和抽象的数字海报CSS3Le
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他