《工信版（中职）Web前端设计基础 项目七-3电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目七-3电子课件.pptx（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）Web前端设计基础 项目七-3电子课件CSS 3图文混排项目七授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施图文混排；图片特效制作。图文混排通过此项目的学习，学习到CSS 3的文本、段落、图片的属性设置，结合这些知识制作一个图文混排的实例。图文混排bodyfont-family:微软雅黑,黑体;font-size:14px;divborder:2px red solid;padding:10px;#img01float:right;text-align:center;#img01 imgwidt
2、h: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-10.html。第一步第二步Head标签内的代码输入如下：内嵌式Css样式部分。设置了页面字体为微软雅黑或黑体（font-family:微软雅黑,黑体;）、文字大小14像素（font-size:14px;）。