griddle.it 是一個可以幫助網頁排版的小工具,讓您在設計版面時可以比較方便的對齊各個網頁元素。
在設計網頁的排版時,通常都會需要控制版面的寬度,並且讓不同元素保持對齊,而 griddle.it 就是一個很簡單的輔助小工具,他可以動態產生一個參考用的背景圖,圖上面會標明各種不同的像素寬度,讓您在設計網頁時,可以更方便掌握不同網頁元素的位置。
名稱:griddle.it
網址:http://griddle.it/
網址:http://griddle.it/
他的效果可以直接從他的 Live Demo 網頁中查看,而其使用方式就是直接以 URL 來指定要產生的背景圖,例如:
http://griddle.it/480-6-15
就表示產生寬度為 480 像素的背景圖,裡面包含 6 欄,欄與欄之間間隔 15 像素,產生的結果就像這樣:
body { background: url(http://griddle.it/960-12-30) repeat-y center top; }
欄的顏色也可以自行指定:
http://griddle.it/960-12-30?color=FF00FF http://griddle.it/960-12-30?color=f0f http://griddle.it/960-12-30?color=fuchsia
指定背景顏色:
http://griddle.it/960-12-30?background=papayawhip&color=fuchsia
指定文字顏色:
http://griddle.it/960-12-30?text=firebrick
隱藏文字:
http://griddle.it/960-12-30?num=false http://griddle.it/960-12-30?num=0
指定水平方向的格線:
http://griddle.it/960-12-20?horizontal=30
這樣就會每隔 30 像素畫一條水平線。
如果要一次輸入多個參數,可以用 &
分隔:
http://griddle.it/960-12-30?color=blue&num=false&horizontal=20
讓欄與欄之間沒有間隔:
http://griddle.it/960-12 http://griddle.it/960-12-0