雜文網佈局小案例

雜文網佈局小案例:

#純文字看著會很枯燥，而圖片的加入能夠刺激讀者的感官，引發閱讀興趣。這體現了圖像與文字配合的重要性。本案例透過文字和圖像樣式輸出一段題為《青春是最美好的相遇》的文章。

a) 在編輯器中加入幾段文字。

b) 分別為每一段文字設定樣式。

c) 插入影像，依照要求調整圖片和文字之間的間距。

用firefox瀏覽器進行偵錯。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
</head>
<body>
<p align="center"><strong>青春是最美好的相遇</strong></p>
<p>　　在威斯敏斯特教堂旁边，矗立着一块墓碑，上面刻着一段非常著名的话：“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </p>
<p align="right"><em>——题记</em></p>
<img src="5.jpg" width="200" align="left" vspace="20" hspace="20"/>
<h3>　　<div style="color: red">1. 我们的相遇</div></h3>
<p>　　漫漫青春路，多少岔路口，青春蹉跎，机会错过。而我，庆幸遇上了PHP中文网。</p>
<h3><div style="color: red">2. 我的感恩</div></h3>
<p>　　敲完最后一行代码，走出办公室，站在曾经觉得特别高大上的落地窗前，看着倒影中的自己，虽说有点累，但感到特别充实，许久没有过这种踏实和平静的感觉。我喜欢并珍惜作为女程序员的日子。这一切，都要感谢PHP中文网以及PHP中文网的每一位老师。</p>
<img src="6.jpg" width="200" align="right" vspace="20" hspace="20"/>
<h3>　　<div style="color: red">3. 梦想开花</div></h3>
<p>　　我庆幸在最美的年华、最渴望改变的时候遇到了PHP中文网，庆幸遇上了PHP中文网的老师，因为你们的专业和专注，才成就了我向往的IT梦，才让我在青春的路上开满了理想的花。在此真心感谢PHP中文网的每一位老师，纵然时光荏苒，师恩永远铭记在心。</p>
</body>
</html>

展示如下:

微信图片_20180314135747.png