上QQ阅读APP看书，第一时间看更新
5.4 综合案例1——制作学校宣传单
每年暑假，我们都能看到高校招收学生的宣传页，本节就来制作一个学校宣传页，从而加固图文混排的相关CSS知识。具体步骤如下所示。
step 01 分析需求。本案例包含两部分，一部分是图片信息，介绍学校场景；另一部分是段落信息，介绍学校历史和理念。这两部分都放在一个div中。案例完成后，效果如图5-8所示。
图5-8 宣传效果图
step 02 构建HTML网页。创建HTML页面，页面中包含一个div，div中包含图片和两个段落信息。其代码如下所示。
<html>
<head>
<title>学校宣传单</title>
</head>
<body>
<div>
<img src="04.jpg" /><p>某大学风景优美</p><p> 学校发扬“百折不挠、艰苦创业”的办
学传统，坚持“质量立校、人才兴校、创新强校、文化铸校、和谐荣校”的办学理念，弘扬“爱国荣
校、民主和谐、求真务实、开放创新”的精神</p>
</div>
</body>
</html>
在IE 11.0浏览器中浏览效果如图5-9所示，可以看到在网页中的标题和内容。
图5-9 HTML页面显示
step 03 添加CSS代码，修饰div。
<style>
big{
width:430px;
}
</style>
在HTML代码中，将big样式引用到div中，代码如下所示。
<div class=big>
<img src="xuexiao.jpg" /><p>某大学风景优美</p><p> 学校发扬“百折不挠、艰苦创
业”的办学传统，坚持“质量立校、人才兴校、创新强校、文化铸校、和谐荣校”的办学理念，弘扬
“爱国荣校、民主和谐、求真务实、开放创新”的精神</p>
</div>
在IE 11.0浏览器中浏览效果如图5-10所示，可以看到在网页中段落以块的形式显示。
图5-10 修饰div层
step 04 添加CSS代码，修饰图片。
在IE 11.0浏览器中浏览效果如图5-11所示，可以看到在网页中图片以指定大小显示，并且带有边框，在左面浮动。
图5-11 修饰图片
step 05 添加CSS代码，修饰段落。
p{
font-family:"宋体";
font-size:14px;
line-height:20px;
}
在IE 11.0浏览器中浏览效果如图5-12所示，可以看到在网页中段落以宋体显示，大小为14像素，行高为20像素。
图5-12 修饰段落