利用CSS排版 美化页面

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就介绍到这里,大家试试吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注