Heim > Artikel > Web-Frontend > HTML-Code für Schriftart um Bildeffekt
HTML-Code für Schriftart um Bildeffekt
- PHPzOriginal
- 2017-04-03 16:39:122383Durchsuche
最近做一个公司的网站，有个页面的显示效果必须是字体围绕，图片在左下角，其他三部分被文字包围。没多少做前端页面的经验，都是些修修改改字体，颜色，图片大小什么的。。。这个需求看了半天懵了。好在公司有网络，查找半天，有点被围绕的效果。先把自己看到的环绕效果总结下，直接贴代码：
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>Das obige ist der detaillierte Inhalt vonHTML-Code für Schriftart um Bildeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn