2021-07-25

Grid-Generator 可自訂網頁結構的版型產生器

網路上有很多免費的網頁模板可供下載,套用的方式也不複雜,但如要修改其中的版型結構,可能就有點門檻,而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾,但不論利用何種版型,如要套用模板,就需要找到相類似的模板,不然就是自己改,太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式,視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等,到最後產生該網頁版型的 CSS 樣式表,讓你不論用何種的網頁開發工具,都能輕鬆靈活的套用該 CSS,加快生產力。 Grid-Generator 網站資訊網站語言:英文網站網址: 按我前往 Grid-Generator
如何使用 Grid-Generator?

1.使用瀏覽器進入 Grid-Generator 網站,可見到預設的版型,且每一區塊旁邊都有一數字與+、- 圖示按鈕。
Grid-Generator 可自訂網頁結構的版型產生器

2.透過數字的調整,可以改變區塊的寬、高;透過+、-的隨意增加區塊,透過區塊內的[ Split ]可分裂相同位置區塊,也可以選取要合併的區塊後,按[ Combine ]來合併,點擊區塊中的名字,可以改變其 Css 內的命名。
Grid-Generator 可自訂網頁結構的版型產生器


※右側隨時都會修改過後的 CSS 與 HTML 碼,隨時都可以讓你做後續的應用。

 分享您的留言


請輸入關鍵字


請選擇...


˄