中职 网页设计与制作案例教程第6章. .pptx

中职 网页设计与制作案例教程第6章.工信版WEB第6章 使用CSS设置列表样式WEB36.1基础项目1：制作简单横向导航栏6.2基础项目2：制作简单纵向导航栏6.3基础项目3：制作下拉菜单式导航栏6.4基础项目4：制作热门旅游攻略列表6.5基础项目5：制作热门歌手榜6.6知识库：CSS常用列表样式6.7提高项目：制作“童书畅销榜”页面6.8拓展项目：制作“商品列表”页面目录WEB6.1基础项目1：制作简单横向导航栏4WEB5（1）掌握在页面中添加项目列表的方法。（2）掌握利用项目列表制作横向导航栏的方法。（3）掌握项目列表相关样式的含义及使用方法。（4）掌握设置超链接在鼠标悬停时产生变化的方法。6.1基础项目1：制作简单横向导航栏知识技能目标WEB6.2基础项目2：制作简单纵向导航栏6WEB7（1）掌握利用项目列表制作纵向导航栏的方法。（2）掌握导航栏背景为图像的制作方法。知识技能目标6.2基础项目2：制作简单纵向导航栏WEB6.3基础项目3：制作下拉菜单式导航栏8WEB9（1）掌握利用项目列表制作下拉菜单式导航栏的方法。（2）掌握嵌套项目列表的结构。知识技能目标6.3基础项目3：制作下拉菜单式导航栏WEB6.4基础项目4：制作热门旅游攻略列表10WEB11（1）掌握利用项目列表制作文章列表的方法。（2）掌握使用图像作为列表项符号的方法。知识技能目标6.4基础项目4：制作热门旅游攻略列表WEB6.5基础项目5：制作热门歌手榜12WEB13（1）理解dl、dt、dd标签的意义，掌握其用法。（2）掌握使用定义列表制作图文列表的方法。知识技能目标6.5基础项目5：制作热门歌手榜WEB14列表是一种非常有用的数据排列方式，最直接的用途是有序的呈现文字，但利用列表还可以做出其他丰富的效果，罗列不同的元素，如图像等，使用项目列表制作导航菜单也是重要的应用之一。!6.6知识库：CSS常用列表样式WEB编号列表项目列表定义列表在HTML中有三种列表6.6.1HTML列表16项目列表也称为无序列表，是网页中的常见元素之一，项目列表使用标签来罗列各个项目，各个项目使用特殊符号来进行分项标识，如黑色圆点等。项目列表的列表项之间没有顺序关系。语法格式项目列表 列表项 列表项 列表项 列表项 6.6.1HTML列表17项目列表项目列表生活中的垃圾可以分为：可回收垃圾不可回收垃圾有毒有害垃圾代码网页效果6.6.1HTML列表18编号列表又称为有序列表，每个列表项前面都有标识顺序的编号，如1、2、3或A、B、C等，编号的形式可以通过CSS样式进行控制。语法格式编号列表列表项列表项列表项列表项6.6.1HTML列表19编号列表编号列表平均工资最高的行业：金融业信息传输软件和信息技术服务业房地产业代码网页效果6.6.1HTML列表20定义列表是比较特殊的一个列表，由两部分组成：定义术语和定义说明，是定义术语标签，用来指定需要解释的名词，是定义说明，是具体的解释。语法格式定义列表定义术语定义说明定义术语定义说明6.6.1HTML列表21定义列表定义列表中国的城市:北京上海广州美国的城市:华盛顿纽约洛杉矶代码网页效果6.6.1HTML列表22项目列表项的默认符号是黑色圆点，编号列表项默认符号是数字1、2、3.，通过设置list-style-type属性可以改变列表项的符号。语法格式list-style-type:属性值;设置列表符号类型6.6.2常用CSS列表样式23设置列表符号类型属性值属性值说明说明disc默认值，黑色圆点circle空心圆圈square黑色正方形none不显示符号inherit继承项目列表list-style-type属性值6.6.2常用CSS列表样式24设置列表符号类型编号列表list-style-type属性值属性值属性值说明说明decimal数字，如1，2，3lower-roman小写罗马文字，如：，upper-roman大字罗马文字，如：，lower-latin小写拉丁文，如：a，b，c，dupper-latin大写拉丁文，如：A，B，C，Dnone不显示编号inherit继承6.6.2常用CSS列表样式25设置列表符号图像使用图像作为列表项的符号，可以起到美化列表的作用。语法格式list-style-image:url(图像的路径及文件名);6.6.2常用CSS列表样式26设置列表符号位置list-style-position属性用于声明列表项符号相对于列表项内容的位置。语法格式list-style-position:属性值;6.6.2常用CSS列表样式27设置列表符号位置list-style-position属性值。值值描述描述inside列表符号放置在文本以内，且环绕文本根据列表符号对齐。outside默认值。保持列表符号位于文本左侧，并且放置在文本以外，环绕文本不根据标记对齐。6.6.2常用CSS列表样式286.7提高项目：制作“童书畅销榜”页面296.8拓展项目：制作“商品列表”页面WEB