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>
-
范例:去除右边的margin
-
<div class="grid_1 omega">grid_1</div>
-
添加样式:Styling
-
开发网站,我们不可能全部都使用960GS的样式,我们还需要添加一些自己的样式进去,由于CSS使用优先级的形式来觉得如何解释样式,而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同,浏览器会优先选择你的css文件中的样式。
<!--EndFragment-->
分享到:
相关推荐
960GS/960网格系统,更为灵活的网格设计,辅助网页设计师更好的进行设计
gs基本操作,包括半方差,等等操作方法,采用截取实际图片的方演示具体操作
GS 14-2006-工商行政管理基础代码集完整版,有修改补充过,方便使用,无需要一个个去网上查了
利用GS算法多次迭代,最终将所需要的图片(JPEG格式)转化为对应的计算全息图。
浪潮集中式集团财务软件不仅能够帮助集团各下属企业进行日常的财务核算、财务管理,对外提供财务会计信息,更有效支持集团的财务监控,进而支持集团经营业务的协同增效;在内部交易与内部债权与债务等往来发生之时由...
sc132gs国产sensor中文用户使用指导手册
三菱FX5U PLC与GS2110触摸屏通信
学习GS算法时的一点小收获,希望可以帮助大家。这篇代码包含了GS算法的思想和应用
GS-DES图文档安全系统,这是什么东西应该知道吧?不是这种加密的,当然不能修复了。 工具说明: GS-DES图文档安全系统中,没有安装了客户端后,无法查看被加密的文件。 此工具可以修复文件被加上了 "@#GreatSky ...
GS全息算法MATLAB
GS7 列表表单和基础卡片表单创建基础过程
实验4Jacobi迭代法和GS迭代2学习.pdf
辰竹 GS8094-EX/GS8193-EX隔离栅产品说明pdf,辰竹 GS8094-EX/GS8193-EX隔离栅产品说明
fluid960gs:Fluid 960网格系统
GS算法MATLAB全息图生成 多层传播 GS算法MATLAB全息图生成 多层传播 GS算法MATLAB全息图生成 多层传播 GS算法MATLAB全息图生成 多层传播 GS算法MATLAB全息图生成 多层传播 GS算法MATLAB全息图生成 多层传播 GS算法...
地统计分析 GS 9.0 软件,仅供科研人员或相关人员学习之用,请勿用于其它。感谢! 地统计分析 GS 9.0 软件,仅供科研人员或相关人员学习之用,请勿用于其它。感谢!
GS流的分析 由于DVB—S在带宽利用率以及调制编码方面的不足...采用了更先进的调制编码方式,在兼容TS流的基础上,引入一种全新的码流,即通用流 (general stream,GS)。在相同的条件下,DVB.S2比DVB.S节省了约30%的带宽 。
GS5.2问题答疑一 凭证打印 登录 帐表查询
1、GS游享网独家测试,修复基础上线的致命报错问题,并有对应的测试截图。 2、可以去GS游享网论坛官网查看指定编号的的测试截图。 3、有任何问题可以添加客服 4、GS游享网有更多原创视频教程,同时有最新的单服务器...
基于MATLAB的GS迭代算法,用于相位恢复,以及结合菲涅尔衍射计算光学全息图。