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>

显示：

转载于:https://www.cnblogs.com/liuminghai/p/4399100.html

compass安装使用960 Grid System相关推荐

css框架之960 Grid System 基本原理及使用方法
关于CSS框架其实一直是一个比较热门且很有争议的话题,的确,国内的一些前端er们越来越关注CSS框架,并都开始尝试使用,觉得CSS框架能够节省更多的开发时间,显著提高工作效率.当然,还有很多人持相反意 ...
CSS Framework 960 Grid System (收)
CSS框架 :960 Grid System 官网:http://960.gs/ 什么是框架?框架是一种你能够使用在你的web项目中概念上的结构.CSS框架一般是CSS文件的集合,包括基本风格的字体 ...
安装配有NVIDIA GRID K2服务器系统不能正常安装和其他的GPU卡如K20x不能正常安装原厂驱动
问题描述: 安装配有NVIDIA GRID K2服务器时不能被正常安装; 问题原因: xCAT 安装配有GRID K2 节点时系统集成的第三方驱动不支持GRID K2 所以不能正常安装:同时其他的G ...
【12c新特性】安装12c Standalone Grid Infrastructure
[12c新特性]安装12c Standalone Grid Infrastructure 转载于:https://blog.51cto.com/maclean/12 ...
安装完Visual Team System 2008 Team Explorer出错解决办法
安装完Visual Team System 2008 Team Explorer 打开一个工作项提示错误如下: --------------------------- Microsoft Visual ...
VMware安装虚拟机出现Operating System not found 解决方案
VMware安装虚拟机出现Operating System not found 解决方案一.问题描述二.实践&问题解决解决法一: 解决法二: 解决法三: 叮嘟!这里是小啊呜的学习课程资料 ...
Bootstrap 的网格系统（Grid System）
本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动 ...
HTML创建12列小屏幕网格,Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...
Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

compass安装使用960 Grid System

compass安装使用960 Grid System相关推荐

最新文章

热门文章