网页样式制作（拓展）第3章边框样式嵌套列表与折叠.docxVIP

嵌套列表与折叠 1.目的 通过制作网页导航，掌握项目列表的嵌套、项目列表的折叠。加深对无序列表、有序列表、多级列表的认识，掌握details与summary标签的使用。 2.内容 “中国古典文学”采用无序列表，中间再“唐诗”处嵌套有序列表，“作品”采用两对details与summary标签实现两处标题折叠，网页在Chrome浏览器显示如图3-7所示效果。 图3-7效果 3.步骤 (1) 启动DW，设置title并保存为tzlx3.html； (2) 输入网页标题及文字，使用hn标签设置各标题样式； (3) 采用无序列表制作“中国古典文学”； (4) 设“唐诗”处嵌套有序列表； (5) 设置水平分隔线； (6) 用details与summary标签实现“古典文学”标题折叠； (7) 用details与summary标签实现“唐诗”标题折叠； (8) 保存文件。 实践项目 1、制作首页index.html，采用details嵌套制作二级可折叠导航，在360浏览器显示如图3-8所示效果； 2、每级导航使用无序列表。 3、点击第三讲内容“任务三”在新窗口打开rw3.html; 点击第三讲内容“拓展练习3”在新窗口打开tzlx3.html。 图3-8实践项目3效果 习题 图3-9是用列表项制作的菜单导航，请在空白处填入缺省的代码 图3-9列表项制作的菜单导航 html head title无需表格的菜单/title style !-- body{ background-color:#ffdee0;} #navigation { width:200px; font-family:Arial;} #navigation ul {list-style-type:none; margin:0px; padding:0px;} #navigation li { border-bottom:1px solid #ED9F9F;} #navigation li a{ display:block; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; border-right:1px solid #711515; } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ background-color:#990020; color:#ffff00; } -- /style /head body div id=navigation ul lia href=dm1.htmlHome/a/li ______________________________________________________ ______________________________________________________ ______________________________________________________ ______________________________________________________ /ul /div /body /html