HTML九宮格-表格面板

時(shí)間：2023-09-02 00:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-02 00:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML九宮格-表格面板：HTML九宮格應(yīng)用非常廣泛，本節(jié)介紹如何利用金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器的表格面板制作HTML九宮格。既可以制固定寬高的九宮格，也可以制作按父容器改變大小而改變的九宮格。下面先介紹表格面板屬性，后面再介紹九宮格如何制作。下圖是一個(gè)三行三列的表格面板，其實(shí)就是一個(gè)九宮格。



一、表格面板屬性
HTML元素水平居中非常常用。如本文檔中的圖片、主內(nèi)容面板。一般的電腦顯示分辨率都很大，現(xiàn)在基本都1920*1024以上，像本頁(yè)這種文檔的閱讀，如果都做成這么大，那么遇到1024*768這種小的分辨率，就需要顯示滾動(dòng)條，另外如果寬度大，人們?cè)陂喿x就頭部轉(zhuǎn)動(dòng)的幅度就會(huì)過(guò)大，體驗(yàn)都不好。這樣，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)，一般主內(nèi)容面板寬度可以設(shè)定為1024px，居中顯示即可，如本文檔。
列數(shù)目
表格面板的行數(shù)。默認(rèn)為3。
行數(shù)目
表格面板的行數(shù)。默認(rèn)為3。
寬度自動(dòng)適應(yīng)
開(kāi)啟該選項(xiàng)，每個(gè)格的寬度等于表格面板的寬度除以3。
高度自動(dòng)適應(yīng)
開(kāi)啟該選項(xiàng)，每個(gè)格的高度等于表格面板的高度除以3。
固定行高
開(kāi)啟該選項(xiàng)，每行的高度固定，每行的高度由“行高”確定。
固定列寬
開(kāi)啟該選項(xiàng)，每列的寬度固定，每列的寬度由“列寬”確定。
行高
設(shè)置默認(rèn)的每行的高度。要與“固定行高”配合一起使用。
列寬
設(shè)置默認(rèn)的每列的寬度。要與“固定列寬”配合一起使用。
自定義行高
定義每行的高度，要使用“自定義行高”，則“高度自動(dòng)適應(yīng)”要設(shè)置為“false”,“固定行高”要設(shè)置為“true”（注意：如果高度值是百分?jǐn)?shù)，“固定行高”要設(shè)置為“false”）。下圖是行高的編輯。



自定義列寬
定義每行的寬度，要使用“自定義列寬”，則“寬度自動(dòng)適應(yīng)”要設(shè)置為“false”,“固定列寬”要設(shè)置為“true”（注意：如果值是百分?jǐn)?shù)，“固定列寬”要設(shè)置為“false”）。
二、九宮格
創(chuàng)建一個(gè)手機(jī)網(wǎng)頁(yè)，再創(chuàng)建一個(gè)表格面板，用鼠標(biāo)拖動(dòng)右下角紅圈到合適的寬度和高度。



如上圖，“與父的寬度同”設(shè)置為“true”、“與父的高度同”設(shè)置為“true”、“寬度自動(dòng)適應(yīng)”設(shè)置為false”、“高度自動(dòng)適應(yīng)”設(shè)置為false”、“固定行高”設(shè)置為false”、“固定列寬”設(shè)置為false”。
“自定義行高”和“自定義列寬”分別如下設(shè)置（即每行每列都是33.33333%）：



這時(shí)我們預(yù)覽一下看看效果，發(fā)現(xiàn)是空的，如下圖：



這時(shí)我們回到設(shè)計(jì)器中，在第一個(gè)格創(chuàng)建一個(gè)“常用組件”->“面板”，該面板的“邊框?qū)傩浴?>“顏色”設(shè)置為“clRed”、“邊框?qū)傩浴?>“類(lèi)型”設(shè)置為“Dash—虛線”。如下圖：



在第一個(gè)格的面板上點(diǎn)鼠標(biāo)右鍵，選擇“復(fù)制控件”。然后再“粘貼控件”到剩余的八個(gè)格。粘貼的效果如下：



這時(shí)我們?cè)兕A(yù)覽看看效果，如下：


再改變?yōu)g覽器的寬度和高度看看，都一個(gè)滿屏的九宮格。
以上是一個(gè)滿屏的九宮格的位操作方法，在實(shí)際應(yīng)用時(shí)，可以把表格面板先創(chuàng)建在一個(gè)面板上。這個(gè)Drmo頁(yè)面就是利用表格面板制作的。