`

【转载】960 Grid System 样式讲解

 
阅读更多

960 Grid System(960gs)是一个为了简化webUI设计工作流程而出现的宽度为960像素的工具。它包含两个版本,12列和16列,这两个版本可以单独使用也可以放一起使用。

  • container_12和container_16,用于最外层的div,它们确定页面采用12列布局还是16列布局。
  • grid_*,代表n列宽。12列对应1~12,16列对应1~16。使用时,一行内的grid数值之和等于container数值。
  • clear,清除上一行的样式,一般在分行时使用。
  • push_*和pull_*,将div往内推或往外拉n列宽。
  • prefix_*和suffix_*,在div的前后留n列宽空白。
  • alpha和omega,分别应用到内嵌表格的第一个和最后一个,其目的是为了去掉表格之间的空白。因为框住内嵌表格的外部表格本身已经有了自己与其他表格之间的空白,因此内嵌表格和外部表格之间的空白一般是不美观,不必要的。

在使用时需注意960 GS的限制:

  • 页面的宽度限制为960px。
  • 上述class只限定了div的宽度,高度由开发者自行控制。
  • 只提供了12列、16列和24列布局。
  • 功能单一,只聚焦简化布局。
分享到:
评论

相关推荐

    960网页栅格化总结

    文件“960网页栅格化总结.doc”很可能是对960 Grid System的详细讲解,包括如何设置网格、调整元素大小、响应式设计技巧等内容。在阅读这份文档时,你可以学习到以下几点: 1. **理解960 Grid的基本原理**:了解960...

    C# 调用Grid++及线程的使用

    本文将深入探讨如何在C#环境中利用Grid++库生成报表,以及如何有效地使用线程和委托,同时讲解如何指定打印机进行打印。 首先,让我们来看看“C#如何调用Grid++生成报表源码”。Grid++是一个强大的网格控件,适用于...

    关于sap-AFS的若干问题

    在"关于AFS的若干问题.pdf"这个文件中,可能会详细讲解如何在SAP环境中设置和使用Material number、Grid以及如何构建和管理SKU。这可能涉及数据维护、库存管理、销售订单处理等多个环节。文件可能会涵盖最佳实践、...

    绘制简单图形

    这里我们将主要探讨如何使用WPF和Windows Forms进行图形绘制,并着重讲解如何修改线条的颜色。 首先,让我们从WPF开始。WPF提供了一个名为`System.Windows.Shapes`的命名空间,它包含了一系列用于绘制基本图形的类...

    WPF控件,九宫格,自定义窗体

    我们将从基本概念出发,逐步讲解如何在WPF中创建并管理九宫格布局,并探讨自定义窗体的设计与实现。 一、WPF控件 WPF(Windows Presentation Foundation)是.NET Framework的一部分,提供了丰富的用户界面(UI)...

    BootStrap入门教程.pdf

    Bootstrap教程通常会从基础开始,逐步深入讲解Scaffolding的各个方面,例如如何设置全局样式、如何使用格网系统构建页面布局、如何嵌套和偏移列以及如何实现响应式设计。通过实践和示例代码,开发者可以掌握如何在...

    Windows 10 Toggle Switch(切换开关)源码

    本篇将详细讲解如何利用C#源码实现一个Windows 10风格的WPF ToggleSwitch控件。 首先,我们需要理解ToggleSwitch的基本概念。ToggleSwitch是开关控件的一种形式,通常用于二选一的切换操作,如开启/关闭某个功能。...

    Silverlight 3 Programmers Reference Aug 2009

    - **样式与模板**:深入讲解样式和模板的高级用法。 - **资源字典**:介绍如何利用资源字典来管理共享资源。 - **主题与皮肤**:探讨如何为主题和皮肤的应用程序设置一致的外观风格。 **第九章:图形与视觉效果** -...

    (16)sivlerlight创建用户自己控件

    本教程将详细讲解如何在Silverlight中创建和使用自定义用户控件。 首先,了解用户控件的基本概念。用户控件是一种复合控件,它是由多个基本UI元素(如TextBlock、Button、Grid等)组成的复合组件。创建用户控件的...

    《响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT.rar

    Bootstrap的核心特点包括栅格系统(Grid System),用于创建灵活的布局;组件库,如导航栏、按钮、表单、下拉菜单等;以及JavaScript插件,如模态框(Modal)、轮播图(Carousel)等。Bootstrap还提供了一套易于使用...

    前端基础-PC端品优购项目.rar

    项目可能涵盖了流体布局(fluid layout)、网格系统(grid system)以及Flexbox和Grid布局。Flexbox是用于处理一维布局(如行或列)的现代CSS规范,而Grid则用于二维布局,两者都能实现灵活且响应式的网页设计。 4...

    WPF 柱状图 堆积柱状图 Chart使用

    我们将使用Visual Studio 2010和C#语言来讲解这一过程。 首先,为了在WPF项目中使用Chart组件,我们需要引用以下的DLL文件: 1. System.Windows.Forms.dll:这是Windows Forms的核心库,包含了Chart控件。 2. ...

    在FLASH里能不能设置参考线_flash8.0视频教程

    8. **参考线与网格**:参考线可以和网格系统(Grid System)结合使用,网格能提供更细粒度的定位辅助。在“视图”(View) > “显示”(Show)中选择“网格”(Grid),并调整网格设置以适应你的项目需求。 9. **工作空间...

    《Bootstrap响应式Web开发》源代码.zip

    1. **chapter05**:在Bootstrap中,第五章可能涵盖了网格系统(Grid System)和响应式布局。Bootstrap的网格系统允许开发者创建灵活且响应式的布局,通过使用预定义的行(row)和列(column)类来排列内容,确保在...

    Sass和Compass设计师指南源代码

    4. **Chapter 6**: 可能介绍了Compass的使用,包括导入 Compass 的基本库,使用 Compass 的内置函数和混合,如方向(direction)和网格系统(grid system)。 5. **Chapter 7**: 可能涉及到了Sass的函数,如颜色...

    Bootstrap3.3.x中文文档

    Bootstrap的核心特性包括:响应式布局(Responsive Grid System)、预定义的CSS样式(如字体、按钮、表单、导航等)、JavaScript插件(如模态框、轮播图、下拉菜单等)以及易于定制的LESS CSS预处理器。 在...

    css3+bootstrap蜂窝式图标导航菜单特效.zip

    1. **设置网格系统**:使用Bootstrap的栅格系统(Grid System)来创建六边形的布局。这通常涉及到CSS的伪元素和负边距技巧,以形成六边形的形状。 2. **图标和文字**:结合Bootstrap的按钮类和Font Awesome图标,将...

    chart类绘制折线图

    本教程将详细讲解如何在VS2010环境下,使用C#编程语言,通过`Chart`类来绘制自定义的折线图。 首先,我们需要在C#项目中引入`System.Windows.Forms.DataVisualization.Charting`命名空间。这可以通过在代码文件顶部...

    (27)_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    网格系统(Grid System)也是响应式设计中的关键工具,它允许开发者通过定义列数和断点来控制元素在不同屏幕尺寸下的布局。 再者,前端页面开发中,JavaScript和jQuery库通常用于实现交互效果和动态功能。虽然描述...

    WPF中窗体最大化问题的解决方法

    在最大化状态下,保存窗体的原始位置和大小,然后利用SystemParameters.WorkArea获取工作区的边界,设置内部Grid(如gd_main)的Margin属性,使得任务栏可见。在还原状态下,恢复窗体到原来的尺寸和位置,将Grid的...

Global site tag (gtag.js) - Google Analytics