三、【技能锤炼】
【案例6-3】 绿色导航
一、案例描述
1、考核知识点
元素的浮动属性float
2、练习目标
Ø 进一步理解float属性。
Ø 灵活运用float属性实现导航效果。
3、需求分析
在使用列表时，列表项中可能包含若干子列表项，要想让列表项在一行显示就需要使用浮动属性。本案例通过对列表项设置浮动实现一个导航效果。
4、案例分析
1) 效果如图6-6所示。
图 6-1 绿色导航栏
2) 具体实现步骤如下所示：
a) 在Dreamweaver中定义一个banner图像，使图像在页面顶部居中显示。
b) 在banner图像下面定义一个div盒子，给盒子设置宽高、背景等属性。
c) 在div盒子中定义一个列表，给列表的每一项添加文本超链接，设置鼠标经过时的效果。
d) 给列表中的每一项设置背景和左浮动样式，使其在一行漂亮的呈现。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
在上面的代码中，定义了一个class为nav的大盒子，用于对页面元素的整体控制。然后使用ul标记和li标记定义一个导航。
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图6-7所示。
图 6-2 绿色导航栏
【案例6-4】 传智公开课导航
一、案例描述
1、考核知识点
元素的浮动属性float
2、练习目标
Ø 深刻理解float属性的应用。
Ø 灵活运用float属性实现图像和文本排列美观大方的布局。
3、需求分析
在使用列表时，列表项中有可能包含若干子列表项，要想让列表项中的图文在一行显示就需用到浮动属性。本案例通过对列表项设置浮动实现一个传智公开课的导航效果。
4、案例分析
1) 效果如图6-8所示。
图 6-3 家居大视野效果
2) 具体实现步骤如下所示：
a) 在Dreamweaver中定义一个div盒子，给盒子设置宽高、背景等属性。
b) 在div盒子中定义一个列表，给列表的每一项添加图像超链接和文本超链接，给文本设置鼠标划上划下效果。
c) 给列表中的每一项设置背景和左浮动样式。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
在上面的代码中，定义了一个class为all的大盒子，用于对页面元素的整体控制。然后使用dl标记、dt标记和dd标记定义一个列表结构。
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图6-9所示。
图 6-4 家居大视野效果
【案例6-5】 overflow属性
一、案例描述
1、考核知识点
overflow属性
2、练习目标
Ø 了解overflow属性值为auto时的使用方法。
Ø 灵活运用overflow属性处理内容溢出的情况。
3、需求分析
当盒子内的元素超出盒子自身的大小时，内容就会溢出，为了避免这种情况出现就需要使用overflow属性。本案例通过设置overflow 属性达到隐藏其内容的效果。
4、案例分析
1) 效果如图6-10所示。
图 6-5 overflow效果
2) 具体实现步骤如下所示：
a) 在Dreamweaver中定义一个div盒子。
b) 给盒子中填满内容直至溢出。
c) 给盒子设置overflow属性。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图6-11所示。
图 6-6 overflow效果
