您的位置：首页 > Web前端 > HTML

html 字体围绕图片效果

2017-04-01 23:27 716 查看

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航