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的值设置为负数,那么文字就会移动到图片的上方。