Web前端开发简明教程
首页 > Web前端开发简明教程 > 2.7 综合练习——制作图文混排新闻页面

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

2020-10-12 17:35:00 33 0

编辑 收藏

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

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

20201012_174947_012.jpg  

图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>内添加新闻的标题:

20201012_174947_014.jpg

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

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

20201012_174947_013.jpg

以上代码在<div>标签中主要定义了CSS属性text-align,使div中的内容在<div>内“水平居中”,通过转义字符"&nbsp; "在不同<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> 海外谍照]&nbsp; 日前,海外媒体抓拍到了新一代保时捷911(992)的冬季路试谍照,  新车仍延续保时捷911车系的经典外观造型,尾部换装了贯穿式尾灯以示创新。据海外媒体推测,新车  的轴距有望小幅加长,我们最早能在2018年下半年一睹这款车的真面目。</p>

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

<hr color="#ff6600"/>

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

<p align="center">            <img width="620" height="348" alt="汽车之家" src="../Images/1.jpg" ></a>      </p>      <p align="center">            <img width="620" height="348" alt="汽车之家" src="../Images/2.jpg" ></a>      </p>

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

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

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

TAGS:前端教程

取消回复欢迎 发表评论: