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="/stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
有12列和16列布局
我们使用12列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>960 Grid System — Demo</title>
<link rel="stylesheet" href="stylesheets/text.css"/>
<link rel="stylesheet" href="stylesheets/grid.css"/>
<style>
body {
background: #123;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
} p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
} .container_12,
.container_16,
.container_24 {
background-color: #fff;
background-repeat: repeat-y;
margin-bottom: 20px;
}
</style>
</head>
<body> <div class="container_12">
<h2>
12 Column Grid
</h2> <div class="grid_12">
<p>
940
</p>
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_2">
<p>
60
</p>
</div>
<!-- end .grid_1 -->
<div class="grid_10">
<p>
860
</p>
</div>
</div>
<!-- end .grid_8.pull_8 -->
</div>
<!-- end .container_16 -->
</body>
</html>
显示：
compass安装使用960 Grid System的更多相关文章
- 与960 Grid System相关的那些问题
为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息. 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案.一方面,需要做一 ...
- 使用Photoshop+960 Grid System模板进行网页设计
前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符 ...
- compass安装教程
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Visual Studio 2013使用SASS和Compass--SASS和Compass安装
你需要安装ruby 你需要安装SASS/Compass 安装sass,在命令行中输入: $ gem install sass 你可能会问gem是什么?gem是ruby的包管理器.包的概念呢,就是一个为 ...
- Bootstrap3 Grid system原理及应用
刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...
- BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- Ruby与sass 与compass安装
Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables ...
- compass安装
修改ruby软件包的sources 国外服务器不给力,经常链接失败,换成国内淘宝的:https://ruby.taobao.org/ 先移除本有的sources gem sources --remov ...
- 960 grid 使用
去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=” ...
随机推荐
- wscript:329: error: Could not autodetect OpenSSL support. Make sure OpenSSL development packages are
安装node错: wscript:329: error: Could not autodetect OpenSSL support. Make sure OpenSSL development pac ...
- [欧拉回路] hdu 3018 Ant Trip
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3018 Ant Trip Time Limit: 2000/1000 MS (Java/Others) ...
- 辛星解读为什么PHP须要模板
近期有个人问我:为什么PHP须要模板呢?整个站点的编写都是我一个人完毕的,从前端到后端,都是这样,我一个人写站点是不是就不须要模板了呢?我当时还真给问住了,也没想好非常合适的回答它的方式,于是就随便说 ...
- UVa 11408 - Count DePrimes
题目:一个数的素因子的和假设也是素数就叫做DePrimes,统计给定区间内的DePrimes. 分析:数论.本题使用用一种素数的筛法,欧拉筛法,也加线性筛法. 这样的方法,每次删选分两种情况:1.素因 ...
- 呈现怎样的香蕉饼路线Android系统
无话可说,该系统的第一版,Android有的还可以,路由设置确实有闪光现象背.与其他的稳定版本发布,被能够机顶盒和路由组合.其次是SSD,还是很不错的. 硬件 watermark/2/text/aHR ...
- cocos2D（八）---- CCMenu && CCMenuItem
些菜单项让用户開始游戏.暂停\继续游戏.打开\关闭音乐或者是返回到上一个界面,比方以下两张图中用红色线框标记的菜单项 我们能够使用CCMenu和CCMenuItem实现上述的菜单功能,CCMe ...
- LoadImage()使用
该系统被定义: WINUSERAPIHANDLEWINAPILoadImageA( HINSTANCE, LPCSTR, UINT, int, int, UINT) ...
- Java 中泛型的全面解析（转）
Java泛型(generics) 是JDK 5中引入的一个新特性,允许在定义类和接口的时候使用类型参数(type parameter).声明的类型参数在使用时用具体的类型来替换.泛型最主要的应用是在J ...
- SharePoint 2010 新列表模板列表
SharePoint 2010 新列表模板列表 项目描述叙事 发展环境创造了良好的名单为模板.然后使用列表模板将其复制到生产环境. 脚步 1. 打开"列表设置",找到"将 ...
- 冒泡排序java
先对冒泡排序做一个简单的解释,然后是代码的实现.解释出资<java的数据结构和算法>,大家可以看看. 排序类: package com.dxx.order; public class Bu ...