一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS文字环绕图片的例子

时间:2014-02-18 编辑:简简单单 来源:一聚教程网

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

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

HTML部分:
 

 代码如下 复制代码


   


        前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5
        年,是指Web前端开发工程师的简称。 Web前端开发是从美工演变而来的,名称上有很明显的时代特征。
        在互联网的演化进程中,Web 1.0时代,
        This is a pic
        网站的主要内容都是静态的,用户使用网站的行为也以浏览为主2005年以后,互联网进入Web 2.0时代,
        各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一
        的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,
        这些都是基于前端技术实现的。
   


   


        随着Web 2.0概念的普及和W3C组织的推广,网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML
        和Ajax像一阵旋风,铺天盖地席卷而来,包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的
        网站进行了重构。
   


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,运行后的效果就是这样子的:

CSS文字环绕图片的例子

例子

 代码如下 复制代码

HTML代码如下:

Lunar ecli<a href=pse photo" />

.

.

.

Numerous blocks of text

.

.

.

CSS代码大致如下:

div.wrap_area { position: relative; }

div.wrap_area img { position: absolute; left: 0px; top: 0px; }

div.wrap_area p { position: relative; }

div.shape_wrap div { float: left; clear: left; height: 20px; }

CSS掌握的不错的同学们应该就已经知道其中的奥妙了,同样是利用 float 将div 部分内容提出文档流,然后用div的堆砌造出一条正文要通过的路径。

热门栏目