第 14 章在網頁中任意擺放網頁元素

第 14 章在網頁中任意擺放網頁元素

14-1 建立 AP Div 來擺放網頁元素 認識 AP Div

建立 AP Div

在 AP Div 中加入網頁元素

選取與調整 AP Div 選取 AP Div

調整 AP Div 的大小與位置

使用「AP 元素」面板管理 AP Div

更改 AP Div 的名稱

更改 AP Div 的 Z 軸順序

建立巢狀 AP Div 方法 1：

建立巢狀 AP Div 方法 2：

建立巢狀 AP Div

AP Div 的顯示與隱藏

14-2 設定 AP Div 的屬性 AP Div 的「屬性」面板

AP Div 的「顯示」屬性 Default：依瀏覽器的預設值來顯示 AP Div (預設為此項)。 Inherit：沿用父 AP Div 的顯示狀態, 若沒有父 AP Div, 預設會顯示出來 (大多數瀏覽器, 例如 IE 的預設值都是採用 inherit)。 Visible：不管父 AP Div 的顯示狀態如何, 強制顯示 AP Div。 Hidden：不管父 AP Div 的顯示狀態如何, 強制隱藏 AP Div。

AP Div 的「顯示」屬性 若將這些屬性與 AP 元素面板的操作做對照, 如下所示：

AP Div 的「溢位」屬性

AP Div 的「溢位」屬性 visible：自動將 AP Div 放大至可顯示完整 AP Div 內容的狀態, 因此會顯示出全部的內容。

AP Div 的「溢位」屬性 hidden：僅顯示 AP Div 內的部份, 隱藏超出 AP Div 以外的內容。

AP Div 的「溢位」屬性 scroll：不論內容是否超出, 都會為 AP Div 加上捲軸。

AP Div 的「溢位」屬性 auto：自動依 AP Div 與內容的關係來決定是否要顯示捲軸, 只有溢位時出現捲軸；反之則不會出現。本例我們就將溢位設為 auto, 你可開啟 Ch14-03.html 來檢視捲軸的效果。

設定 AP Div 的 CSS 屬性

14-3 將 AP Div 變成相對定位

第 14 章 在網頁中任意擺放 網頁元素