工信版（中职）Web前端设计基础 项目七电子课件.pptx

《工信版（中职）Web前端设计基础 项目七电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目七电子课件.pptx（62页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目七电子课件CSS 3图文混排项目七授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点CSS 3美化段落；CSS 3美化图片；CSS 3图文混排。CSS 3美化文本；二 知识准备CSS 3美化文本；CSS 3美化段落；CSS 3图文混排。CSS 3美化图片；CSS 3美化文本1.设置文本字体在CSS 3样式中，使用font-family属性定义文本的字体类型，格式如下：font-family：字体1,字体2,字体3;font-family可定义多种字体，多个字体将

2、按优先顺序排列，以逗号隔开（逗号为英文逗号）。如果字体名称包含空格，如Times New Roman，则应该将名称用引号括起来。CSS 3美化文本2.设置文本大小在CSS 3样式中，使用font-size属性定义文本的大小，格式如下：font-size：像素值/关键字;font-size的属性值可以使用两种方式，一种是使用像素为单位的数值；二是使用关键字，如表所示。关键字关键字说说 明明xx-small最小。绝对字体尺寸，根据对象字体进行调整x-small较小。绝对字体尺寸，根据对象字体进行调整small小。绝对字体尺寸，根据对象字体进行调整medium默认值，正常。绝对字体尺寸，根据对象字体

3、进行调整large大。绝对字体尺寸，根据对象字体进行调整x-large较大。绝对字体尺寸，根据对象字体进行调整xx-large最大。绝对字体尺寸，根据对象字体进行调整larger相对字体尺寸。相对于父对象中字体尺寸进行相对增大，使用成比例的em单位计算smaller相对字体尺寸。相对于父对象中字体尺寸进行相对减小，使用成比例的em单位计算length百分数或由浮点数和单位标识符组成的长度值，不可为负值。百分比取值是基于父对象中的字体尺寸CSS 3美化文本3.设置文本粗细在CSS 3样式中，使用font-weight属性定义文本的粗细程度，格式如下：font-weight:粗细值/关键字;粗细值

4、可以使用两种方式，一是使用100900 的数值（100、200、900），值越大就表示越粗，值越小就表示越细，400相当于正常字体normal，是浏览器默认的字体粗细，700相当于bold；二是使用关键字，关键字如表所示。如果没有设置该属性，则使用默认值normal。关键字关键字说说 明明normal默认值，标准字体lighter定义更细的字体，相对值bold定义粗体字体bolder定义更粗的字体，相对值CSS 3美化文本4.设置文本颜色在CSS 3样式中，使用color属性定义文本的颜色，格式如下：color:颜色值;颜色值可以使用颜色的英文名称、一个十六进制的RGB值等多种方式来表示，如表

5、所示。颜色值颜色值说说 明明color_name颜色值为颜色名称的英文（例red，表示红色）hex_number颜色值为十六进制值（例#ff0000或#f00，表示红色）rgb_number颜色值为RGB代码（例rgb(255,0,0)，表示红色）rgba_number颜色值为RGBA代码（例rgba(255,0,0,0.5)，表示红色）inherit从父元素继承颜色hsl_number颜色值为HSL代码（例hsl(0,75%,50%)）hsla_number颜色值为HSLA代码（例hsla(120,50%,50%,1)）CSS 3美化文本5.设置文本样式在CSS 3样式中，使用font-st

6、yle属性定义文本的样式，格式如下：font-style:属性值;属性值如表所示。属性值属性值说说 明明normal默认值，标准的字体样式italic斜体的字体样式oblique倾斜的字体样式inherit从父元素继承的字体样式CSS 3美化文本6.设置文本阴影效果在CSS 3样式中，文本阴影效果属于文本的高级样式，如果使用上面的CSS样式进行定义，不能得到正确显示效果，这就需要使用特定的CSS标签来完成。使用CSS 3样式中的text-shadow属性定义文字的阴影效果，格式如下：text-shadow:阴影水平偏移值（可取正负值）阴影垂直偏移值（可取正负值）阴影模糊值 阴影颜色;text-

7、shadow属性有四个，后两个为可选。CSS 3美化文本6.设置文本阴影效果【例7-1】CSS3设置文本阴影效果实例，代码如下所示（示例文件7-1.html）。设置文本阴影*margin:0;padding:0;h1font-family:Arial Black;font-size:60px;text-shadow:2px 3px 6px#333;h2font-family:Arial Black;font-size:60px;/*设置多重阴影效果使用逗号隔开*/text-shadow:2px 2px 0px#333,2px 5px 10px green,2px-2px 5px red;Tex

8、t shadowText shadow在chrome浏览器中预览CSS 3美化文本7.设置文本溢出效果text-overflow属性定义当文本溢出时是否显示省略标记。要实现溢出文本时产生省略号的效果，还必须定义强制文本在一行显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。text-overflow属性格式如下：text-overflow:clip|ellipsis|string;text-overflow属性值如表所示。属性值属性值说说 明明clip简单地修剪文本，不显示省略标记ellipsis当对象内文本溢出时显示省略标记string使用给定的

9、字符串来代表被修剪的文本CSS 3美化文本8.设置文本控制换行当在一个指定区域显示的一行文本过长，一行内显示不完时，就需要进行换行设置。在CSS 3中使用word-wrap属性来控制文本换行。word-wrap属性格式如下：word-wrap:normal|break-word;word-wrap属性值如表所示。属性值属性值说说 明明normal只在允许的断字点换行（浏览器保持默认处理）break-word内容将在边界内换行CSS 3美化文本8.设置文本控制换行【例7-2】CSS3美化文本实例，代码如下所示（示例文件7-2.html）。CSS3美化文本bodyfont-family:微软雅黑;

10、font-size:14px;pcolor:rgb(200,60,0);中国梦始信泥土有芬芳 (font-weight:bold;)转眼捏成这般模样 (font-weight:bolder;)你是女娲托生的精灵 (font-weight:lighter;)你是夸父追日的梦想 (font-weight:normal;)让我轻轻走过你的跟前 (font-weight:100;)沐浴着你童真的目光 (font-weight:400;)让我牵手与你同行 (font-weight:900;)小脚丫奔跑在希望的田野上 (fon

11、t-size:80%;)啊，中国 (font-style:inherit;)我的梦 (font-style:italic;)梦正香 (font-style:oblique;)在chrome浏览器中预览CSS 3美化文本9.设置在线字体在CSS 3之前，网页设计师在使用字体时，必须保证使用的字体在用户的计算机中也已安装好，才能正确还原设计者的字体设计意图。现在通过CSS3，网页设计师可以使用任意字体，可将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。格式如下：font-face font-family:;src:,*;font-wei

12、ght:;font-style:;CSS 3美化文本9.设置在线字体YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:YourWebFontName;”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；weight和style:这两个值大家一定

13、很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。CSS 3美化文本9.设置在线字体【例7-3】CSS3在线字体实例，代码如下所示（示例文件7-3.html）。CSS 3在线字体 font-facefont-family:TestFont;src:url(fonts/Sansation_Light.ttf);divfont-family:TestFont;font-size:60px;color:#f00;CSS 3 Web Font在chrome浏览器中预览CSS 3美化文本10.设置旋转特效transform属性能够设置元素的旋转,向元素应用2D或3D转换。该属性

14、允许我们对元素进行旋转、缩放、移动或倾斜。其属性值有很多，包括rotate()/skew()/scale()/translate(,)，分别还有x、y之分，比如：rotatex()和 rotatey()，以此类推。在此简单介绍一下ratate值。格式如下：transform:rotate(angle单位为deg);定义2D旋转在参数中规定角度,angle表示角度。CSS 3美化段落1.设置词间距在网页设计中，如果单词之间的间隔设置合理，将给人赏心悦目的感觉。在CSS 3中使用word-spacing属性定义增加或者减少词与词之间的间隔。格式如下：word-spacing:normal|leng

15、th;word-spacing属性值如表所示。属性值属性值说说 明明normal默认值，定义单词之间的标准间隔length定义单词之间的固定宽度，可取正负值，单位为像素CSS 3美化段落2.设置字间距在CSS 3中使用letter-spacing来定义文本之间的距离，格式如下：letter-spacing:normal|length;letter-spacing属性值如表所示。属性值属性值说说 明明normal默认间隔，以标准间隔显示length由浮点数和单位标识符组成的长度值，可取正负值，单位为像素CSS 3美化段落3.设置文本修饰效果在CSS 3中，使用text-decoration属性可

16、以为文本设置多种修饰效果，如下划线、删除线等，格式如下：text-decoration:属性值;text-decoration属性值如表所示。属性值属性值说说 明明none默认值，对文本不进行任何修饰，用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式overline上划线underline下划线line-through删除线blink闪烁CSS 3美化段落3.设置文本修饰效果【例7-4】CSS 3美化段落实例一，代码如下所示（示例文件7-4.html）。CSS3美化段落例1pline-height:10px;始信泥土有芬芳转眼捏成这般模样你是女娲托生的精灵你是夸父追日的梦想Let me

17、 gently walk past you.Bathed in your childlike eyes.Let me walk through your eyes.Small feet running in the field of hope.Well,ChinaMy dream!The dream is fragrant.在chrome浏览器中预览CSS 3美化段落4.设置文本的垂直对齐方式在CSS 3中，使用vertical-align属性设置垂直对齐方式，此属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值。在表单元格中，此属性可设置单元格内容的对齐方式

18、。格式如下：vertical-align:属性值;vertical-align属性值如表所示。属性值属性值说说 明明baseline默认，元素放在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top元素的顶端与行中最高元素的顶端对齐text-top元素的顶端与父元素字体的顶端对齐middle此元素放在父元素的中部bottom元素的顶端与行中最低元素的顶端对齐text-bottom把元素的底端与父元素字体的底端对齐length设置元素的堆叠顺序%使用 line-height 属性的百分比值来排列此元素，允许使用负值inherit从父元素继承 vertical-align 属性

19、的值CSS 3美化段落5.设置文本的水平对齐方式文本除了垂直对齐方式外，还有水平对齐方式，包括水平方向上的居中、左对齐、右对齐等。在CSS 3中，使用text-align属性可定义文本的水平对齐方式，格式如下：text-align:属性值;text-align属性值如表所示。属性值属性值说说 明明start文本向行的开始边缘对齐end文本向行的结束边缘对齐left文本向行的左边缘对齐，默认值right文本向行的右边缘对齐center文本在行内居中对齐justify文本根据text-justify的属性值设置分散对齐inherit继承父元素的对齐方式CSS 3美化段落6.设置文本大小写转换在文本

20、编辑中，根据需要将大写字母转换为小写字母，或将小写字母转换为大写字母，都是非常常见的。在CSS 3中，使用text-transform属性可定义文本的大小写转换，格式如下：text-transform:属性值;text-transform属性值如表所示。属性值属性值说说 明明none无转换capitalize将每个单词的第一个字母转换成大写，其余不转换uppercase转换成大写lowercase转换成小写CSS 3美化段落7.设置文本的行高在CSS 3中，使用line-height属性可定义文本的行高，即一行的高度，格式如下：line-height:属性值;line-height属性值如表所

21、示。属性值属性值说说 明明normal默认行高，即网页文本的标准行高length百分比数值或由浮点数和单位标识符组成的长度值，可以为负值CSS 3美化段落8.设置文本的缩进在段落文本中通常使用首行缩进两个字符的方式，来表示段落的开始。在CSS 3中，使用text-indent属性定义文本块中的首行缩进，格式如下：text-indent:length;其中，length属性值表示由百分比数值或由浮点数和单位标识符组成的长度值，可以为负值。也就是说使用text-indent属性上课以定义两种缩进方式，一种是直接定义缩进的长度，另一种是定义缩进的百分比。CSS 3美化段落9.设置文本的空白处理在CS

22、S 3中，使用white-space属性定义对字符串或文本间空白的处理方式，格式如下：white-space:属性值;white-space属性值如表所示。属性值属性值说说 明明normal默认值，空白会被浏览器忽略pre空白会被浏览器保留nowrap文本不会换行，文本会在同一行上继续，直到遇到标签为止pre-wrap保留空白，但是正常地进行换行pre-line合并空白，但是保留换行符inherit从父元素继承white-space属性值CSS 3美化段落10.设置文本的反排在编辑网页文本时，通常文档的基本方向是从左到右，有时需要将文档的方向显示为从右到左，在CSS 3中，通过unicode-

23、bidi和direction两个属性来解决文本反排的效果。unicode-bidi格式如下：unicode-bidi:属性值;unicode-bidi属性值如表所示。属性值属性值说说 明明normal默认值。元素不会打开附加的一层嵌套，对于行内元素，顺序的隐式重排会跨元素边界进行embed如果是一个行内元素，将会打开附加的一层嵌套，这个嵌套层的方向由 direction 属性指定，会在元素内部隐式地完成顺序重排bidi-override这会为行内元素创建一个覆盖，对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算

24、法的隐式部分。CSS 3美化段落10.设置文本的反排direction属性用于设置文档流的方向，其格式如下：direction:属性值;direction属性值如表所示。属性值属性值说说 明明ltr文本流从左到右rtl文本流从右到左inherit文本流的值不可继承CSS 3美化段落10.设置文本的反排【例7-5】CSS 3美化段落实例二，代码如下所示（示例文件7-5.html）。CSS3美化段落例2pline-height:8px;中国梦始信泥土有芬芳转眼捏成这般模样你是女娲托生的精灵你是夸父追日的梦想Let me gently walk past you.Bathed in your chi

25、ldlike eyes.Let me walk through your eyes.Small feet running in the field of hope.Well,China My dream!The dream is fragrant.在chrome浏览器中预览CSS 3美化图片1.图片大小在HTML 5网页排版中，设置图片的大小有三种方法，分别是：（1）通过描述标记width和height缩放图片。通过img标签的width和height属性来设置图片的大小。width和height分别表示图片的宽度和高度，可以是数值或百分比，单位可以是px。（2）使用CSS3中的max-wid

26、th和max-height缩放图片。max-width和max-height分别来设置图片的宽度最大值和高度最大值。在定义图片大小时，如果图片的默认尺寸超过了定义的大小，就以max-width所定义的宽度值显示，图片的高度将同比例变化，如果定义的是max-height的值，图片的宽度将同比例变化。如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。（3）使用CSS3中的width和height缩放图片。在CSS3中可以使用width和height属性来设置图片的宽度和高度，从而实现对图片的缩放效果。如果仅仅设置了图片的一个属性值（width或者height），而没有设置另一个属性值

27、时，图片本身会自动等比例缩放。CSS 3美化图片1.图片大小【例7-6】CSS美化网页图片实例，代码如下所示（示例文件7-6.html）。CSS美化网页图片#img02max-width:150px;#img03width:75px;height:75px;在chrome浏览器中预览CSS 3美化图片2.设置图片的对齐方式在一个图文页面中，图片对齐方式和文字排版同样影响页面的整洁简约。下面学习使用CSS 3属性定义图文对齐方式。设置图片水平对齐text-align图片的水平对齐方式和文本的水平对齐方式类似，都有左、中、右三种对齐方式。由于标签本身没有对齐属性，所以要定义图片的对齐方式，不能对标

28、签直接定义图片样式，需要在图片的上一级标签（父标签）定义对齐方式，让图片继承父标签的对齐方式，即使用CSS继承父标签的text-align属性来定义对齐方式。CSS 3美化图片2.设置图片的对齐方式text-align属性取值如表所示。text-align属性值属性值说明说明left默认值，左对齐center居中对齐right右对齐CSS 3美化图片2.设置图片的对齐方式【例7-7】图片的水平对齐实例，代码如下所示（示例文件7-7.html）。图片的水平对齐方式imgwidth:75px;height:75px;图片左对齐图片居中对齐图片右对齐在chrome浏览器中预览CSS 3美化图片2.设

29、置图片的对齐方式设置图片垂直对齐vertical-align通过对图片的垂直对齐方式的设置，可以设置图片和文字的高度一致，在CSS 3中使用vertical-align属性来定义。vertical-align属性设置元素的垂直对齐方式，就是定义行内元素和基线相对于该元素所在行的基线的垂直对齐，允许指定负值和百分比值，就会使元素降低。vertical-align属性常用取值如表所示。vertical-align属性取值属性取值说明说明top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部baseline默认，元素放置在父元素的基线上bottom把元素的底端与行中最底的元

30、素底端对齐CSS 3美化图片2.设置图片的对齐方式【例7-8】图片的垂直对齐实例，代码如下所示（示例文件7-8.html）。图片的垂直对齐方式pborder:1px red solid;margin-top:5px;imgwidth:75px;height:75px;垂直对齐方式：vertical-align:top;垂直对齐方式：vertical-align:middle;垂直对齐方式：vertical-align:bottom;在chrome浏览器中预览CSS 3图文混排1.设置图文环绕效果在CSS 3中，使用浮动属性float可以设置文字环绕效果。float属性主要是定义元素向哪个方向上

31、浮动，浮动的元素不管它是哪种元素，都会生成一个块。一般情况下，此属性总应用于图像，使文字环绕在图像周围，有时也可以应用于其他元素浮动，但需要指定一个明确的宽度，否则此元素会尽可能变窄。float属性的取值如表所示。float属性值属性值说明说明none默认值，元素不浮动left元素向左浮动right元素向右浮动CSS 3图文混排2.设置图片和文字的间距如果需要设置图片和文字之间的距离，即文字之间存在一定间距，可以使用CSS3中的padding属性来设置。padding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置个边上内边距的宽度。padding属性的语法

32、格式如下：padding:padding-top|padding-right|padding-bottom|padding-left参数值padding-top用来设置距离顶部的内边距；padding-right用来设置距离右部的内边距；padding-bottom用来设置距离底部的内边距；padding-left用来设置距离左部的内边距。CSS 3图文混排2.设置图片和文字的间距【例7-9】图文混排实例，代码如下所示（示例文件7-9.html）。图文混排pfont-size:14px;text-indent:28px;imgwidth:200px;float:right;border:1px

33、 red solid;padding-top:10px;padding-bottom:30px;padding-left:50px;这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。路上只我一个

34、人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。在chrome浏览器中预览三 项目实施图文混排；图片特效制作。图文混排通过此项目的学习，学习到CSS 3的文本、段落、图片的属性设置，结合这些知识制作一个图文混排的实例。图文混排bodyfont-family:微软雅黑,黑体;font-size:14px;divborder:2px red solid;pad

35、ding:10px;#img01float:right;text-align:center;#img01 imgwidth:250px;设置了ID为“img01”的div块中img标签宽度为250像素（#img01 imgwidth:250px;）。设置了ID为“img01”的div块向右浮动（float:right;）、居中对齐（text-align:center;），实现了文字和图片的环绕效果。设置了图片的边框为2像素的红色实线（border:2px red solid;）、四个方向的内边距清除10像素（padding:10px;）。图文混排启动Sublime程序，新建并保存文件名称为7-

36、10.html。第一步第二步Head标签内的代码输入如下：内嵌式Css样式部分。设置了页面字体为微软雅黑或黑体（font-family:微软雅黑,黑体;）、文字大小14像素（font-size:14px;）。图文混排第三步body标签内的代码输入如下：CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。右边的图片说明了盒子模型(Box Model)：盒子模型不同部分的说

37、明：Margin(外边距)-清除边框外的区域，外边距是透明的。Border(边框)-围绕在内边距和内容外的边框。Padding(内边距)-清除内容周围的区域，内边距是透明的。Content(内容)-盒子的内容，显示文本和图像。元素的宽度和高度最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距使用了标题标签h2并居中显示标题。设置了段落首行缩进28像素。将图片和文字放置在div块中。使用了无序列表。使用了自定义列表。图文混排再次保存文件后，在页

38、面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步图片特效制作图片在网页设计中越来越被重视，利用CSS属性可以制作出绚丽的图片特效，满足客户的视觉体验，此项目实施就是制作一个图片特效实例。body margin:30px;background-color:#CCC;.photowidth:290px;padding:10px;margin:10px;border:1px solid#BFBFBF;background-color:#FFF;box-shadow:10px 10px 10px#999999;/*图片阴影的设置*/.r_leftfloat:left;tra

39、nsform:rotate(8deg);/*图片向右倾倒*/imgwidth:290px;height:215px;.r_right float:left;transform:rotate(-8deg);/*图片向左倾倒*/图片特效制作用Sublime编辑器新建并保存文件7-11.html。第一步第二步Head标签内的CSS代码输入如下：内嵌式Css样式部分，主要实现了图片阴影和div块的旋转效果。设置了body元素的背景颜色为灰色（background-color:#CCC;）、上下左右的外边距为30像素（margin:30px;）。设置了类名为“photo”的div块的宽度为290像素、内

40、边距为10像素、外边距为10像素、边框为1像素的深灰色实线、背景颜色为白色以及设置了为水平右移10像素、垂直下移10像素、模糊距离为10像素深灰色的阴影。分别设置了图片向左、向右的倾斜。第20、25行定义了类名为“r_left”和“r_right”的div块向左浮动。第21、26行定义了两个div块分别向右、向左旋转了8度。当margin的属性值为一个值是，表示上下左右四个边的值都相同；当margin的属性值为两个值时，第一个值表示上下外边距的值，第二个值表示左右外边距的值；当margin的属性值为三个值时，第一个值表示上外边距的值，第二个值表示左右外边距的值，第三个值表示下外边距的值；当ma

41、rgin的属性值为四个值时，第一个值表示上外边距的值，第二个值表示右外边距的值，第三个值表示下外边距的值，第四个值表示左外边距的值。图片特效制作第三步body标签内的HTML代码输入如下：唯有牡丹真国色，花开时节动京城。我像只鱼儿在你的荷塘，只为和你守候那皎白月光。创建了两个div块，在div块中分别放置了一张图片和一段文字。图片特效制作再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展在上面的项目实施中，学习制作了图文混排和CSS图片特效两个实例，掌握了图片、文字排版的技巧，下面制作文字、图片列表排列的实例，来巩固提高本项目所学知识。

42、四 项目拓展启动Sublime程序，新建并保存文件名称为7-12.html。第一步第二步Head标签内的CSS代码输入如下：bodybackground-color:#ccc;ulmargin:0 auto;width:600px;overflow:hidden;list-style:none;lifloat:left;padding:4px 8px;width:120px;background-color:#fff;margin:2px 2px;imgdisplay:block;width:120px;overflow:hidden;设置了body元素的背景颜色为灰色。设置了无序列表的上下外

43、边距为0像素及左右自动、宽度为600像素、溢出隐藏、列表样式为无。设置了li标签向左浮动、上下内边距为4像素及左右内边距为8像素、宽度为120像素、背景颜色为白色、上下外边距为2像素及左右外边距为2像素。设置了img为块元素、宽度为120像素、溢出隐藏。CSS部分主要完成了无序列表ul、列表项li、图片img、行内标签span和超链接标签a及img标签的hover的样式。使用无序列表的列表项li标签实现图片和文字的行内排列，在限定ul宽度的情况下，使用左浮动的方法让多个li标签排成两行。四 项目拓展第二步atext-decoration:none;color:#666;a:hovercolor

44、:#f60;img:hoveropacity:0.5;spandisplay:block;width:100%;height:100%;line-height:16px;text-align:center;margin:10px auto;font-size:12px;设置了a标签链接下划线为无、文本颜色为#666。设置了当鼠标移动到img标签上的时候，img标签的不透明度为0.5。设置了span标签为块元素、宽度为100%、高度为100%、行高为16像素、文本居中对齐、上下外边距为10像素及左右自动、文字大小为12像素。设置了当鼠标移动到a标签上的时候，a标签的文本颜色为#f60。四 项目拓

45、展第三步2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣body标签内的HTML代码输入如下：使用无序列表的列表项li标签实现图片和文字的行内排列。在列表项li中创建了图片和文本的超链接。四 项目拓展第三步2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣2017秋冬长袖针织高领打底衫毛衣四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了图文混排、图片特

46、效制作和图片、文字列表排列三个案例，学习了使用CSS3对文本、段落和网页图片的美化方法，以及图文混排效果的实现方法。五 项目小结本项目主要知识点总结如表所示。CSS 3图文混排知识点总结知识点知识点属性属性说明说明美美化化文文本本设置文本字体font-family定义文本的字体类型设置文本大小font-size定义文本的大小设置文本的粗细font-weight定义文本的粗细程度设置文本颜色color定义文本的颜色设置文本样式font-style定义文本的样式设置文本阴影效果 text-shadow定义文字的阴影效果设置文本溢出效果 text-overflow定义当文本溢出时是否显示省略标记设置

47、文本控制换行 word-wrap控制文本换行设置在线字体font-face font-family:;src:;font-weight:;font-style:;通过CSS3可以使用任意字体，将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。设置旋转特效transform对元素进行旋转、缩放、移动或倾斜五 项目小结本项目主要知识点总结如表所示。CSS 3图文混排知识点总结知识点知识点属性属性说明说明美美化化段段落落设置词间距word-spacing定义增加或者减少词与词之间的间隔设置字间距letter-spacing定义文本之间的距离设置文本修饰效果text-de

48、coration为文本设置多种修饰效果，如下划线、删除线等设置文本的垂直对齐方式vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值设置文本的水平对齐方式text-align定义文本的水平对齐方式设置文本大小写转换text-transform根据需要将大写字母转换为小写字母，或将小写字母转换为大写字母设置文本的行高line-height定义文本的行高设置文本的缩进text-indent定义文本块中的首行缩进设置文本的空白处理white-space定义对字符串或文本间空白的处理方式设置文本的反排unicode-bidi和direction解

49、决文本反排的效果美美化化网网页页图图片片图片尺寸width和height、max-width和max-height设置图片的宽度和高度、设置图片的宽度最大值和高度最大值设置图片的对齐方式text-align、vertical-align定义图文对齐方式图图文文混混排排设置元素浮动float设置元素浮动设置元素的内边距padding设置元素的内边距六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise7.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。End