计算机-网页制作

目标

使用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规则，自动作用于对应元素