返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

利用CSS实现图文混排效果

时间:2014-01-02 16:44来源:电脑教程学习网 www.etwiki.cn 编辑:admin

我们在浏览一些大型门户网站的时候常常会看到图文混排效果的文章(如图在左边,字在图的上、右、下边),那么如何才能实现这样的效果呢,用CSS的float属性可以完成图文混排,再配合其他元素,如margin,可以达到比较好的效果。

<style>
.pic {
float: left;
border: 1px solid #cccccc;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
</style>


调用的时候只要指定class就可以了,如:

<img src="*.gif" class="pic" />这里是文字内容。



这样就完成了用CSS实现图文混排效果。

------分隔线----------------------------
标签(Tag):css css技巧 css实例教程 css源代码 css基础教程
------分隔线----------------------------
推荐内容
猜你感兴趣