LP03_第3章_上机指导-列表菜单.doc

上机要 配合网页中其他基本元素，实现菜单列表3 任务： 菜单项的标题h1元素，各个菜单项内容列表形式呈现，用li元素，根据已有程序样例，如的效果的界面。的模版下载，并解压，结构如下： 打开index文件，可查看运行效果，如下： 浏览器，并文件用记事本或eclipse打开，代码内容的附部分其中灰色背景的代码为重点需查看的部分）灰色背景代码标签部分的中文操作为 h1 class=typea href=javascript:void(0)菜单项1/a/h1中的“菜单项改为管理； 菜单项-列表项改为添加新菜单；的改为； 文件，你可以将该html文件再次在浏览器中运行，查看修改后的效果； 步骤的操作方法，将第二块灰色背景代码部分的内容做如下更改查看运行效果： 中的改为类别管理 将li标签中的内容分别改为菜单类别管信息管理上面的方法，第三块灰色背景部分的中文部分更改如下 将h1标签中的nbps”改为信息管理 将下方li标签中的nbps”分别改为，第块灰色背景部分的中文部分更改如下 将h1标签中的nbps”改为 将下方li标签中的nbps”分别改为，第六块灰色背景部分的的nbps”依次更改为、 运行结果如图所示项显示如下： 点”菜单管理” 点菜品类别管理 点公告信息管理 点销售订单管理 ： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / script src=js/prototype.lite.js type=text/javascript/script script src=js/moo.fx.js type=text/javascript/script script src=js/moo.fx.pack.js type=text/javascript/script style body { font:12px Arial, Helvetica, sans-serif; color: #000; background-color: #EEF2FB; margin: 0px; } #container { width: 182px; } H1 { font-size: 12px; margin: 0px; width: 182px; cursor: pointer; height: 30px; line-height: 20px; } H1 a { display: block; width: 182px; color: #000; height: 30px; text-decoration: none; moz-outline-style: none; background-image: url(images/menu_bgS.gif); background-repeat: no-repeat; line-height: 30px; text-align: center; margin: 0px; padding: 0px; } .content{ width: 182px; height: 26px; } .MM ul { list-style-type: none; margin: 0px; padding: 0px; display: block; } .MM li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 26px; color: #333333; list-style-type: none; display: block; text-decoration: none; height: 26px; width: 182px; padding-left: 0px; } .MM { width: 182px; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; clip: rect(0px,0px,0px,0px); } .MM a:link { font-family: Arial, Helvetica, sans-serif; font-size: 12px;