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>
显示：