博客文章图文混编代码

点击查看原图

    使用博客写文章时附带一些配合文章的图片会让文章更具说服力也让博客显得更加光彩照人,我的博客是利用BOBLOG系统搭建,虽然有可视化编辑器,但是很可惜无法利用其在合适的位置实现图文混编,虽然如此但是我们还是可以使用HTML代码实现BOBLOG的图文混编,下面我给大家介绍几段常用代码。

文字在左图片在右:

<P><A href=”对图片的链接地址” target=_blank><IMG height=100 src=”图片URL地址” width=100 align=right border=0></A>文章内容</P>

文字在右图片在左:

<P><A href=”对图片的链接地址” target=_blank><IMG height=100 src=”图片URL地址” width=100 align=left border=0></A>文章内容</P>

    调整图片于文字的距离可加入“vspace=上下距离 hspace=左右距离”使用不同数值效果不一样。

比如改后的代码是:

<P><A href=”对图片的链接地址” target=_blank><IMG height=100 src=”图片URL地址” width=100 align=left hspace=10 vspace=10 border=0></A>文章内容</P>

这里再介绍另一种方法:

文字在左图片在右

<table width=”100%” border=”0″>
<tr>
<td align=”left” valign=”top”>文字</td>
<td ><div align=”right”><img src=”图片” /></div></td>
</tr>
</table>

图片在左文字在右

<table width=”100%” border=”0″>
<tr>
<td ><div align=”left”><img src=”图片” /></div></td>
<td align=”left” valign=”top”>文字</td>
</tr>
</table>

 转载自: 指南者博客
原文地址:http://www.amznz.com/blog-tupian-wenzi/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您必须启用javascript在这里看到验证码!