目標

使用CSS的“浮動”屬性

使用CSS為不同的頁面設置不同的布局

display:none屬性的應用2效果1.使一個圖像浮動

1.

菜單>>圖像，將圖像i9100.jpg添加至

about.html

2.在“CSS樣式”面板內新建一個類CSS

規則.floatimage。

3.在“屬性”面板內設置圖像所用的“類”規則。4選中.floatimage項效果修改Float屬性及其效果2.使用Div把頁面分區

把標題區Div改成相對定位Div。7Div作為頁面的不同區域

面板

>>布局>>

Div

navigation

Div

main

Div

sidebar

Div

footer

Div每一次個Div的，依次在上一之后修改導航欄外觀

面板CSS樣式>>新建CSS規則，#navigation由于Div已經設置ID，所以新建的ID

CSS規則自動作用于相同ID的Div。修改頁腳區的背景色

面板CSS樣式>>新建CSS規則，#footer由于Div已經設置ID，所以新建的ID

CSS規則自動作用于相同ID的Div。3.設置主欄區的寬度并浮動

新建名為“#main”的ID

CSS規則。往主欄區填充內容main_content.html的內容。4.設置側欄區并填充內容

1.新建名為“#sidebar”的ID

CSS規則。

2.

features.html的內容。5.讓footer區位于下方

已有#footer規則這個設置值的含義是

修改名為“#footer”的ID

CSS規則。“不允許浮動元素出現在任何一邊”6.創建一個基于列表的導航欄

刪除(或選中)占位符文字，菜單

>>HTML>>文本對象>>項目列表，輸入列表項文字。列表項之間用【Enter】分隔。：選中每個條目的文字，菜單

為每個條目設置超>>超級

，使列表條目變成水平排列

在“

CSS

樣式”

面板新建名為“#navigation

ul

li”(

或“#navigationli”)的CSS規則。設置

的外觀和位置

在“CSS

樣式”面板新建名為“#navigation“#navigation

ul

li

a”)的CSS規則。a

”(或使得

的可點擊區域不限于文字，而是的箱框(或方框)。這個間隙是列表<ul>

的默認上邊距造成的，左側間隙是列表<ul>

的默認左留白造成的。左側間隙刪除導航欄的間隙

在“CSS樣式”面板新建名為“#navigation ul”的CSS規則。增加導航

的易用性

在“CSS樣式”面板新建名為“#navigation a:hover”的CSS規則。7.改變欄區的布局

把#main的Float屬性改成left，#sidebar

的Float屬性改成

right。sidebar

Divmain

Div8.修改頁面的總體寬度

把#container的Width屬性值改成840，Height屬性值設為空(以便容器更好地適應所容納的內容)。

把#header的Width屬性值也改成840，

把#main的Width屬性值改成520。間隔50px=840-520-270，若間隔為負數，則破壞頁面布局。9.創建相同高度的欄區

為側欄區添加背景色使得欄區高度不一致的問題更加突出。用背景圖像模擬等高欄區的效果這種模擬方法依賴于容器及欄區的固定寬度。增加主欄區的留白增加留白屬性值將自動增加Div的總體寬度，故此處間隔縮小。為了避免可能的布局問題，更傾向于為Div

的元素，如段落、列表等添加邊距。10.使用模板創建預設布局的頁面

菜單文件>>新建小結Div

設置Div

ID

設定Div的樣式(高度、寬度、背景色、字體、留白、…)

新建類CSS規則，手工指定Div的“類”規則

新建ID

CSS規則，自動作用于同名Div

新建復合內容CSS規則，自動作用于對應元素