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

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

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

§相關文章,還可以參閱:

如何使用 Grid-Generator?

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

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

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

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

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

常有一種情況,就是久久不用輸入自己所設定的 Wi-Fi 密碼,突然增加了新設備要使用時,忘記的 Wi-Fi 密碼要怎麼辦呢?我想很多人會想到直接重新設定 IP分享器,再重新設定所有裝置上的 Wi-Fi 密碼,其實,不用這麼麻煩,我們可以讓儲存在 Windows 內的 Wi-Fi 密碼,以明碼來顯示即可,不用大動作的重新設定 IP分享器。

要在圖片上加入文字並不難,幾乎所有的圖片編輯軟體都有這項功能,難的是找到適合自己想要用的圖片,Captionn 是個將圖片搜尋及圖片加入自訂文字的功能整合在一起的免費網路服務,在文字方面,除了可以自訂要輸入的文字外,並可以自訂文字的位置、顏色、粗細、透明度、旋轉、間距等,而其圖片來源為則是使用 <a href="https://unsplash.com/" >Unsplash</a> 圖庫,使用者可以輸入關鍵字來搜尋該圖庫內的圖片,選定後的圖片可調整為 1:1、4:5、1:1.95 及 9:16 的尺寸,並加入色彩遮罩效果,完成後的圖片可下載回電腦,不會有浮水印,該服務免註冊,隨時可用。