Small case of essay website layout

Small case of essay website layout:

Plain text will look boring, but the addition of pictures can stimulate the readers’ senses and trigger reading interest. This reflects the importance of matching images and text. This case outputs an article titled "Youth is the most beautiful encounter" through text and image styles.

a) Add a few paragraphs of text in the editor.

b) Set styles for each piece of text separately.

c) Insert the image and adjust the spacing between the image and text as required.

Use firefox browser to debug.

The code is as follows:

<!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>

is displayed as follows:

微信图片_20180314135747.png

Continuing Learning

new file

<?php echo "杂文网布局小案例";

submit Reset Code

Automatic operation

Small case of essay website layout

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]