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的更多相关文章

  1. 与960 Grid System相关的那些问题

    为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息. 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案.一方面,需要做一 ...

  2. 使用Photoshop+960 Grid System模板进行网页设计

    前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符 ...

  3. compass安装教程

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  4. Visual Studio 2013使用SASS和Compass--SASS和Compass安装

    你需要安装ruby 你需要安装SASS/Compass 安装sass,在命令行中输入: $ gem install sass 你可能会问gem是什么?gem是ruby的包管理器.包的概念呢,就是一个为 ...

  5. Bootstrap3 Grid system原理及应用

    刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...

  6. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  7. Ruby与sass 与compass安装

     Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables ...

  8. compass安装

    修改ruby软件包的sources 国外服务器不给力,经常链接失败,换成国内淘宝的:https://ruby.taobao.org/ 先移除本有的sources gem sources --remov ...

  9. 960 grid 使用

    去官网下载960 grid,解压后可以看到css下面有如下文件: 960.css是一个综合性文件.我们要引入960 ,reset和text 3 个文件. 一般情况下调用: <link rel=” ...

随机推荐

  1. 深入理解Oracle RAC 12c 笔记

    深入理解Oracle RAC 12c 跳转至: 导航. 搜索 文件夹 1 概述 2 集群件管理和故障诊断 3 执行实践 4 新特性 5 存储和ASM 6 应用设计上的问题 7 管理和调优一个复杂的RA ...

  2. SCSI miniport 驾驶一个简单的框架

    前段时间,只需用一台新电脑,由于资金有限没有匹配了心仪已久的SSD.我没感觉到飞翔的感觉,总不甘心,仔细想想.我死了相当大的存储,我们可以假设部分内存作为硬盘驱动器把它弄出来.不会比固态硬盘的速度快, ...

  3. JDBC连接数据库和释放连接

    用久了hibernate现在对于JDBC是怎么实现数据库的连接和释放,所以特地总结下关于JDBC的知识,目的是用于提醒自己很多Java的基础知识需要健全. package com.ssh.action ...

  4. 京东评论情感分类器（基于bag-of-words模型）

    京东评论情感分类器(基于bag-of-words模型) 近期在本来在研究paraVector模型,想拿bag-of-words来做对照. 数据集是京东的评论,经过人工挑选,选出一批正面和负面的评论. ...

  5. hdu 1395 2^x mod n = 1 暴力过~~最好学下欧拉定理~~~

    2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. windows任务设置定时

    windows 的Schedule Task .创建一个配置 1.点击"开始" 2.点击"控制面板" 3.双击"任务计划程序" 4.双击&q ...

  7. 命令模式（CommandPattern）

    今天主要学习命令模式,java获得创意.其他屏幕教程.这里总结一下命令模式更重要. 刚开始以为命令模式是非常罕见的外观,但研究发现,他与同样单身完成.有设计模式最简单的集中模式. 象,然后其它的类直接 ...

  8. Eclipse 打JAR包,插件FatJar 安装与使用

    下载fatJar插件,解压缩后是一个.../plugins/(net...)把plugins下面的(net..)文件夹拷贝到eclipse的plugins下,重新启动Eclipse3.1,Window ...

  9. iterator pattern

    6 迭代器模式总结 迭代器模式是一种使用频率非常高的设计模式,通过引入迭代器可以将数据的遍历功能从聚合对象中分离出来,聚合对象只负责存储数据,而遍历数据由迭代器来完成.由于很多编程语言的类库都已经实现 ...

  10. 在WPF中处理Windows消息

    在Winform中 处理Windows消息通过重写WndProc方法 在WPF中 使用的是System.Windows. Sytem.Windows.Controls等名字空间,没有WndProc函数 ...