方便快捷的布局法——利用960GS框架
来源:互联网 发布:淘宝男装分类 编辑:程序博客网 时间:2024/05/21 09:12
今天经理告诉我一个非常好用的一个布局框架!利用960GS框架制作页面,几乎不用再写兼容性,再也不用为兼容各种浏览器而头疼了!记下来大家一起分享下!~
1. 960GS框架官网:960.gs, http://960.gs/demo.html
2. 非常有用的讲解视频页面链接:http://www.56.com/u36/v_NTc3OTE3Mzc.html
3. 使用步骤
第一步:
下载960GS框架,进入网站960.gs,点击页面头部的“Download”下载
第二步:
在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的基本知识了。
4. 下面是有关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文件中的样式。
- 方便快捷的布局法——利用960GS框架
- CSS布局——960gs
- 960GS网页框架的使用
- JackKnife开发专题-方便快捷的IOC框架
- 方便快捷的ThinkPHP轻量级框架 在线课第一讲
- android学习——使Android开发方便快捷的8个好工具
- 菜鸟学数据库(六)——方便快捷的开启、关闭Oracle服务
- 方便快捷的在线取色器
- 方便快捷的HTTP匹配
- html 利用 frameset 进行简单的框架布局
- gs文件的运行
- gs
- gs
- Android中使用Google的GSON框架解析JSON数据----方便快捷(含代码)
- BottomBarLayout——方便快捷地实现底部导航栏
- 方便快捷的小工具<<<---->>>日历
- 常用的MyEclipse快捷键(方便快捷)
- Kotlin方便快捷的IO操作
- SSH简介及工作机制
- 优化统一程序风格
- 【(动画版)解析三层架构】你可以不知道,你不能不知道!
- 几种地图定位方法
- ImageView 圆环旋转
- 方便快捷的布局法——利用960GS框架
- asp调用webservice
- 设计模式C++学习笔记之三(Singleton单例模式)
- LESS详解之命名空间
- 二叉树
- C#中get与set(类的属性封装)
- ALSA SOC在Linux3.1上的一些改进
- IIS默认网站被删除
- hadoop配置参数说明