Maison > Article > interface Web > Code HTML pour la police autour de l'effet d'image
Code HTML pour la police autour de l'effet d'image
- PHPzoriginal
- 2017-04-03 16:39:122403parcourir
最近做一个公司的网站，有个页面的显示效果必须是字体围绕，图片在左下角，其他三部分被文字包围。没多少做前端页面的经验，都是些修修改改字体，颜色，图片大小什么的。。。这个需求看了半天懵了。好在公司有网络，查找半天，有点被围绕的效果。先把自己看到的环绕效果总结下，直接贴代码：
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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn