Home >Web Front-end >HTML Tutorial >HTML code for font around image effect

HTML code for font around image effect

PHPzOriginal: 2017-04-03 16:39:122426browse

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

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

The above is the detailed content of HTML code for font around image effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introducing the meta attributes of some large companies’ mobile terminalsNext article：Introducing the meta attributes of some large companies’ mobile terminals

See more

HTML code for font around image effect

Related articles