HTML5 CSS3 Web前端开发项目化教程 课件 项目3 图文混排页面制作；项目4 列表页面制作

《HTML5+CSS3Web前端开发项目化教程》

项目3图文混排页面制作任务3.3制作“中华文化网”导航菜单03目录Contents任务3.2设置“中华文化网”页面背景02任务3.1制作“中华文化网”琴棋书画模块01教学目标熟悉盒子模型的概念及相关属性

掌握背景属性的设置方法

理解渐变背景属性

掌握元素类型特点及转换方法1.知识目标能够熟练应用盒子模型的相关属性

能够使用背景属性设置元素背景能够区分元素类型并进行元素类型转换2.技能目标 传承中华优秀传统文化，培养审美意识

培养不断探索、敢于实践的精神培养代码规范意识，养成良好的代码编写习惯3.素养目标1任务3.1制作“中华文化网”琴棋书画模块效果展示知识储备盒子模型相关属性2盒子模型的概念1目录Contents知识储备1.盒子模型的概念生活中的盒子知识储备1.盒子模型的概念展览馆墙上整齐的排列着四幅画，那么画面本身就是内容，

每幅画都有一个边框，英文称为“border”，画与画框之间都会有一定的留白，称为内边距，英文称为“padding”；每幅画之间通常也会一定的距离，这个距离称为“外边距”，英文称为“margin”。知识储备1.盒子模型的概念什么是盒子模型？所谓盒子模型，网页其实也是由一个个矩形区域通过排版组合而成，这些矩形区域可以看成是承装HTML内容的容器，称为盒子。网页盒子可以通过调整每个盒子的宽度、高度、距离等参数，来调节盒子的大小和位置。知识储备1.盒子模型的概念内容（content）内容是盒子模型的中心，它呈现了盒子的主要信息内容边框（border）边框（border）是盒子的边界外边距（margin）盒子的最外围，是添加在边框外周围的空间每个盒子模型都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。内边距（padding）内容区和边框之间的距离知识储备1.盒子模型的概念页面中的任何元素都可以看成盒子，常见的有div、h1到h6标题、列表ul、li，甚至行内元素a、span、img等等。正是因为这些盒子的排版，因此网页的内容虽然零散，但在版式排列上依然清晰有条理。知识储备2.盒子模型相关属性为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中，我们可以设置单侧边框（上边框、下边框、左边框、右边框）的样式属性、宽度属性、颜色属性，也可以综合设置边框的这些属性。边框设置border020304border-top：上边框;border-right：右边框;border-bottom：下边框;01border-left：左边框知识储备内边距属性2外边距属性3边框属性1box-sizing属性5阴影属性42.盒子模型相关属性透明6知识储备2.盒子模型相关属性边框属性边框样式border-style:上边[右边下边左边];边框宽度border-width:上边[右边下边左边];综合设置边框边框颜色border-color:上边[右边下边左边];border:四边宽度四边样式四边颜色;none（无）、dotted（点线）、dashed（虚线）、solid（实线）等以像素为单位用于定义页面中边框的风格red、#ff0000、rgb(0,255,0注意：边框三个属性，必须设置边框样式，如果未设置样式或设置为none，则宽度、颜色都无效。1.边框属性知识储备2.盒子模型相关属性border:border-width

border-style

border-color;border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;例如：border:1pxdashedred;/*设置边框样式，各个值不分顺序*/border综合设置边框，语法格式如下：注意：

border-width、border-style

border-color顺序任意，不分先后，可以只需设置指定的属性，省略的部分将取默认值（border-style不能省略）1.边框属性知识储备2.盒子模型相关属性border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;像border、border-top等，能够用一个属性定义元素的多种样式，这种属性在CSS中称之为复合属性。常用的复合属性有font、border、margin、padding和background等。实际工作中常使用复合属性，它可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合属性。注意：使用border属性一次性设置边框的样式，仅适用于4个方向的边框效果都一样的情况，若每条边框不相同，可通过单侧边框综合属性分别进行设置。例如，单独定义上边框样式：border-top:1pxdashedred;/*设置上边框样式*/1.边框属性知识储备2.盒子模型相关属性圆角边框属性是CSS3新增属性，其基本语法格式如下。圆角边框border-radius:参数1/参数2border-radius属性同样遵循值复制的原则，其水平半径（参数1）和垂直半径（参数2）均可以设置1-4个参数值，用来表示四角圆角半径的大小。仅设置1个参数，表示水平半径与垂直半径相等。“参数1”表示圆角的水平半径“参数2”表示圆角的垂直半径，参数1和参数2以“/”分隔，取值可以为像素或百分比。知识储备2.盒子模型相关属性如果设置1个值，表示4个圆角都使用这个值。如果设置2个值，表示左上角和右下角使用第1个值，右上角和左下角使用第2个值。如果设置3个值，表示左上角使用第1个值，右上角和左下角使用第2个值，右下角使用第3个值。如果设置4个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。div{border-radius:030px;}div{border-radius:5px}div{border-radius:020px50px;}div{border-radius:5px10px20px30px;}border-radius还可以用斜杠设置第2组值。第1组值表示水平半径，第2组值表示垂直半径。div{border-radius:20px/50px;}border-radius:水平半径参数/垂直半径参数;知识储备2.盒子模型相关属性除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：border-top-left-radius：左上角border-top-right-radius：右上角border-bottom-right-radius；右下角border-bottom-left-radius：左下角这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。例如：div{border-top-left-radius:10px50px;}表示设置div对象盒子左上角水平半径10px、垂直半径50px圆角。1.边框属性知识储备2.盒子模型相关属性如果水平半径/垂直半径分别大于等于盒子宽度/高度的一半，宽度高度一致时则显示为圆形，不一致时显示为椭圆形。border-radius:50%；1.边框属性知识储备2.盒子模型相关属性中国新闻网——习近平与青年书｜“在逐梦太空的征途上发出青春的夺目光彩”：1.边框属性知识储备2.盒子模型相关属性020304padding-top：上内边距;padding-right：右内边距;padding-bottom：下内边距;01padding-left：左内边距内边距例如：分别设定上、右、下、左内边距：padding-top:5px; /*上内边距*/padding-right:10px; /*右内边距*/padding-bottom:5px; /*下内边距*/padding-left:10px; /*左内边距*/内边距padding注意：使用复合属性padding定义内边距时，必须按照顺时针顺序采用值复制，一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上、右、下、左。用padding复合属性一次设定：padding:5px10px;

顺时针2.内边距属性知识储备2.盒子模型相关属性020304margin-top：上外边距margin-right：右外边距margin-bottom：下外边距外边距margin01margin-left：左外边距外边距（margin）具体的设置方法同内边距（padding）3.外边距属性知识储备2.盒子模型相关属性010203外边距应用清除元素默认内、外边距*{padding:0; /*清除内边距*/margin:0; /*清除外边距*/}盒子水平居中margin:0auto;/*利用margin实现块元素水平居中*/margin:5pxauto;/*实现元素水平居中，并且上下拉开5像素边距*/margin控制元素之间的距离紧邻的两个元素之间的距离为第1个元素的margin-right加上第2个元素的margin-left。但在垂直方向上紧邻的两个元素之间的距离是两者中的较大者。3.外边距属性知识储备2.盒子模型相关属性CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下：4.box-shadow属性box-shadow:offset-xoffset-yblurspreadcolorinset;offset-x：水平阴影的位置，必选，可以为负值。offset-y：垂直阴影的位置，必选，可以为负值。blur：阴影模糊半径，可选，只能取正值。0即无模糊效果，值越大阴影边缘越模糊。spread：阴影扩展半径，可选，正值阴影扩大，负值阴影缩小。color：阴影的颜色，可选。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。Inset：关键字，内部阴影inset/外部投影outset（默认），可选。知识储备2.盒子模型相关属性示例知识储备2.盒子模型相关属性box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:5.box-sizing属性box-sizing:content-box|border-box;content-box

定义宽度和高度时，它的参数值不包括padding和border。border-box

定义宽度和高度时，它的参数值包括了padding和border。知识储备2.盒子模型相关属性box1没有设置box-sizing属性，默认情况下，其实际宽度=宽度200+左右边框2+左右内边100px=302px；box2、box3都设置了box-sizing为border-box，所以box2、box3的边框、内边距都包括在其设置宽度中，即200px。示例知识储备2.盒子模型相关属性1能够使任何元素呈现出透明效果。opacity属性作用范围要比rgba模式大得多opacity属性opacity：参数;2它是rgb模式的延伸。rgba模式是在红、绿、蓝三原色的基础上添加了透明度参数rgba模式rgba(r,g,b,alpha);介于0和1之间的数字语法格式：语法格式：可以使用opacity和rgba设置透明。opacity是一个属性，给父级设置opacity属性，那么所有子元素都会继承这个属性。rgba是一个属性值，只对该元素起作用。6.透明度opacity:0.5;opacity:1;知识储备2.盒子模型相关属性示例知识储备总结边框内边距外边距阴影-box-shadowbox-sizing属性盒子模型相关属性盒子模型就是一个承装HTML内容的容器盒子模型的概念知识导图任务分析a>img<header><nav>div.banner<section><h2>具体样式：页面内的文字字体、大小、水平居中；<section>的宽高、水平居中、边框属性等；<h2>标题的宽度、边框、边距属性等；<img>的宽度、边框、边距、圆角属性等；综合应用盒子模型属性设置元素样式任务实施任务实施2任务3.2设置“中华文化网”页面背景效果展示知识储备CSS3新增背景属性2渐变背景属性3CSS背景属性1目录Contents2.盒子模型相关属性知识储备1.CSS背景属性1、网页中插入图像<imgsrc=“”/>浏览网页时我们常常会被网页中的图像所吸引，巧妙的在网页中穿插图像可以让网页内容变得更加丰富多彩。网页中怎么使用图像？2、图像作为背景知识储备1.CSS背景属性在CSS中，网页元素的背景颜色使用background-color属性来设置。1.背景颜色background-color:背景颜色属性实际工作中最常用CSS3新增颜色值，例：red、yellow#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)#十六进制色值，例：#cccrgb(r,g,b)，例：rgba(255,0,0,0.5)通过引入RGBA模式可以设置背景的不透明度。知识储备1.CSS背景属性box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:1.背景颜色background-image:url();知识储备1.CSS背景属性在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。其中，url指的是图像的路径。2.背景图像例如：body{background-image:url(../img/pic.png);}background-image:url();知识储备1.CSS背景属性默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。3.背景图像平铺background-repeat:图像平铺属性;平铺属性值含义repeat沿水平和竖直两个方向平铺（默认值）no-repeat不平铺（图像位于元素的左上角，只显示一次）repeat-x只沿水平方向平铺repeat-y只沿竖直方向平铺知识储备1.CSS背景属性背景图像位置默认为左上顶点，可以用background-position属性来改变背景图像的位置。background-position属性通常有两个属性值，语法格式如下4.背景图像位置background-position：XY；background-position属性通常有两个属性值，第1个值X用于设定水平方向的位置；第2个值Y用于设定垂直方向的位置；background-repeat设置为不重复（no-repeat）位置属性取值含义预定义的关键字水平方向值：left、center、right。垂直方向值：top、center、bottom。单位数值设置图像左上角在元素中的坐标，可以取正值、也可以取负值。例如background-position:20px20px;百分比0%0%：图像左上角与元素的左上角对齐。50%50%：图像50%50%中心点与元素50%50%的中心点对齐。20%30%：图像20%30%的点与元素20%30%的点对齐。100%100%：图像右下角与元素的右下角对齐，而不是图像充满元素。知识储备1.CSS背景属性background-attachment属性设置背景图像固定，其取值可以为：5.背景图像固定固定属性取值含义scroll图像随页面元素一起滚动（默认值）。fixed图像固定在屏幕上，不随页面元素滚动。知识储备1.CSS背景属性在CSS中，背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。背景的这几个属性没有顺序要求，但是习惯上按背景色、图像、平铺、位置、固定这样的顺序来写。6.综合设置背景background:cadetblueurl(img/pic.png)no-repeatcentertopfixed;background:背景色url("图像")平铺定位固定;知识储备2.CSS3新增背景属性运用CSS3中的background-size属性可以轻松控制背景图像的大小。1.背景图像大小background-size:属性值1属性值2;（1）auto：背景图像的实际大小，默认值。

（2）像素值：设置背景图像的宽度和高度，当设置一个值时，将其作为宽度值来等比缩放。

（3）0%～100%：用百分比指定背景图像大小，当设置一个值时同上。

（4）cover：覆盖，将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

（5）contain：容纳，将背景图像等比缩放至某一边紧贴容器边缘为止，背景图像始终被包含在容器内。

属性值取值：知识储备2.CSS3新增背景属性使用

background-origin属性来设置background-position属性相对哪个位置来定位背景图像。2.背景图像原点位置background-origin:属性值;（1）border-box：相对于边框区域来定位背景图像原点位置。（2）padding-box：相对于内边距区域来定位背景图像原点位置。（3）content-box：相对于内容区域来定位背景图像原点位置。border-boxpadding-boxcontent-box知识储备2.CSS3新增背景属性background-clip属性用于定义背景图像的裁剪区域3.背景图像裁剪区域background-clip:属性值;（1）border-box：默认值，从边框区域向外裁剪背景。（2）padding-box：从内边距区域向外裁剪背景。（3）content-box：从内容区域向外裁剪背景。border-boxpadding-boxcontent-box知识储备2.CSS3新增背景属性在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。4.多重背景图像background-image:url1，url2…;知识储备3.渐变背景属性在网页中有很多地方用到背景色的渐变，例如：左侧菜单栏的渐变背景色，中间模块的渐变背景色等等。知识储备3.渐变背景属性以前，背景渐变效果是用图像来实现的，现在，可以通过CSS3渐变背景属性来实现，这样可以减少下载的时间和宽带的使用，此外，渐变是由浏览器产生的，背景图像放大不会出现模糊，反而更加细腻、效果更好。知识储备3.渐变背景属性在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。语法格式为：1.线性渐变background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

用于定义渐变方式为线性渐变

括号内参数用于设定渐变角度和颜色值。知识储备3.渐变背景属性1.线性渐变渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度值或关键词，默认是从上到下渐变。颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。知识储备3.渐变背景属性1.线性渐变示例知识储备3.渐变背景属性径向渐变是从一个中心点，沿着椭圆形或圆形形状向外扩散的渐变，有一种水波扩散的效果。语法格式如下：2.径向渐变background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,...,颜色值n);

用于定义渐变方式为径向渐变

括号内的参数值用于设定渐变形状、圆心位置和颜色值。知识储备3.渐变背景属性background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,...,颜色值n);渐变形状用来定义径向渐变的形状，其取值既可以是定义水平半径和垂直半径的像素值或百分比，也可以是相应的关键词。ellipse表示椭圆形，circle表示圆形，默认是ellipse。圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。关键词可以取left、right、center、top、bottom等，默认是center，参数值可以用百分比或像素值。颜色值指定渐变的起止颜色，可以使用长度或百分比指定起止颜色的位置。2.径向渐变知识储备3.渐变背景属性2.径向渐变示例知识储备3.渐变背景属性重复线性渐变用“background-image:repeating-linear-gradient（参数值）;”，它类似于linear-gradient()并采用相同的参数，但它会无限地重复整个过程直至覆盖整个容器。3.重复渐变background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);第一个颜色从0开始，第二个颜色在容器宽度的10%的位置，第三个颜色值在容器宽度的20%，进行重复线性渐变。知识储备3.渐变背景属性重复径向渐变用background-image:repeating-radial-gradient（参数值），它类似于radial-gradient()并采用相同的参数，但它会无限地重复整个过程直至覆盖整个容器。3.重复渐变background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);第一个颜色是深灰色从0开始，第二个颜色是黑色宽度到4px，进行重复径向渐变。知识储备总结背景图像大小背景图像原点位置背景图像裁剪区域多重背景图像CSS3新增背景属性线性渐变径向渐变重复渐变渐变背景属性背景颜色背景图像背景图像平铺背景图像位置背景图像固定综合设置背景背景属性知识导图知识导图任务分析具体样式：body背景图像为bg.jpg；logo背景图像为logo.png；nav背景图像为nav.png；banner背景图像为banner.png；section背景图像为多重背景图像，分别为bg1.png、bg2.png、bg3.png，分别位于section底部、底部左侧、底部右侧；h2的背景图像分别为icon1.png、icon2.png。综合应用背景属性设置元素背景样式<header><nav>div.banner<section>任务实施任务实施3任务3.3制作“中华文化网”导航菜单效果展示知识储备1.元素类型及特点块元素特点（1）每个块元素会独占一行，按顺序自上而下排列，其宽度默认填满其父元素宽度;（2）可以对其设置宽度、高度等属性，即使设置了宽度，仍然是独占一行；（3）其内可以容纳行内元素、行内块元素和其他块元素。块元素在页面中以区域块的形式出现，常用于网页布局和网页结构的搭建。常见的块元素有：<header><nav>等结构化元素<div><dl><dt><dd><ul><ol><li><h1>-<h6><p><form><table>等在用CSS布局页面的时候，HTML标签被定义成了不同的类型，一般分为3种，即：块元素、行内元素(也可以叫内联元素）和行内块元素。知识储备2.元素类型转换在用CSS布局页面的时候，HTML标签被定义成了不同的类型，一般分为3种，即：块元素、行内元素(也可以叫内联元素）和行内块元素。行内元素特点（1）相邻的行内元素会排列在同一行里，直到一行排不下才会换行；（2）不能设置宽度、高度属性，仅仅靠其内的文字和图像尺寸来支撑结构；（3）其内只能容纳文本或者其他行内元素，不能容纳块元素。行内元素也称为内联元素或内嵌元素，常用于控制页面中文本的样式。常见的行内元素有：<a><span><i><u><b><em>等知识储备2.元素类型转换行内块元素特点常见的行内块元素有：<img><input>等在用CSS布局页面的时候，HTML标签被定义成了不同的类型，一般分为3种，即：块元素、行内元素(也可以叫内联元素）和行内块元素。（1）相邻的行内元素或行内块元素会排列在同一行上；（2）可以设置元素的高度、宽度等属性。行内块元素就是同时具备行内元素和块级元素的特点，本质仍是行内元素，可以水平排列，但是可以设置width及height属性值。知识储备1.元素类型及特点知识储备2.元素类型转换行内元素和块元素类型并不是绝对的，是可以相互转换的，可以通过display属性来改变默认的显示类型。inlineblockinline-blocknone01将元素显示为行内元素。03将元素显示为行内块元素02将元素显示为块元素。04此元素将被隐藏，不显示，也不占用页面空间。display知识储备2.元素类型转换当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙，可以通过以下两种方法解决：1、去掉行内元素之间的换行；2、将行内元素的父级设置font-size为0，行内元素自身再设置font-size值。知识储备总结display:none;不显示该元素，display:block;转换为块元素；display:inline;转换为行内元素；display:inline-block;转换为行内块元素。元素类型转换块元素行内元素行内块元素元素类型及特点知识导图任务分析<nav><a>具体样式：<a>的宽度、高度、边距、渐变背景、文字大小、颜色等样式任务实施任务实施技能拓展拓展任务：自选古诗内容制作中华文化网“唐诗宋词”模块。效果如图所示。任务要求：综合使用盒子模型属性设置元素边框、边距等属性，页面元素间距合理，美观大方。技能拓展拓展任务：页面中有一功能模块，有“网站首页”、“公司简介”、“联系我们”、“系统设置”四个超链接，每个超链接为圆角、宽高相同、背景为渐变背景，效果如图所示。THANKYOU《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.伪元素选择器:first-line：

为某个元素的第一行文字使用样式。:first-letter：

为某个元素中的文字的首字母或第一个字使用样式。知识储备4.设置列表项图像方法1：使用list-style-image设置列表项图像设置列表项符号为none，再设置列表项图像，调整列表项位置。list-style-type:none;list-style-image:url(img/li.png);list-style-position:inside;简单，但是无法精确调整图像的位置。优缺点知识储备方法2：

使用背景属性设置列表项图像设置li的背景属性background，再通过padding-left

调整背景图像与列表项文字之间的距离。可以精确控制背景图像的位置，但是图像需要提前准备好，并且图像背景半透明。优缺点4.设置列表项图像知识储备方法3：

使用CSS制作列表项图像修改HTML结构，在a前面增加span标签，设置span的样式为小圆点。需要修改HTML结构，在每个a前增加span标签，有点繁琐。优缺点4.设置列表项图像知识储备方法4：使用伪元素选择器生成列表项图像使用伪元素选择器::before，在a前生成一个图像。不用修改HTML结构，方便、灵活。优缺点4.设置列表项图像知识导图任务分析使用list-style-image设置列表项图像使用background设置列表项li的背景图像使用CSS样式制作一个小圆点图形。（1）“环保资讯”标题前的图标如何实现？可以设置标题的背景图像。（2）列表项前的图标如何实现？<h3>ul>li>adiv.newsdiv#top任务实施任务实施2任务4.2制作“环保百科”图像列表模块效果展示任务4.2制作“环保百科”图像列表模块知识储备结构化伪类选择器结构化伪类选择器是根据页面中元素之间的结构关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。CSS3中新增了结构化伪类选择器，大大提高了开发者的开发效率。:target选择器8:nth-child(n)和:nth-last-child(n)选择器2:nth-of-type(n)和:nth-last-of-type(n)选择器3:root选择器4:only-child选择器5:only-of-type选择器6:empty选择器7:first-child和:last-child选择器1知识储备结构化伪类选择器知识储备结构化伪类选择器:first-child选择器和:last-child选择器分别用于为父元素中的第一个和最后一个子元素设置样式。1.:first-child选择器和:last-child选择器知识储备结构化伪类选择器:nth-child(n)选择器和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。n可以是数字、关键字（even偶数、odd奇数）或公式（2n、n+3）。2.:nth-child(n)和:nth-last-child(n)选择器（1）若n是数字，则表示选择第n个子元素，n从1开始；

（2）若n是关键字，则even表示偶数，odd表示奇数；

（3）若n是表达式，则此时n从0开始计算。知识储备结构化伪类选择器:nth-child(n)选择器和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。n可以是数字、关键字（even偶数、odd奇数）或公式（2n、n+3）。2.:nth-child(n)和:nth-last-child(n)选择器知识储备结构化伪类选择器:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素。2.:nth-of-type(n)和:nth-last-of-type(n)选择器知识储备:nth-child(n)与:nth-of-type(n)的区别如下：

:nth-child(n)对父元素里所有子元素进行排序选择(序号是固定的)，先找到第n个子元素，然后看看是否和子元素匹配，若不匹配则不使用；

:nth-of-type(n)对父元素里特定类型的子元素进行排序选择，先去匹配子元素，然后根据子元素找第n个子元素。总结结构化伪类选择器知识储备结构化伪类选择器知识储备结构化伪类选择器:root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。4.:root选择器当使用了:root，则body只对当前包含内容的块改变背景颜色，否则整个页面背景颜色改变。知识储备结构化伪类选择器:only-child选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child选择器”可以选择这个子元素。5.:only-child选择器知识储备结构化伪类选择器:only-of-type选择器用于匹配属于父元素的特定类型的唯一子元素的元素。6.:only-of-type选择器知识储备结构化伪类选择器:empty选择器用来选择没有子元素或文本内容为空的所有元素。文本内容为空是一点内容都没有，哪怕是一个空格。7.:empty选择器知识储备结构化伪类选择器:target选择器用于为页面中的某个target元素指定样式。target元素就是页面中的超链接通过#id链接到的元素。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。8.:target选择器知识储备结构化伪类选择器如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。9.:not选择器知识导图任务分析如何让li横排？块元素转换为行内元素：display：inline-block，使用floatdiv#baike图标<ul><h1><li><a><img>任务实施任务实施3任务4.3制作“低碳环保网”头部模块效果展