- ASP.NET动态网站设计任务教程
- 张趁香 陈俊贤
- 331字
- 2021-03-25 16:15:35
任务1-9 图形菜单的建立
需求:
用拼图的方法组成图1-21所示的图形菜单,菜单图形部分能根据菜单标题文字的长度自动适应。
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00030003.jpg?sign=1739545780-DkMtTWwPr0vEohJw8aU6Huw3q5isnrMI-0-f4d063dcc35c37c2263ca75bd60387b8)
图1-21 水平图形菜单
分析:
每个激活菜单和未激活菜单区域是由三个部分组成的,左右两部分大小固定,中间部分因标题文字的长度而变化,为此将中间部分设置为背景图像填充。
实现:
第一步,将菜单分成两类:激活(不带底线的彩色)和未激活(带底线的灰色),并为此建立active和deactive文件夹。
第二步,找出图1-22所示的激活菜单和未激活菜单中三个不重复的最小部分,分别保存在相应的文件夹中。
第三步,建立一个静态页面,添加多个DIV,其中包含1个一级的DIV,3个二级DIV和9个三级的DIV,具体源代码见清单1-23。
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00031001.jpg?sign=1739545780-3FJiqDx1QPZ85yNkBuxtmU6QPa5lvxPt-0-2aa2eabe7c3487037161899d96976a2b)
图1-22 水平菜单所用图形
清单1-23 水平图形菜单
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00031002.jpg?sign=1739545780-CFHasGms1WbP4Y5jo2RJwAsI33D06PUf-0-821a50924afdc82e6f1579f0e8e8c5b2)
说明
使用TABLE也可以构造menu,代码部分见清单1-24。
清单1-24 使用TABLE构造menu
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00031003.jpg?sign=1739545780-aLJeLK0kBe4faZRiqYGv5KHU11UuOWzv-0-5f4360a994ff44b363aab9ee3a3c0445)