2.7 综合练习——制作图文混排新闻页面

现在要制作一个介绍保时捷911新车的新闻页面，页面效果如图2-10所示。

图2-10 图文混排新闻页面效果

假设要制作的网页文件名是“911.html”，网页中的图片保存在与“911.html”同一文件夹中的“images”文件夹中，图片的名字分别是“1.jpg”和“2.jpg”。制作网页，首先定义网页头部，代码如下：

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>【图】轴距或加长新一代保时捷911谍照曝光_汽车之家</title> <meta name="keywords" content="轴距或加长新一代保时捷911谍照曝光"> <meta name="description" content="轴距或加长新一代保时捷911谍照曝光"> </head>

然后在<body>标签内定义内容（下面所有代码都放在<body>内），首先在<body>内添加新闻的标题：

以上代码在<h1>标签的style属性内定义了height这个css属性，即定义h1元素的高度为49 px；定义了CSS属性：line-height，其值同样为49 px，将line和line-height设置为相同的值，可以使标签里的内容在标签内达到“垂直居中”的效果。CSS属性font-family设置字体为“微软雅黑”，其他CSS属性前文有过介绍，不再重复。

在标题后显示新闻作者、时间、来源等：

以上代码在<div>标签中主要定义了CSS属性text-align，使div中的内容在<div>内“水平居中”，通过转义字符"  "在不同<span>标签间增加空白距离。

正文每一个段落用一个<p>标签，第一个段落：

<p style="line-height:28px; font-size:16px; color:#333; text-indent:32px; "> [<a class="ShuKeyWordLink" href="detail_29_31_100.html" target="_blank"> 汽车之家</a> 海外谍照]  日前，海外媒体抓拍到了新一代保时捷911（992）的冬季路试谍照，新车仍延续保时捷911车系的经典外观造型，尾部换装了贯穿式尾灯以示创新。据海外媒体推测，新车的轴距有望小幅加长，我们最早能在2018年下半年一睹这款车的真面目。</p>

第一个段落后增加一条橙色水平线：

然后显示两张图片，由于图片不是块元素，如果图片尺寸不够，两张图片将位于同一行，在本网页里，将每张图片放在一个<p>中：

在网页的最后添加最后一个段落：

<p style="line-height:28px; font-size:16px; color:#333; text-indent:32px; ">保时捷官方承认新一代保时捷911将引入混动技术，但不会推出纯电动版本。新车将于2018年下半年首发，并在年底前上市。在此之前保时捷的车迷们也不必过于焦急等待，同样重磅的现款保时捷911（991.2） GT3和GT2高性能版本会在未来几个月内陆续公布。（信息来源：motor1；编译/汽车之家张晓丹）</p>

至此，新闻页面制作完成，请读者自行编写代码，在浏览器中查看显示效果，并尝试在每张图下面为图添加名称，图名水平居中。