html 字体围绕图片效果
来源:互联网 发布:网络大电影方案 编辑:程序博客网 时间:2024/05/03 12:42
最近做一个公司的网站,有个页面的显示效果必须是字体围绕,图片在左下角,其他三部分被文字包围。没多少做前端页面的经验,都是些修修改改字体,颜色,图片大小什么的。。。这个需求看了半天懵了。好在公司有网络,查找半天,有点被围绕的效果。先把自己看到的环绕效果总结下,直接贴代码:
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;
<!--height: 80px;-->
<!--width: 25%;-->
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>
<!-- <div class="wrap-div wrap-div-right"> 你的另一张图片效果</div>-->
<p>你的另一部分文字。。。。. </p>
</BODY>
</HTML>
- html 字体围绕图片效果
- 段落中字体围绕第一个字 或者字体围绕图片
- 动画效果,几张图片围绕一点旋转
- 玩转自定义ViewGroup——环形围绕展示图片效果
- 围绕中心旋转动画效果
- 动画animation及其围绕效果
- html设置等宽字体效果
- HTML打字机和字体发光效果
- html页面的字体代码表及字体效果对比
- Html中图片滤镜效果
- html中图片走马灯效果
- 关于html图片滚动效果
- html之移动的字体和图片
- css 横向渐变 图片阴影效果 字体模糊效果
- 围绕
- HTML中图片的蒙胧效果!
- 上传图片前预览效果 html css
- HTML 纯CSS图片放大效果
- 设计表时给哪些字段加索引,索引的用处,以及能不能给所有字段加索引
- Android OTA相关博文
- pentaho CDA缓存配置
- Linux内核PROC文件系统的初始化和主要函数分析
- POJ 3281 (网络流)
- html 字体围绕图片效果
- 将HH:mm:ss格式的时间转换成分钟数
- PAT-A-1006. Sign In and Sign Out (25)
- 查找序列最宽尖峰——含代码
- 2017春招去哪儿笔试
- socket通信
- hdu 2604 矩阵快速幂
- 堆排序
- spring4.0 @PropertySource读取配置文件