計(jì)算機(jī)-網(wǎng)頁(yè)制作

目標(biāo)

使用CSS的“浮動(dòng)”屬性

使用CSS為不同的頁(yè)面設(shè)置不同的布局

display:none屬性的應(yīng)用2效果1.使一個(gè)圖像浮動(dòng)

1.

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

about.html

2.在“CSS樣式”面板內(nèi)新建一個(gè)類CSS

規(guī)則.floatimage。

3.在“屬性”面板內(nèi)設(shè)置圖像所用的“類”規(guī)則。4選中.floatimage項(xiàng)效果修改Float屬性及其效果2.使用Div把頁(yè)面分區(qū)

把標(biāo)題區(qū)Div改成相對(duì)定位Div。7Div作為頁(yè)面的不同區(qū)域

面板

>>布局>>

Div

navigation

Div

main

Div

sidebar

Div

footer

Div每一次個(gè)Div的，依次在上一之后修改導(dǎo)航欄外觀

面板CSS樣式>>新建CSS規(guī)則，#navigation由于Div已經(jīng)設(shè)置ID，所以新建的ID

CSS規(guī)則自動(dòng)作用于相同ID的Div。修改頁(yè)腳區(qū)的背景色

面板CSS樣式>>新建CSS規(guī)則，#footer由于Div已經(jīng)設(shè)置ID，所以新建的ID

CSS規(guī)則自動(dòng)作用于相同ID的Div。3.設(shè)置主欄區(qū)的寬度并浮動(dòng)

新建名為“#main”的ID

CSS規(guī)則。往主欄區(qū)填充內(nèi)容main_content.html的內(nèi)容。4.設(shè)置側(cè)欄區(qū)并填充內(nèi)容

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

CSS規(guī)則。

2.

features.html的內(nèi)容。5.讓footer區(qū)位于下方

已有#footer規(guī)則這個(gè)設(shè)置值的含義是

修改名為“#footer”的ID

CSS規(guī)則?！安辉试S浮動(dòng)元素出現(xiàn)在任何一邊”6.創(chuàng)建一個(gè)基于列表的導(dǎo)航欄

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

>>HTML>>文本對(duì)象>>項(xiàng)目列表，輸入列表項(xiàng)文字。列表項(xiàng)之間用【Enter】分隔。：選中每個(gè)條目的文字，菜單

為每個(gè)條目設(shè)置超>>超級(jí)

，使列表?xiàng)l目變成水平排列

在“

CSS

樣式”

面板新建名為“#navigation

ul

li”(

或“#navigationli”)的CSS規(guī)則。設(shè)置

的外觀和位置

在“CSS

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

ul

li

a”)的CSS規(guī)則。a

”(或使得

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

的默認(rèn)上邊距造成的，左側(cè)間隙是列表<ul>

的默認(rèn)左留白造成的。左側(cè)間隙刪除導(dǎo)航欄的間隙

在“CSS樣式”面板新建名為“#navigation ul”的CSS規(guī)則。增加導(dǎo)航

的易用性

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

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

的Float屬性改成

right。sidebar

Divmain

Div8.修改頁(yè)面的總體寬度

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

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

把#main的Width屬性值改成520。間隔50px=840-520-270，若間隔為負(fù)數(shù)，則破壞頁(yè)面布局。9.創(chuàng)建相同高度的欄區(qū)

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

的元素，如段落、列表等添加邊距。10.使用模板創(chuàng)建預(yù)設(shè)布局的頁(yè)面

菜單文件>>新建小結(jié)Div

設(shè)置Div

ID

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

新建類CSS規(guī)則，手工指定Div的“類”規(guī)則

新建ID

CSS規(guī)則，自動(dòng)作用于同名Div

新建復(fù)合內(nèi)容CSS規(guī)則，自動(dòng)作用于對(duì)應(yīng)元素