html 字体围绕图片效果

最新推荐文章于 2024-04-22 20:07:06 发布

摩西科里

最新推荐文章于 2024-04-22 20:07:06 发布

阅读量8.3k

点赞数

分类专栏：总结记录

本文链接：https://blog.csdn.net/qingzhongren/article/details/68948714

版权

总结记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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>
<div style="position:relative;">
　　<img src="D:\用户目录\Pictures\IQIYISnapShot\1491055341(1).png" />
　　<div style="position:absolute; z-index:2; left:600px; top:10px">
　　　　你的文字多的话，图片在左边显示，文字在右边显示。
　　</div>
</div>
</BODY>
</HTML>

3.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div.wrap-div-topSpacer {
width: 0px;
height: 60px;
float: left;
}
div.wrap-div {
float: left;
clear: both;
margin: 0px 10px 0 0;


text-align: center;
background: #0088cc;
color: #FFF;
}
div.wrap-div-right {
float: right;
width: 50%;
}
</style>
</HEAD>
<BODY>
<div class="wrap-div-topSpacer"></div>
<div class="wrap-div"><img src="D:\用户目录\Pictures\IQIYISnapShot\1491055341(1).png" /> </div>
<p>你的文字多的话，图片在左偏上部位，图片的上右下都被文字包围，形成三面环绕效果。 </p>
<div class="wrap-div-topSpacer"></div>

<p>你的另一部分文字。。。。. </p>
</BODY>
</HTML>

摩西科里

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html 字体围绕图片效果

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

扫一扫