您的当前位置:首页正文

字体围绕图片效果的html代码

来源:个人技术集锦

最近做一个公司的网站,有个页面的显示效果必须是字体围绕,图片在左下角,其他三部分被文字包围。没多少做前端页面的经验,都是些修修改改字体,颜色,图片大小什么的。。这个需求看了半天懵了。好在公司有网络,查找半天,有点被围绕的效果。先把自己看到的环绕效果总结下,直接贴代码:

1.

<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
 <img src="D:\用户目录\Pictures\IQIYISnapShot\1491055341(1).png" style="float:left;"></img>你的文字多的话,图片在右上角显示,图片的右边和下边被文字包围。
 </BODY>
</HTML>

2.

<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
 <p style="position:relative;">
  <img src="D:\用户目录\Pictures\IQIYISnapShot\1491055341(1).png" />
  <p style="position:absolute; z-index:2; left:600px; top:10px">
    你的文字多的话,图片在左边显示,文字在右边显示。
  </p>
</p>
 </BODY>
</HTML>

3.

<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <style>
p.wrap-p-topSpacer {
 width: 0px;
 height: 60px;
 float: left;
}
p.wrap-p {
 float: left;
 clear: both;
 margin: 0px 10px 0 0;
 <!--height: 80px;-->
 <!--width: 25%;-->
 text-align: center;
 background: #0088cc;
 color: #FFF;
}
p.wrap-p-right {
 float: right;
 width: 50%;
}
 </style>
 </HEAD>
 <BODY>
 <p class="wrap-p-topSpacer"></p>
 <p class="wrap-p"><img src="D:\用户目录\Pictures\IQIYISnapShot\1491055341(1).png" /> </p>
 <p>你的文字多的话,图片在左偏上部位,图片的上右下都被文字包围,形成三面环绕效果。 </p>
 <p class="wrap-p-topSpacer"></p>
 <!-- <p class="wrap-p wrap-p-right"> 你的另一张图片效果</p>-->
 <p>你的另一部分文字。。. </p>
 </BODY>
</HTML>
显示全文