2_静态网页设计实训任务书 第14周.docx
需积分: 0 42 浏览量
2023-05-09
18:22:41
上传
评论
收藏 645KB DOCX 举报
绿色导航
一、案例描述
1、考核知识点
元素的浮动属性 float
2、练习目标
➢ 进一步理解 float 属性。
➢ 灵活运用 float 属性实现导航效果。
3、需求分析
在使用列表时，列表项中可能包含若干子列表项，要想让列表项在一行显示就需要使用浮动属性。
本案例通过对列表项设置浮动实现一个导航效果。实现主要功能即可，图片自备，可与任务书中图片
不同。
4、案例分析
1) 效果如图 8-6 所示。
图 8-1 绿色导航栏
2) 具体实现步骤如下所示：
a) 在 Dreamweaver 中定义一个 banner 图像，使图像在页面顶部居中显示。
b) 在 banner 图像下面定义一个 div 盒子，给盒子设置宽高、背景等属性。
c) 在 div 盒子中定义一个列表，给列表的每一项添加文本超链接，设置鼠标经过时的效果。
d) 给列表中的每一项设置背景和左浮动样式，使其在一行漂亮的呈现。
二、案例实现
1、制作页面结构
新建 HTML 页面，具体代码如下：
资源评论
