利用CSS排版 美化页面

共计 712 个字符，预计需要花费 2 分钟才能阅读完成。

CSS真的是网页编程语言中最伟大的发明之一。想想，我初中做网页时在FrontPage里搞好页面，传到FTP里，遇到问题，得重新修改整个页面，重新上传。那是把网页中所有的语句都写进一张网页中，很累赘。

而CSS的好处就是，它把定义整个网站显示效果的那部分（字体、大小、颜色等）统统写进一个文件，网站其他页面只需要调用这个CSS文件就好了，如果要修改，那也只需要修改CSS而不需要动每一个页面。

CSS除了方便，还有普通HTML语言无法实现的美化页面排版的作用。今天只介绍Float这个用法。功能是使块级元素和文字混排，就是俗称的“画中画”效果，主要用于网页广告与页面的融合，也用于图文混排。

大家看当前这个页面，正文右上方有一块绿色的广告，就是GOOGLE提供的广告，如果把代码直接放到模板里，显示出来就是单独占据一行，很不好看，用Float语句可以把它弄到文字右边，并且和文字融合。代码如下：

<div style=”float:right;”>
<!–这里添加广告代码–>
</div>

注：上述代码插入到网页源代码的显示文章内容的前面，绿色部分根据需要还可以改为left。红色部分整句都要换成你的广告代码。

图文混排效果的代码跟上面的差不多，完整的给出来如下：

 <div style=”FLOAT: left“>

<img src=”https://chidd.net/upload/jianjie-1.jpg” />

</div>

注：上述代码插入到需要图文混排的段落前面，绿色部分根据需要还可以改为right。红色部分整句都要换成你的图片相对或绝对地址。

图文混排效果演示可以看本博客首页博主导航那里。

好了，今天的CSS就介绍到这里，大家试试吧。