图文环绕方式的实现:
法一:(将图像一幅图像用Photoshop切割成若干个小的图片,然后设置小图片浮动显示)
<style type=”text/css”>
.image{
float:left;
clear:left;
margin-right:2px;
padding:0;
}
</style>
<body>
<div id=”main”>
<span class=”image”><img src=”../images/01.gif”/></span>
<span class=”image”><img src=”../images/02.gif”/></span>
<span class=”image”><img src=”../images/03.gif”/></span>
文字混排效果的样式就是文本环绕在图像的右侧1
文字混排效果的样式就是文本环绕在图像的右侧2
文字混排效果的样式就是文本环绕在图像的右侧3
</div>
</body>
法二:用背景来实现实现混排(实际上就是将文字放在不同的元素中,并且定义这些元素的不同的外边距,内边距,或者首行缩进等)
<style type=”text/css”>
#article1{
text-indent:245px;
}
#article2{
text-indent:262px;
}
#article3{
text-indent:247px;
}
</style>
<body>
<div id=”main”>
<div id=”article1”>混排效果1</div>
<div id=”article2”>混排效果2</div>
<div id=”article3”>混排效果3</div>
</div>
</body>
扩展:文本缩进text-indent
p{text-indent:-2em;}
效果为:向左缩进2个字体宽
岁月无声
光辉岁月
p{text-indent:2em;}
效果为向右缩进2个字体宽
岁月无声
光辉岁月