Rumah > Artikel > hujung hadapan web > 字体围绕图片效果的html代码

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

PHPzasal: 2017-04-03 16:39:122409semak imbas

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

<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>

<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>

<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>

Atas ialah kandungan terperinci 字体围绕图片效果的html代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：介绍一些大公司手机端的meta属性Artikel seterusnya：html各种常见色彩的编号数值(收藏)

Artikel berkaitan

Lihat lagi