HTML5+CSS3 Web前端开发项目化教程 课件 项目4 列表页面制作.pptx

《HTML5+CSS3Web前端开发项目化教程》项目4列表页面制作

任务4.3制作“低碳环保网”头部模块03目录Contents任务4.2制作“环保百科”图像列表模块02任务4.1制作“低碳环保网”文字列表01

教学目标熟悉超链接伪类选择器掌握CSS列表属性掌握伪元素选择器的用法理解结构化伪类选择器、关系选择器的用法1.知识目标能够为列表设置列表项图像能够使用伪元素选择器在元素前后添加内容能够使用结构化伪类选择器、关系选择器选择元素能够使用Font?Awesome图标库设置图标2.技能目标倡导低碳生活、环保出行意识培养不断探索、精益求精的工匠精神遵守代码规范性要求，养成良好的代码编写习惯3.素养目标

1任务4.1制作“低碳环保网”文字列表

效果展示

知识储备CSS列表属性2伪元素选择器3超链接伪类选择器1设置列表项图像4目录Contents

知识储备在一个网站中，所有页面都是通过超链接相互连接在一起的，用户通过超链接就可以访问网站中的每个页面。在设计网站时，超链接与导航都是网页中重要的组成部分之一。1.超链接伪类选择器

知识储备a:linka:visiteda:hovera:active正常超链接访问后.鼠标经过悬停时超链接标签a的伪类1.超链接伪类选择器

知识储备同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，即LVHA，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。1.超链接伪类选择器

知识储备说到列表大家并不陌生，在浏览网页时，随处可见。列表是网页设计中使用频率非常高的元素，在大多数网站设计中，无论是新闻列表，还是图片列表，甚至导航菜单等，均需要以列表的形式来体现。2.CSS列表属性

知识储备列表属性列表项类型list-style-type列表项位置列表项图像list-style-imagelist-style-position2.CSS列表属性

知识储备属性值显示效果disc默认值，实心的圆点circle空心圆square实心方块decimal数字upper-alpha大写英文字母，如A、B、C、...lower-alpha小写英文字母，如a、b、c、...upper-roman大写罗马字母，如Ⅰ、Ⅱ、Ⅲ、...lower-roman小写罗马字母，如i、ii、iii、...none不显示任何符号列表项类型在CSS中，可以使用list-style-type属性来修改列表项的标志类型。2.CSS列表属性

知识储备2.CSS列表属性CSS中使用list-style-image将列表项前的项目符号替换为任意图片。语法格式如下：这种设置列表项图像的方法比较简单，但是无法调整图像与列表文字之间的距离。如果希望项目符号采用图像的方式，一般是将list-style-type属性设置为none，然后设置li标签的背景属性background来实现。list-style-image:url(图片URL)|none;例：使用list-style-image属性设置列表项图像：li{list-style-type:none;list-style-image:url(images/arrow.gif); }例：使用background属性设置列表项图像:li{list-style-type:none;background:url(images/arrow.gif)no-repeatleftcenter;padding-left:20px;/*设置li的左内边距为20px，是为了调整图像和列表项文字之间的距离*/}2.列表项图像

知识储备CSS中使用list-style-position属性控制列表项的位置，语法格式如下：outside:列表项标记位于文本的左侧，且放置在文本以外，为默认值inside:列表项标记放置在文本以内list-style-position：outside|inside;outsideinside2.CSS列表属性3.列表项位置

知识储备3.伪元素选择器用于在被选元素的内容前面插入内容元素::before{content:文字/url()/;}必须配合content属性来指定要插入的具体内容；content属性值可以是文字、图片和各种利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件；::before选择器::after选择器用于在被选元素的内容后面插入内容

知识储备3.伪元素选择器

知识储备3.伪元素选择器: