欢迎光临【伪医生律师的博客】(@陈大猫的博客)。

利用CSS排版 美化页面

技术文档 陈大猫 118℃ 0评论

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

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

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

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

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

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

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

 <div style=”FLOAT: left“>

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

</div>

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

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

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

转载请注明:伪医生律师的博客 » 利用CSS排版 美化页面

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址