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

有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>

显示：

posted @ 2015-04-07 18:55 liuminghai 阅读(264) 评论(0) 编辑收藏举报

刷新页面返回顶部

刘明海

compass安装使用960 Grid System

公告