转载:http://blog.sina.com.cn/s/blog_7a602f7f01014jd9.html
960GS框架基础学习
第一步:
下载960GS框架
第二步:
在html代码中引入3个需要使用的css文件
<link rel="stylesheet" type="text/css" href="css/960.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
第三步:
来试试效果
在body中添加如下代码
<div class="container_12 clearfix">
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
</div>
第四步:
自己拷贝代码看看效果如何
可以看到这里将整个页面均分成了12等份
OK,到这里,我们只是做了一个960GS的例子。下面该是了解下960GS的基本知识了。
下面是有关960GS的一些基本知识,请务必掌握这些原则。
-
页面宽度:960px
-
容器:container_X ,后面的X表示的数字,例如container_12表示将页面进行12等份,container_16表示将页面进行16等份。960GS中有12、16、24、32四种布局方式。
-
网格:grid_Y , 后面的Y同样表示数字,例如grid_1表示第一等份,如果容器为12等份,则Y的最大值为12。Y表示的第几等份,也可以说是第几列。
-
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>
-
范例:
相关推荐
960GS/960网格系统,更为灵活的网格设计,辅助网页设计师更好的进行设计
fluid960gs:Fluid 960网格系统
960gs Chrome 扩展 在使用的网页上叠加“960.gs”指南。 自动检测使用“960网格系统”的站点; 单击地址栏中的“960”图标以在您的网页上覆盖网格。 找到 CSS 类 container_12、16 或 24 时会触发自动检测。 可以...
1140GS,与960GS相似,对高分辨率的显示器更为友好,同时也能很好地兼容低分辨率。
技术选型 采用.net4.0作为基础技术平台,原来是采用.net4.5的,但是后来发现.net4.5不支持Windows Server2003,所以又降...10、css框架选用960gs 11、报表采用stimulsoft report(商业) 12、图形分析采用fusioncharts
Unsemantic 响应式网格系统是 960 网格系统的后继接班人,开发者就是 960gs 的作者。它以 960 Grid 类似的方式工作,但不是一组列数,它是完全基于百分比。例如,如果你想要一个 50% 列宽,简单地使用类=“grid-50”...
WEB前端助手(FeHelper)_v6.2.crx FeHelper--弹出菜单 ...代码美化 ...其实所有C系的代码,都可以通过Javascript代码...如果您的页面是基于栅格系统而开发的(如960gs),这个简单的工具能很好的帮助您分析栅格对齐是否规范
流行的960网页制作模板... 960网格、网页制作参考线 psd文件...
和960gs 一样,只不过是1200的,希望各位打赏
概述 ... 它使您可以从服务器端管理CSS和JS代码,并... $gs->addChild(new Xhtml\Element('h2', null, true, '16 Column Grid - 960Gs')); $gs->jquery()->click( $gs->jquery()->ajax( array( 'url' => 'ajax.php',
1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组...
1.960gs 960像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。 2.YUI2:GridsCSS 芒果曾经介绍过由雅虎开发小组...
960 Grid System 源代码 最新,包含demo
960gs提供了一个简单的网格系统,适合快速开发。非常漂亮的Web模板,适合响应式、移动友好的开发。适合网站快速开发的极简HTML构建模块。面向专业人员的CSS框架。自适应的CSS网格系统。适合懒人开发者的前端微框架。...
覆盖“960.gs”指南通过使用960电网系统的网页。 使用“960网格系统”的站点自动检测到; 单击地址栏中的“960”图标以覆盖网页上的网格。 找到CSS类Container_12,16或24时触发自动检测。 可以使用弹出窗口(默认情况...