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

上机指导主要目标列表元素的使用配合网页中其他基本元素，实现菜单列表实验3任务：菜单项的标题用h1元素，各个菜单项包含内容采用列表形式呈现，用ul和li元素，根据已有程序样例，做出如步骤2中的运行效果的界面。步骤：1.新建网页1)将本实验所用的模版从邮箱下载，并解压，内容结构如下图所示：2)用浏览器打开index文件，可查看运行效果，如下：•2•3)关闭浏览器，并将index文件用记事本或eclipse打开，代码内容见最后的附源码部分（其中灰色背景处的代码为重点需查看的部分）4)修改第一块灰色背景部分的代码中h1标题标签和ul列表标签部分的中文，具体操作为：h1class=typeahref=javascript:void(0)菜单项1/a/h1中的“菜单项1”改为“菜单管理”；liahref=#target=main菜单项1-列表项1/a/li中的“菜单项1-列表项1”改为“添加新菜单”；liahref=#target=main菜单项1-列表项2/a/li中的“菜单项1-列表项2”改为“菜单信息列表”；保存文件，你可以将该html文件再次在浏览器中运行，查看修改后的效果；5)按照步骤4中的操作方法，将第二块灰色背景代码部分的内容做如下更改并查看运行效果：将h1标签中的“菜单项2”改为“菜单类别管理”；将li标签中的中文内容分别改为“菜单类别管理”、“添加新类别”、“类别信息管理”；6)按照上面的方法，请讲第三块灰色背景部分的中文部分更改如下：将h1标签中的“&nbps”改为“公告信息管理”；将下方li标签中的“&nbps”分别改为“添加新公告”、“公告信息列表”；7)同上，请讲第四块灰色背景部分的中文部分更改如下：将h1标签中的“&nbps”改为“销售订单管理”；将下方li标签中的“&nbps”分别改为“销售订单管理”、“销售订单查询”、“本日销售统计”；8)同上，请讲第五、六块灰色背景部分的h1中的“&nbps”依次更改为“系统用户管理”、“注销退出”。•3•2.运行结果如图所示菜单列表项显示如下：点”菜单管理”点菜品类别管理•4•点公告信息管理点销售订单管理3.附源码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title菜单列表练习/titlescriptsrc=js/prototype.lite.jstype=text/javascript/scriptscriptsrc=js/moo.fx.jstype=text/javascript/scriptscriptsrc=js/moo.fx.pack.jstype=text/javascript/script•5•stylebody{font:12pxArial,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;}H1a{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;}•6•.MMul{list-style-type:none;margin:0px;padding:0px;display:block;}.MMli{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);}.MMa:link{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:26px;color:#333333;background-image:url(images/menu_bg1.gif);background-repeat:no-repeat;height:26px;width:182px;•7•display:block;text-align:center;margin:0px;padding:0px;overflow:hidden;text-decoration:none;}.MMa:visited{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:26px;color:#333333;background-image:url(images/menu_bg1.gif);background-repeat:no-repeat;display:block;text-align:center;margin:0px;padding:0px;height:26px;width:182px;text-decoration:none;}.MMa:active{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:26px;color:#333333;background-image:url(images/menu_bg1.gif);background-repeat:no-repeat;height:26px;width:182px;display:block;text-align:center;margin:0px;padding:0px;overflow:hidden;text-decoration:none;•8•}.MMa:hover{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:26px;font-weight:bold;color:#006600;background-image:url(images/menu_bg2.gif);background-repeat:no-repeat;text-align:center;display:block;margin:0px;padding:0px;height:26px;width:182px;text-decoration:none;}/style/headbodytablewidth=100%height=280border=0cellpadding=0cellspacing=0bgcolor=#EEF2FBtrtdwidth=182valign=topdivid=containerh1class=typeahref=javascript:void(0)菜单项1/a/h1divclass=contenttablewidth=100%border=0cellspacing=0cellpadding=0trtdimgsrc=images/menu_topline.gifwidth=182height=5//td/tr/tableulclass=MMliahref=#target=main菜单项1-列表项1/a/liliahref=#target=main菜单项1-列表项2/a/li/ul/div•9•h1class=typeahref=javascript:void(0)菜单项2/a/h1divclass=contenttablewidth=100%border=0cellspacing=0cellpadding=0trtdimgsrc=images/menu_topline.gifwidth=182height=5//td/tr/tableulclass=MMliahref=#target=main菜单项2-列表项1/a/liliahref=#target=main菜单项2-列表项2/a/liliahref=#target=main菜单项2-列表项3/a/li/ul/divh1class=typeahref=javascript:void(0) /a/h1divclass=contenttablewidth=100%border=0cellspacing=0cellpadding=0trtdimgsrc=images/menu_topline.gifwidth=182height=5//td/tr/tableulclass=MMliahref=#target=main /a/liliahref=#target=main /a/li/ul/divh1class=typeahref=javascript:void(0) /a/h1divclass=contenttablewidth=100%border=0cellspacing=0cellpadding=0trtdimgsrc=images/menu_topline.gifwidth=182height=5//td/tr/tableulclass=MMliahref=#target=main /a/li•10•liahref=#target=main /a/liliahref=#target=main /a/li/ul/divh1class=typeahref=javascript:void(0) /a/h1h1class=typeahref=javascript:void(0) /a/h1scripttype=text/javascriptvarcontents=document.getElementsByClassName('content');vartoggles=document.getElementsByClassName('type');varmy