工信版（中职）Web前端设计基础 项目七-3电子课件
2022-10-25
|
24页
|
100人阅读
|
6人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.83 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574066.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目七-3电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3图文混排
项目七
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
三 项目实施
图文混排；
图片特效制作。
图文混排
通过此项目的学习，学习到CSS 3的文本、段落、图片的属性设置，结合这些知识制作一个图文混排的实例。
<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块中img标签宽度为250像素（#img01 img{width: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;）。
图文混排
第三步
body标签内的代码输入如下：
<body>
<h2 align="center">CSS 盒子模型(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="img01"><img src="images/02.jpg" alt=""><br>盒子模型</div>
<p>不同部分的说明：</p>
<ul>
<li>Margin(外边距) - 清除边框外的区域，外边距是透明的。</li>
<li>Border(边框) - 围绕在内边距和内容外的边框。</li>
<li>Padding(内边距) - 清除内容周围的区域，内边距是透明的。</li>
<li>Content(内容) - 盒子的内容，显示文本和图像。</li>
</ul>
<h3>元素的宽度和高度</h3>
<dl>
<dt>最终元素的总宽度计算公式是这样的：</dt>
<dd>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</dd>
<dt>元素的总高度最终计算公式是这样的：</dt>
<dd>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</dd>
</dl>
</body>
使用了标题标签h2并居中显示标题。
设置了段落首行缩进28像素。
将图片和文字放置在div块中。
使用了无序列表。
使用了自定义列表。
图文混排
再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。
第四步
图片特效制作
图片在网页设计中越来越被重视，利用CSS属性可以制作出绚丽的图片特效，满足客户的视觉体验，此项目实施就是制作一个图片特效实例。
<style type="text/css">
body{
margin:30px;
background-color:#CCC;
}
.photo{
width:290px;
padding:10px;
margin:10px;
border:1px solid #BFBFBF;
background-
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。