08CSS制作实用菜单.ppt.pptVIP

《精通CSS+DIV网页样式与布局》 第八课 CSS制作实用菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.1 项目列表 项目列表的标记 ul(无序列表) li(列表项) 列表项是被包含的关系. ul li列表项内容/li li列表项内容/li li列表项内容/li /ul 列表项内容可以是: 文字 图像 链接 DIV块 8.1 项目列表举例(文字) ul lifreestyle 自由泳/li libackstroke 仰泳/li libreaststroke 蛙泳/li libutterfly 蝶泳/li liindividual medley 个人混合泳/li lifreestyle relay 自由泳接力/li /ul 8.1项目列表举例(链接) ul id=navigation lia href=#首页导读/a/li lia href=#推荐版面/a/li lia href=#推荐文章/a/li lia href=#人气排名/a/li lia href=#新开讨论/a/li lia href=#休闲娱乐/a/li lia href=#常见问题/a/li /ul 8.1 项目列表(css样式控制) ul 和 li 的 (边框,颜色,背景,大小,内外边距) (border,color,background,width,margin,float) 特殊的css样式有: List-style-type:-----; 数字,圆圈,罗马 List-style-image:url(图像文件) 8.1 项目列表 8.1.1 列表的符号（8-1.html） 8.1.2 图片符号（8-3.html） 8.2 无需表格的菜单 8-5.html 8.2 操作步骤 1用项目列表方式输入文字 2设置网页背景字体大小通用属性 3设置包含列表项的DIV块居中 4设置ul 的margin padding list-type的属性 5设置li 的大小颜色 6设置a 链接 大小,背景,下划线等 7设置鼠标滑过时链接的颜色等 8.3 菜单的横竖转换 加入float:left;可变横向放置 8.3 仿照子板块 8.4 仿照某板块(步骤) 1.用定义DIV块,包含标题,和项目列表 2.对标题行进行设置,加入背景 3.对项目列表li进行大小，,正常状态设定颜色和背景. 4.对项目列表鼠标滑过,修改色彩和背景 实验3-带图片文字项目录列表 可借鉴 实验3 参考.htm 网页文件 8.4 项目列表－做图片列表 1.用定义DIV块,包含一个项目列表ul/ul内含4个li/li 2.对单个列表项进行处理,做了链接处理,包含1个图，1行字，一个透明小背景.. 3.对项目列表li中a 的img \em\span\ 进行正常状态设定字体大小、颜色和背景. 5.对项目列表鼠标滑过,修改文字处理色彩 《精通CSS+DIV网页样式与布局》