HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 如何优化ASP源码以提高程序运行速度从“陈冠希艳照事件”看电脑数据安全 »

用CSS实现图文混排效果

    我们在浏览一些大型门户网站的时候常常会看到图文混排效果的文章(如图在左边,字在图的上、右、下边),那么如何才能实现这样的效果呢,用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实现图文混排效果。

 

 



欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/67.htm
  • 相关文章:
  • quote 2.wu
  • 你老兄高的什么乱七八糟的东西
  • 2010-5-4 下午 05:44:16 回复该留言
  • quote 1.liya
  • 请问多个图片该怎么实现?
    HTMer 于 2009-10-13 12:16:28 回复
    设置多个img的CSS啊,指定class就好啦。
  • 2009-10-13 上午 10:16:29 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version