#grid:网页网格布局工具

文章目录[隐藏]

WPJAM TOC

如果你开始使用网格来进行网页设计,那么 #grid 是你必不可少的一个工具,#grid 就是一个使用 jQuery 和 CSS 构建的小工具,它会在网页上插入布局网格线,让你能够检测和调整页面上元素位置。

#grid 适应所有宽度的页面,可以调整任意的高度布局(默认为 20px),可以实时隐藏和打开网格线,#grid 使用非常简单,一个 Javascript 文件,简单的几行 CSS 代码,和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单,在你的页面上插入所需的 Javascript 和 CSS代码之后,只需按下 G 就会显示网格线,松开网格线消失,G + H 就会一直显示网格线,松开也不会消失,如果没有显示网格线,可以按下 G+F 把网格线调到前面。#grid:网页网格布局工具这篇日志已经启用了,你可以按下这些快捷键来测试下效果。

安装 #grid

  1. 下载 hashgrid.js 脚本,并且上传到服务器中。

  2. 然后在网页中添加如下 JavaScript 代码:
    <!-- Grab latest version of jQuery -->
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
    
    <!-- Include the hashgrid script -->
    <script type="text/javascript" src="hashgrid.js"></script>
    
  3. 然后在网页中添加如下 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:网页网格布局工具

热门文章