软件学堂

网游分类软件分类

CSS文字环绕图片

2012-11-24 来源:网络

【实例介绍】

CSS文字环绕图片

文字环绕图片的方式在实际页面中的应用非常广泛,如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。在CSS中主要是通过给图片设置float属性来实现文字环绕。

【基本语法】

float:none  |  left  |  right

【语法介绍】

float属性有4个可用的值:left和right分别浮动元素到各自的方向,none(默认的)使元素不浮动,inherit将会从父级元素获取float值。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> div { width:300px; border:1px solid green} img { float:left; width:120px; height:120px} </style> <body> <div> <img src="风景3.jpg" width="189" height="172" />景物是风景构成的客观因素、 基本素材,是具有独立欣赏价值的风景素材的个体,包括山、水、植物、动物、空气、光、 建筑以及其他诸如雕塑碑刻、胜迹遗址等有效的风景素材。景感是风景构成的活跃因素、 主观反映,是人对景物的体察、鉴别和感受能力。例如视觉、听觉、嗅觉、味觉、触觉、 联想、心理等。条件是风景构成的制约因素、缘因手段,是赏景主体与风景客体所构成的 特殊关系。包括了个人、时间、地点、文化、科技、经济和社会各种条件等。</div> </body> </html>

【代码分析】

加粗部分的代码实现的是左上角是图片,然后文字环绕在图片的右边,效果如图所示。

文字环绕运行效果
 【素材及源码下载】

请点击:文字环绕图片CSS 下载本实例相关素材及源码

 

上一篇:CSS图片缩放
下一篇:如何删除qq空间说说

相关文章