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

程序员文章站 2022-05-27 17:00:31

...

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

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

以上就是字体围绕图片效果的html代码的详细内容，更多请关注其它相关文章！

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

如何利用CSS实现图片的透明效果_html/css_WEB-ITnose

CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧

iOS开发之图片模糊效果的五种实现代码

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

html5使用canvas实现图片下载功能的示例代码

vue自定义js图片碎片轮播图切换效果的实现代码

javascript实现图片切换的幻灯片效果源代码

鼠标滑上去后图片放大浮出效果的js代码

最简单的js图片切换效果实现代码