CSS中设置图文混排
Word中文字和图片有很多排版的方式，在网页中可以通过CSS设置各种图文混排的效果。
文字环绕
文字环绕在实际页面中非常的常用，如果，配合内容、背景等多种手段也可以达到绚丽的效果。
CSS中是通过给图片设置float属性，来实现文字环绕的。
<span style="font-size:24px;"><html>
<head>
<title>
图文混排
</title>
<style type="text/css">
<!--
body{
background-color:bb0102;
margin:0px;
padding:0px;
}
img{float:left;
}
p{
color:#FFFF00;
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left;
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0">
<p><span>春</span>节远古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>
<p>据《诗经》记载，没到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，是节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之欢，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，便于朝野，彻夜无停。”</p>
</body>
</html></span>代码如上，除了使用了float-left使文字环绕图片之外，还使用了首字放大的效果，可以看到首字放到和图片环绕的方式几乎是完全相同的，只不过对象分别是文字和图片而已。
如果，将float的属性值设置为right，则图片会移动到页面的右边，而文字则会环绕在左边。
设置图片和文字间距
在文字环绕中，文字紧紧环绕在图片的周围，可以设置文字和图片之间的距离，
只需要给img标记添加padding属性即可。
<span style="font-size:24px;"><html>
<head>
<title>
图文混排
</title>
<style type="text/css">
<!--
body{
background-color:bb0102;
margin:0px;
padding:0px;
}
img{float:left;
margin-right:50xp;
margin-bottom:25px;
}
p{
color:#FFFF00;
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left;
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0">
<p><span>春</span>节远古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>
<p>据《诗经》记载，没到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，是节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之欢，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，便于朝野，彻夜无停。”</p>
</body>
</html></span>代码如上，可以看到文字和图片的距离，明显变远了，如果把margin的值设置为负数，那么文字就会移动到图片的上方。
3046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
