（中职）Web前端设计基础 项目七-3电子课件.pptxVIP

（中职）Web前端设计基础 项目七-3电子课件正版可修改PPTYCFWEB前端设计基础CSS 3图文混排项目七授课教师：姓名Contents5.项目小结3.项目实施1.项目描述2.知识准备6.技能训练4.项目拓展三 项目实施图文混排；图片特效制作。图文混排通过此项目的学习，学习到CSS 3的文本、段落、图片的属性设置，结合这些知识制作一个图文混排的实例。图文混排第一步启动Sublime程序，新建并保存文件名称为7-10.html。设置了页面字体为微软雅黑或黑体（font-family: 微软雅黑,黑体;）、文字大小14像素（font-size: 14px;）。第二步Head标签内的代码输入如下：设置了图片的边框为2像素的红色实线（border:2px red solid;）、四个方向的内边距清除10像素（padding:10px;）。head meta charset=UTF-8 title图文混排/title style body{font-family: 微软雅黑,黑体;font-size: 14px;} div{border:2px red solid;padding:10px;} #img01{float: right;text-align: center;} #img01 img{width:250px;} /style/head设置了ID为“img01”的div块向右浮动（float: right;）、居中对齐（text-align: center;），实现了文字和图片的环绕效果。设置了ID为“img01”的div块中img标签宽度为250像素（#img01 img{width:250px;}）。内嵌式Css样式部分。图文混排设置了段落首行缩进28像素。将图片和文字放置在div块中。使用了标题标签h2并居中显示标题。使用了无序列表。使用了自定义列表。第三步body标签内的代码输入如下：body h2 align=centerCSS 盒子模型(Box Model)/h2 p style=text-indent: 28px;所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。/p p style=text-indent: 28px;CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。/p h3右边的图片说明了盒子模型(Box Model)：/h3 div id=img01img src=images/02.jpg alt=br盒子模型/div p不同部分的说明：/p ul liMargin(外边距) - 清除边框外的区域，外边距是透明的。/li liBorder(边框) - 围绕在内边距和内容外的边框。/li liPadding(内边距) - 清除内容周围的区域，内边距是透明的。/li liContent(内容) - 盒子的内容，显示文本和图像。/li /ul h3元素的宽度和高度/h3 dl dt最终元素的总宽度计算公式是这样的：/dt dd总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距/dd dt元素的总高度最终计算公式是这样的：/dt dd总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距/dd /dl /body图文混排第四步再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。图片特效制作图片在网页设计中越来越被重视，利用CSS属性可以制作出绚丽的图片特效，满足客户的视觉体验，此项目实施就是制作一个图片特效实例。图片特效制作当margin的属性值为一个值是，表示上下左右四个边的值都相同；当margin的属性值为两个值时，第一个值表示上下外边距的值，第二个值表示左右外边距的值；当margin的属性值为三个值时，第一个值表示上外边距的值，第二个值表示左右外边距的值，第三个值表示下外边距的值；当margin的属性值为四个值时，第一个值表示上外边距的值，第二个值表示右外边距的值，第三个值表示下外边距的值，第四个值表示左外边距的值。第一步用Sublime编辑器新建并保存文件7-11.html。第二步Head标签内的CSS代码输入如下：设置了body元素的背景颜色为灰色（background-color:#CCC;）、上下左右的外边距为30像素（margin:30px;）。style type=text/css body{ margin:30px; background-color:#CCC; } .photo{ width:290px; padding:10px; margin:10px; bord