ホームページ > 記事 > ウェブフロントエンド > htmlのテキスト折り返し解析例(html画像とテキストの混在配置)
Word でテキストを折り返す方法はわかりましたが、それを Web ページに実装するにはどうすればよいでしょうか?これは言葉で言うほど簡単ではありません。ただし、優れた HTML 要素を使用している限り、この効果を実現できます。 一般に、折り返しにはいくつかの種類があります。画像の周りのテキストの回り込み、テキストの周りのテキストの回り込みなどです。私が話したいのはこの二つです。さて、始めましょう
1. 画像の周囲にテキストを折り返す
通常のものを使用すると、たとえば:
コードは次のとおりです:
<TABLE cellpadding="15" width="200"> <TR> <TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>这里是普通的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD> </TR> </TABLE>
このようなステートメントでは、画像がテキストの高さよりも高くなります。 , テキストの上に空白スペースができます。ページの効果は非常に悪いです。どうやって解決すればいいでしょうか?このコードを見てください:
コードは次のとおりです:
<TABLE cellpadding="15" width="200"> <TR> <TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD> </TR> </TABLE>
この属性をimg要素に追加することで解決できます: align="center"、問題は解決されます。単純にする! hspace に関しては、画像と周囲の要素の幅を定義します。バイパスされるかどうかは関係ありません。
これはどうやって作られたのですか?まずこのコードを見てください:
コードは次のとおりです:
<table align=left cellspacing=0 cellpadding=0 width=200 border=1> <tr> <td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr> </table>
このような効果を実現するにはどうすればよいですか?
コードは次のとおりです:
<table align=left cellspacing=0 cellpadding=0 width=200 border=1> <tr> <td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr> </table>
このコードはそれを説明しています。賢い人なら、この表に拡大したい単語を入力するだけですぐにわかります。
しかし、テキストに背景色を付けたい場合は、どうすればよいでしょうか?ああ、あなたはとても賢いですね、次のようにテーブルに bgcolor 属性を追加します:
コードは次のとおりです:
<table align=left cellspacing=0 cellpadding=0 width=200 border=1> <tr> <td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><font color=red size="5"><b>在</b></font></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>
でも、それは出てくるでしょうか?いいえ、何か追加する必要があります (次回はすぐに答えないように注意してください:)、次のようになります:
コードは次のとおりです:
<table align=left cellspacing=0 cellpadding=0 width=200 border=1> <tr> <td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><td><font color=red size="5"><b>在</b></font></td></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>
テキスト折り返しの HTML の例 (HTML 混合グラフィックスとテキスト) 分析例関連記事はPHP中国語サイトにご注目ください!