上QQ阅读APP看书，第一时间看更新
5.5 综合案例2——制作简单图文混排网页
在一个网页中，出现最多的就是文字和图片，二者放在一起，图文并茂，能够生动地表达新闻主题。本案例创建一个图片与文字的简单混排页。具体步骤如下所示。
step 01 分析需求。本综合案例的要求如下：在网页的最上方显示出标题，标题下方是正文，在正文部分显示图片。在设计这个网页标题时，其方法与上面案例相同。使用CSS样式属性实现上述要求，其案例效果如图5-13所示。
图5-13 图文混排显示
step 02 分析布局并构建HTML。创建一个HTML页面，并用DIV将页面划分两个层，一个是网页标题部分，另一个是正文部分。
step 03 导入CSS文件。在HTML页面，将CSS文件使用link方式导入到HTML页面中。此CSS页面定义了该页面的所有样式，其导入代码如下所示。
<link href="CSS.css" rel="stylesheet" type="text/css" />
step 04 完成标题部分。设置网页标题部分，创建一个div，用来放置标题。其HTML代码如下所示。
<div> <h1>【3.8节活动】《妈咪妈咪看过来——说说孕期那些事儿》 </h1> </div>
在CSS样式文件中，修饰HTML元素，其CSS代码如下所示。
h1{text-align:center;text-shadow:0.1em 2px 6px blue;font-size:18px;}
step 05 完成正文和图片部分。下面设置网页正文部分，正文中包含了一张图片。其HTML代码如下所示。
<div> <p>活动主题：《妈咪妈咪看过来——说说孕期那些事儿》。 </p> <p> 活动时间：2017年2月28日——2017年3月9日10点 </p> <DIV class="im"> <img src="8.jpg" width="300" height="200"/> </DIV> <p>3月到来，万物复苏，终于可以脱掉寒冬时厚厚的棉衣，沐浴在春风和阳光之下，迎来了3月第一 个活动。怀孕对于每一个女性来说，都是人生经历中的最重要的一段旅程，随着孕期的进行，你会遇到 很多未曾遇见的怀孕体验，而这些体验正在等待被你发现和分享！这，就是本次的活动主题，妈妈和准 妈妈们还在等什么，Come on 快来e站分享出这段旅程~让帖子记录下那一撮幸福的记忆..... </p> </div>
CSS样式代码如下所示。
p{text-indent:8mm;line-height:7mm;}
.im{width:300px; float:left; border:#000000 solid 1px;}