帮助你生成响应式布局的CSS模板 - xyCSS

日期:2013-1-31  来源:GBin1.com

帮助你生成响应式布局的CSS模板 - xyCSS

在线演示

在前面的文章中我们介绍了响应式的网格profound grid,用来帮助你开发固定或者响应式的流动布局设计,如果你希望使用纯CSS生成响应式的布局的话,相信xyCSS将会是一个不错的选择,xyCSS是一个简化的轻量级CSS框架,只使用一个CSS文件,能够帮助你创建流动或者响应式的布局。

这个框架包含了结构和版面字体相关的样式定义,帮助你有效的使用语义化方式管理你的布局结构。

主要特性

  • 通过CSS的media queries来生成响应式的设计
  • 通过使用CSS reset来解决缺省浏览器的样式问题
  • 水平风格的流体网格布局
  • 垂直风格的可缩放印刷版网格风格
  • 不使用class属性定义
  • 为HTML5设计,支持任何标记
  • 通过CSS3加强
  • 动态的media query过渡效果
  • 支持移动,iphone/ipad,桌面大屏幕
  • 支持prent media的网格样式定义
  • 轻量级的单个css文件
  • 开源并且免费使用
  • 拥有完善的文档和在线演示
  • 支持各种不同类库,例如,jQuery插件,兼容wordpress插件等等

如何使用?

  • 步骤1 : 下载安装
  • 步骤2 : 水平的网格Horizontal Grid
  • 步骤3 : 垂直网格Vertical Grid
  • 步骤4 : 响应式Responsiveness
  • 使用xy.css设计
  • 视觉化网格
  • 支持IE
  • 更多信息
via gbtags

来源:帮助你生成响应式布局的CSS模板 - xyCSS

转载于:https://www.cnblogs.com/java20130725/archive/2013/01/31/3215595.html

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

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

相关文章

Facebook开源动画库 POP-POPBasicAnimation运用

动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习;本文主要针对的是POPBasicAnimation运用;实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest Pop Github :…

linux sed删除指定行_shell三剑客之sed!

背景sed(Stream Editor 流编辑器),作为三剑客的一份子,主要的功能有增删改查。为什么称之为“流”编辑器呢?大家知道:在Linux文件系统中,一切都可以作为文件来处理。比如:配置文件、设备文件、日志等等。se…

linux cpu使用率1200%,linux下用top命令查看cpu利用率超过100%

今天跑了一个非常耗时的批量插入操作。。通过top命令查看cpu以及内存的使用的时候,cpu的时候查过了120%。。以前没注意。。通过在top的情况下按大键盘的1,查看的cpu的核数为4核。通过网上查找,发现top命令显示的是你的程序占用的cpu的总数&am…

FileUpload时用Javascript检查扩展名是否有效

通用的检查方法。首先定义好有效的文件扩展名&#xff0c;存放在阵列中。 在JavaScript获取FileUpload控件的文件路径&#xff0c;并取得路径中的文件扩展名。再与阵列中的扩展名比较&#xff0c;如果存在&#xff0c;说明上传的文件是有效的&#xff0c;反之无效。 <asp:Fi…

python dialect='excel'是什么意思_python读取和生成excel文件

今天来看一下如何使用python处理excel文件&#xff0c;处理excel文件是在工作中经常用到的&#xff0c;python为我们考虑到了这一点&#xff0c;python中本身就自带csv模块... 今天来看一下如何使用python处理excel文件&#xff0c;处理excel文件是在工作中经常用到的&#xff…

玩转博客园的5个小技巧

转载自:http://www.cnblogs.com/lloydsheng/archive/2010/05/17/1737267.html 写博客也有几年了&#xff0c;现在能找到的第一篇博文发布时间是2007年11月11日&#xff0c;那还是在百度空间里面的&#xff0c;其实更早的是在csai&#xff0c;不过帐号&#xff0c;密码&#xff…

linux kvm安装win7,ubuntu14.04 使用kvm安装win7系统

办公电脑从win7换成ubuntu已经有几个月了..环境:ubuntu 14.04kvm 2.0.0需要的各种软件也都安装的差不多了.. 迅雷 qq office vmware 等 这些我常用的软件也都安装上了..我的电脑配置也算可以了(thinkpad E 系列 i5 8G内存 )但是vmware这个东西在ubuntu上的表现不是那么让人满意…

hibernate继承映射之每个具体类一张表

数据模型 表person 表student 表worker 对象模型 Person private String id;private String name;private int age;private String sex; Student extends Person private String school; Worker extends Person private String factory; xml配置&#xff1a; <?xml version…

No resource found that matches the given name 'android:Widget.Material.A解决方案

1&#xff1a;首先新建空白工作区 2&#xff1a;先import appcompat_v7 appcompat_v7在一个类似这样的地方&#xff0c; C:\mywork\android\android-sdk-windows\extras\android\support\v7\appcompat 然后用import进来&#xff0c;像如下操作&#xff1a; 确保sdk是5.0及以上 …

python easygui进度条_Python _easygui详细版

1. msgbox msgbox(msg(Your message goes here), title , ok_buttonOK, imageNone, rootNone) msgbox() 显示一个消息和提供一个"OK"按钮&#xff0c;你可以指定任意的消息和标题&#xff0c;你甚至可以重写"OK"按钮的内容。 import easygui as g g.msgbox…

swappiness

2019独角兽企业重金招聘Python工程师标准>>> swappiness参数位于&#xff1a;/etc/sysctl.cof swappiness0表示最大限度使用物理内存&#xff0c;然后才是swap空间。swappiness100的时候表示积极的使用swap分区&#xff0c;并把内存上的数据及时地搬运到swap空间…

宏基笔记本4740 Linux,宏基4740g拆机【教程详解】

笔记本电脑 使用久了内部会累积有灰尘&#xff0c;这些灰尘可能会影响到正常的使用;还有些人觉得笔记本电脑内存不够&#xff0c;想要加装个内存条;亦或想要帮助笔记本电脑换cpu等&#xff0c;这些都是需要将笔记本电脑拆卸下来&#xff0c;然后才能够完成好相关的工作。宏基47…

如何正确创建DLL和使用DLL

如何正确创建DLL和使用DLL 本文将通过一个简单的实例来说明&#xff0c;如何正确的导出DLL中的类、对象、函数&#xff0c;并如何通过静态加载或动态加载的方式来使用DLL。 一、DLL中导出类、函数、对象 1. 创建一个空的Win32 Dynamic-Link Library项目Test 2. 在项目中添加一个…

mysql-5.7.11-winx64.zip 安装配置

1、下载 http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.11-winx64.zip 2.解压缩zip包&#xff1b; D:\Program Files\mysql-5.7.11-winx64 3.配置环境变量&#xff0c; 3.1 添加path路径&#xff0c; D:\Program Files\mysql-5.7.11-winx64\bin 3.2.修改mysql-default.…

【分享】LazyLoad延迟加载(按需加载)

1&#xff1a;实际需求 大型网站往往很矛盾&#xff0c;想用户在首页看到更多东西&#xff0c;又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接&#xff0c;到子页面。 那么我们的网站却为100%的用户加载了 3个 屏幕的所有内容。如…

python中ipo模型有_python ipo模型是指什么?_后端开发

c语言中如何用do...while语句求1到100的累加和_后端开发 c语言中用do...while语句求1到100的累加和的方法是&#xff1a;1、首先定义变量i与sum&#xff0c;如【int sum0,i1】&#xff1b;2、然后用do...while语句实现即可&#xff0c;如【do{sumsumi;i;}while(i<100)】。py…

英语26个字母使用频度

LetterLetter namePronunciation NLetterFrequency LetterFrequencyAa/ˈeɪ/, //[nb 2] 1A8.17% E12.70%Bbee/ˈbiː/ 2B1.49% T9.06%Ccee/ˈsiː/ 3C2.78% A8.17%Ddee/ˈdiː/ 4D4.25% O7.51%Ee/ˈiː/ 5E12.70% I6.97%Fef (eff as a verb)/ˈɛf/ 6F2.23% N6.75%Ggee/ˈdʒi…

java签到_实战:如果让你用SpringBoot实现签到奖励的功能,你会怎么做?

阅读本文大概需要 6 分钟。来自&#xff1a;网络前言最近在做社交业务&#xff0c;用户进入APP后有签到功能&#xff0c;签到成功后获取相应的奖励&#xff1a;项目状况&#xff1a;前期尝试业务阶段&#xff1b;特点&#xff1a;快速实现&#xff08;不需要做太重&#xff0c;…

软件开发工具介绍之 1.代码生成器

在程序开发过程当中&#xff0c;程序员会经常做着重复性的工作&#xff0c;最常见的是访问数据库&#xff0c;程序员要经常编写增、删、改、分页之类的操作。为了避免这个问题&#xff0c;节省大量机械录入的时间和重复劳动&#xff0c;提高工作效率&#xff0c;而将精力集中于…

python自带的shell、其性能优于ipython吗_Python自带的shell,其性能优于IPython

信源X的&#xff0c;自带每一机事件的都相等个随概率&#xff0c;即P。 优于 自带优于 自带求(机械的保养要。 优于标有机械的主管理要指。 下尺性期人手节分的病离急法整复后&#xff0c;自带项处做哪理&#xff1a;还应。 并放下肢射至&#xff0c;优于现右肢放扭伤右下臀及后…