雜文網(wǎng)布局小案例
雜文網(wǎng)布局小案例:
純文本看著會(huì)很枯燥，而圖片的加入能夠刺激讀者的感官，引發(fā)閱讀興趣。這就體現(xiàn)了圖像與文本配合的重要性。本案例通過(guò)文本和圖像樣式輸出一段題為《青春是最美好的相遇》的文章。
a)?在編輯器中添加幾段文本。
b)?分別給每一段文本設(shè)置樣式。
c)?插入圖像，根據(jù)要求調(diào)整圖片和文字之間的間距。
用firefox瀏覽器進(jìn)行調(diào)試。
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHP中文網(wǎng)</title> </head> <body> <p align="center"><strong>青春是最美好的相遇</strong></p> <p> 在威斯敏斯特教堂旁邊，矗立著一塊墓碑，上面刻著一段非常著名的話(huà)：“當(dāng)我年輕的時(shí)候，我夢(mèng)想改變這個(gè)世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界，我將目光縮短了些，決定只改變我的國(guó)家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國(guó)家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時(shí)，我突然意識(shí)到：如果一開(kāi)始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵(lì)下，我可能為國(guó)家做一些事情；然后，誰(shuí)知道呢?我甚至可能改變這個(gè)世界?！?nbsp;</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> 漫漫青春路，多少岔路口，青春蹉跎，機(jī)會(huì)錯(cuò)過(guò)。而我，慶幸遇上了PHP中文網(wǎng)。</p> <h3><div style="color: red">2. 我的感恩</div></h3> <p> 敲完最后一行代碼，走出辦公室，站在曾經(jīng)覺(jué)得特別高大上的落地窗前，看著倒影中的自己，雖說(shuō)有點(diǎn)累，但感到特別充實(shí)，許久沒(méi)有過(guò)這種踏實(shí)和平靜的感覺(jué)。我喜歡并珍惜作為女程序員的日子。這一切，都要感謝PHP中文網(wǎng)以及PHP中文網(wǎng)的每一位老師。</p> <img src="6.jpg" width="200" align="right" vspace="20" hspace="20"/> <h3> <div style="color: red">3. 夢(mèng)想開(kāi)花</div></h3> <p> 我慶幸在最美的年華、最渴望改變的時(shí)候遇到了PHP中文網(wǎng)，慶幸遇上了PHP中文網(wǎng)的老師，因?yàn)槟銈兊膶?zhuān)業(yè)和專(zhuān)注，才成就了我向往的IT夢(mèng)，才讓我在青春的路上開(kāi)滿(mǎn)了理想的花。在此真心感謝PHP中文網(wǎng)的每一位老師，縱然時(shí)光荏苒，師恩永遠(yuǎn)銘記在心。</p> </body> </html>
展示如下:
