首页 > 开发编程 > web编程 > html开发学习 > 正文
CSS文字环绕图片
2014-07-17     我来说两句       作者:
   我要投稿

CSS文字环绕图片

文字环绕是Microsoft Office Word软件的一种排版方式,主要用于设置Word文档中的图片、文本框、自选图形、剪贴画、艺术字等对象与文字之间的位置关系。一般包括四周型、紧密型、衬于文字下方、浮于文字上方、上下型、穿越型等多种文字环绕方式。

但我们做网页布局时,有时也需要这样的样式,那么怎么办呢?其实是很简单的,主要就是float的使用,具体请看下面例子:

HTML部分:

<div class="txt">    <p>        前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5        年,是指WEB前端开发工程师的简称。 WEB前端开发是从美工演变而来的,名称上有很明显的时代特征。        在互联网的演化进程中,Web 1.0时代,        <img src="1.jpg" alt="This is a pic"/>        网站的主要内容都是静态的,用户使用网站的行为也以浏览为主2005年以后,互联网进入Web 2.0时代,        各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一        的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,        这些都是基于前端技术实现的。    </p>    <p>        随着Web 2.0概念的普及和W3C组织的推广,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML        和Ajax像一阵旋风,铺天盖地席卷而来,包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的        网站进行了重构。    </p></div>

CSS部分:

* {    margin: 0;    padding: 0;}     .txt {    margin: 50px auto;    width: 500px;    padding: 10px;    border: 1px solid #ccc;    font: 14px/20px "Microsoft YaHei";    color: #666;}     .txt p {    text-indent: 20px;}     .txt img {    float: left;    width: 180px;    height: 110px;    margin: 5px 10px 0 0;}

ok,运行后的效果就是这样子的:

下面是Demo演示及源码下载:

   

除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:WEB前端开发

点击收藏到自己的收藏夹!回本站首页
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:webStrom及phpStrom中文乱码解决方法
下一篇:实现网页页面跳转的几种方法(meta标签、js实现、php实现)
相关文章
图文推荐
排行
热门
综合
Web
python
关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 中国黑帽网--致力于做最好的网络安全技术学习网站 。