浙江省高等学校教师教育理论培训

微信搜索“毛凌志岗前心得”小程序

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
http://gridder.andreehansson.se/
学习360gs的必备文章,好
http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/

http://www.biuuu.com/p973.html

Query插件960.gs grid overlay实现Javascript辅助布局页面功能

960 Grid [http://960.gs/]是一个非常优秀的用于辅助设计师进行快速创建网页原型的辅助系统,jQuery插件960.gs grid overlay是基于960 Grid 的原理上使用javascript实现辅助网页布局和设计的工具,使用非常简单,实例如下:
jQuery插件960.gs grid overlay实现Javascript布局页面功能
使用说明
需要使用jQuery库文件960grid库文件

使用实例
一,包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.960grid-1.0.min.js"></script>

二,Javascipt部分

  1. <script type="text/javascript">
  2. $(function() {
  3. $("body").addGrid(12, {img_path: 'images/'});
  4. });
  5. </script>

addGrid()方法有两个参数,12表示格子数,img_path表示辅助图目录。
实例将产生一个960 Grid 的布局图,用于辅助网页设计和开发。

注意有两张辅助图:12_col.png和16_col.png

在线演示960.gs grid overlay
http://www.badlydrawntoy.com/static/960grid/

下载960.gs grid overlay源码包
http://jquerycodes.googlecode.com/files/jquery.960grid-1.0.zip




posted on 2011-08-24 15:36  lexus  阅读(1066)  评论(0编辑  收藏  举报