compass安装使用960 Grid System】的更多相关文章

960 Grid System 是一个CSS的页面布局框架 demo:  http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem install compass-960-plugin 步骤2:创建my_project项目: compass create -r ninesixty my_project --using 960 在页面中引用该css <head>  <link href="/stylesheet…
为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息. 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案.一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度:另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大.自适应宽度也就意味着一行显示的文字数是不定的,阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了.…
前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图. 网格设计呢,通常显得很整齐规范,有时看上去也比较专业.但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分.960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960,就是说模板的宽度是960像素.而之所以用960…
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD…
你需要安装ruby 你需要安装SASS/Compass 安装sass,在命令行中输入: $ gem install sass 你可能会问gem是什么?gem是ruby的包管理器.包的概念呢,就是一个为完成特定功能的模块,或者函数集群.就像.NET里面我们要使用到数据相关操作的类就要添加引用System.Data,在.NET里面叫程序集. 字面上你可以看到,运行gem安装sass,但是sass安装包并不在本地,所以这种方式安装你要保证联网,并且包的源地址可用.稳点. 安装Compass,在命令行中…
刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的话,右边的盒子永远都不会掉下来. 文字就变得这么丑. 如果我用col-sm-6的话,右边的盒子又会太早掉下来. 此时的屏幕宽度是766px,他就已经堆叠排放了,两边留下了大片空白,还是很丑. 而Bootstarp没有提供中间的选项了. 想要解决这个问题,必须要弄清楚这种响应式布局的是如何工作的. B…
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素…
 Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables to your PATH 安装完成后在cdm控制台输入 ruby -v进行测试 出现版本号说明安装成功 sass必须基于ruby下安装 RubyGems是一个方便而强大的Ruby程序包管理器 #使用gem安装sass 国内网络要FQ,所有要使用淘宝RubyGems镜像安装sass 1) gem so…
修改ruby软件包的sources 国外服务器不给力,经常链接失败,换成国内淘宝的:https://ruby.taobao.org/ 先移除本有的sources gem sources --remove https://rubygems.org/ 安装淘宝sources: gem sources -a https://ruby.taobao.org/ 检查前两步是否操作成功: gem sources -l Compass安装 gem install compass 创建compass项目 先创建…
去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” /> <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css…