グラフィックとテキストの混合制作

1、上下混合配置

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
</head>
<body>
<img src="1.jpg" width="200" border="2"/>
<p>蒙奇·D·路飞，是日本动漫《航海王》的男主角。草帽海贼团船长。由于他的标志性特征是一顶草帽，因此常被直接称呼为草帽小子或草帽路飞。梦想是找到传说中的One Piece，成为海贼王。
    性格积极乐观，爱憎分明且十分重视伙伴，对任何危险的事物都超感兴趣。看似白痴，却是一个大智若愚型的无愧船长之职的人。和其他传统的海贼所不同的是，他并不会为了追求财富而无故杀戮，而是享受着身为海贼的冒险。</p>
<hr />
</body>
</html>

操作効果:

微信图片_20180314133110.png

#2、左右混合配置:##

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
</head>
<body>
<hr />
<img src="1.jpg" width="200" border="2" align="left" hspace="20" vspace="10" alt="PHP中文网"/>
<p>蒙奇·D·路飞，是日本动漫《航海王》的男主角。草帽海贼团船长。由于他的标志性特征是一顶草帽，因此常被直接称呼为草帽小子或草帽路飞。梦想是找到传说中的One Piece，成为海贼王。
    性格积极乐观，爱憎分明且十分重视伙伴，对任何危险的事物都超感兴趣。看似白痴，却是一个大智若愚型的无愧船长之职的人。和其他传统的海贼所不同的是，他并不会为了追求财富而无故杀戮，而是享受着身为海贼的冒险。</p>
</body>
</html>

実行結果は次のとおりです:

学び続ける