#grid:网页网格布局工具
如果你开始使用网格来进行网页设计,那么 #grid 是你必不可少的一个工具,#grid 就是一个使用 jQuery 和 CSS 构建的小工具,它会在网页上插入布局网格线,让你能够检测和调整页面上元素位置。
#grid 适应所有宽度的页面,可以调整任意的高度布局(默认为 20px),可以实时隐藏和打开网格线,#grid 使用非常简单,一个 Javascript 文件,简单的几行 CSS 代码,和一个用于垂直网格的图片。
#grid 使用
#grid 使用非常简单,在你的页面上插入所需的 Javascript 和 CSS代码之后,只需按下 G
就会显示网格线,松开网格线消失,G + H
就会一直显示网格线,松开也不会消失,如果没有显示网格线,可以按下 G+F
把网格线调到前面。#grid:网页网格布局工具这篇日志已经启用了,你可以按下这些快捷键来测试下效果。
安装 #grid
-
下载 hashgrid.js 脚本,并且上传到服务器中。
- 然后在网页中添加如下 JavaScript 代码:
<!-- Grab latest version of jQuery --> <script type="text/javascript" src="http://gapis.geekzu.org/ajax/ajax/libs/jquery/1/jquery.min.js"> </script> <!-- Include the hashgrid script --> <script type="text/javascript" src="hashgrid.js"></script>
- 然后在网页中添加如下 CSS 代码:
/** * Grid */ #grid{ /* Dimensions - same width as your grid with gutters */ width: 980px; /* Grid (left-aligned) position: absolute; top: 0; left: 0; */ /* Grid (centered) */ position: absolute; top: 0; left: 50%; margin-left: -490px; } /** * Vertical grid lines * * Set the column width taking the borders into consideration, * and use margins to set column gutters. */ #grid div.vert{ width: 139px; border: solid darkturquoise; border-width: 0 1px; margin-right: 19px; } #grid div.vert.first-line{ margin-left: 19px; } /** * Horizontal grid lines, defined by your base line height * * Remember, the CSS properties that define the box model: * visible height = height + borders + margins + padding */ #grid div.horiz{ /* 20px line height */ height: 19px; border-bottom: 1px dotted darkgray; margin: 0; padding: 0; } /** * Classes for multiple grids * * When using more than one grid, remember to set the numberOfGrids * option in the hashgrid.js file. */ #grid.grid-1 div.vert{ /* Vertical grid line colour for grid 1 */ border-color: darkturquoise; } #grid.grid-2{ /* Adjustments */ padding: 0 160px; width: 660px; } #grid.grid-2 div.vert{ /* Vertical grid line colour for grid 2 */ border-color: crimson; }
#grid 可以支持各种网格系统的,目前默认提供 980 宽的布局(940 内容区,两边 20 边界),如果使用别的网格模式,需要调整下CSS 和制作一张新的用于垂直网格布局的图片。
下载:#grid
演示:#grid:网页网格布局工具