- ASP.NET动态网站设计任务教程
- 张趁香 陈俊贤
- 331字
- 2025-02-27 09:40:17
任务1-9 图形菜单的建立
需求:
用拼图的方法组成图1-21所示的图形菜单,菜单图形部分能根据菜单标题文字的长度自动适应。

图1-21 水平图形菜单
分析:
每个激活菜单和未激活菜单区域是由三个部分组成的,左右两部分大小固定,中间部分因标题文字的长度而变化,为此将中间部分设置为背景图像填充。
实现:
第一步,将菜单分成两类:激活(不带底线的彩色)和未激活(带底线的灰色),并为此建立active和deactive文件夹。
第二步,找出图1-22所示的激活菜单和未激活菜单中三个不重复的最小部分,分别保存在相应的文件夹中。
第三步,建立一个静态页面,添加多个DIV,其中包含1个一级的DIV,3个二级DIV和9个三级的DIV,具体源代码见清单1-23。

图1-22 水平菜单所用图形
清单1-23 水平图形菜单

说明
使用TABLE也可以构造menu,代码部分见清单1-24。
清单1-24 使用TABLE构造menu
