1、960GS 特点

  • 　　小巧简单，功能单一（仅仅做排版的工作，其他东西靠自己。）（三个文件:reset.css,960.css，font.css）
  • 　　界面宽960px，适合目前主流1/2以上显示器都满屏宽度的1024x768的屏幕。

2、使用也很简单。主要CSS的Div类：

  • 　　页面宽度：960px
  • 　　容器：container_X ，后面的X表示的数字，例如container_12表示将页面进行12等份，container_16表示将页面进行16等份。960GS中有12、16、24、32四种布局方式。
  • 　　网格：grid_Y , 后面的Y同样表示数字，例如grid_1表示第一等份，如果容器为12等份，则Y的最大值为12。Y表示的第几等份，也可以说是第几列。
  • 　　grid_Y。(Y<X)
  • 　　当然嵌套够一行了要记得用clear。
  • 　　Margins：每个grid_Y类都有10px的左margins和右margins，也就是说两列之间的margin和是20px。有时候我们不需要这些margin，在grid_Y后面添加上alpha去除左边margin，在grid_Y后面添加omega去除右边margin。
  • 　　范例：去除左边的margin  <div class="grid_1 alpha">grid_1</div>
  • 　　范例：去除右边的margin <div class="grid_1 omega">grid_1</div>
  • 　　添加样式：Styling开发网站，我们不可能全部都使用960GS的样式，我们还需要添加一些自己的样式进去，由于CSS使用优先级的形式来觉得如何解释样式，而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同，浏览器会优先选择你的css文件中的样式。

详细说明请参照： 960GS 从入门到精通

　　

CSS布局框架 960GS的更多相关文章

  1. CSS布局框架 960GS 表单排版示例

  2. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  3. 震惊！很多人都不知道 CSS Grid 框架早就有了！

    前言 写作本文起源于知乎的一个问题:[CSS Grid 布局那么好,为什么至今没有人开发出基于 Grid 布局的前端框架呢?] 这篇文章拖沓了两个月,是因为真的不知道从哪里说好.这个问题的所有回答几乎 ...

  4. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  5. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  9. [Bootstrap]7天深入Bootstrap(3)CSS布局

    Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...

随机推荐

  1. Tomcat启动慢但是不报错的解决办法

    参考文章:https://blog.csdn.net/xiaoxinyu316/article/details/39064003 可以查看下tomat的启动日志,看看有哪些比较耗时的操作: grep ...

  2. 解决shell脚本参数传递含有空格的问题

    有这样一个py文件,需要传一个字典作为参数: import json import sys def parse_params(data): json_data = json.loads(data[1] ...

  3. 简单认识python的数据类型和语法

    一.Python介绍 1用途 1)WEB开发 最火的Python web框架Django, 支持异步高并发的Tornado框架,短小精悍的flask,bottle, Django官方的标语把Djang ...

  4. phpMyAdmin的安装配置

    找到$cfg['blowfish_secret'] = '',将其值改为你自己想要的任意字符,如$cfg['blowfish_secret'] = 'owndownd': 找到$cfg['Server ...

  5. Django restful Framework 之序列化与反序列化

    1. 首先在已建好的工程目录下新建app命名为snippets,并将snippets app以及rest_framework app加到工程目录的 INSTALLED_APPS 中去,具体如下: IN ...

  6. [Python]关于return逻辑判断和短路逻辑

    定义一个return...and..函数: def res(): ' 返回结果: >>> print(res()) 1234 定义一个return...or..函数: def res ...

  7. HBase1.2.6 javaapi查看rowkey 所在分区等信息

    Connection connection = HBaseFactory.getIns().getHbaseConn(); RegionLocator r= connection.getRegionL ...

  8. linux 虚拟机设置好固定ip 修改了 dns 网络需要设置成桥接模式

    linux  虚拟机设置好固定ip 修改了 dns  网络需要设置成桥接模式  可以修复网络连接(浏览器返回 server not  found)

  9. 浅谈boost.variant的几种访问方式

    前言 variant类型在C++14并没有加入,在cppreference网站上可以看到该类型将会在C++17加入,若想在不支持C++17的编译器上使用variant类型,我们可以通过boost的va ...

  10. js 判断是ie浏览器

    if (!+[1,]) { //IE window.event.returnValue = false; } else { return false; }