小李刀刀博客

　　以前我也用CSS，不过只是很简单地用它来控制字体大小、链接样式，表格边框而已。要说页面布局和排版，我从来没想过用CSS，毕竟我用表格可以算得上是滚瓜烂熟了，表格+少许CSS，我已经能够实现所有需要的效果了。

 　　直到最近DIV+CSS布局的页面开始成为潮流，我看了一些网站，总体感觉还是不如表格的漂亮。可是当去除CSS以后，看看人家的内容仍然整整齐齐地显示在页面上，而且很少有多余的东西，再看看一个页面里去除了那许多的表格和字体代码后，结构清晰的源代码，我才真正理解很多书上讲的CSS的优点。

 　　买了一本《CSS权威指南》来看，顺便在正在改版的学校网站上“学以致用”，今天为止，不能说熟练掌握，不过总算是基本上掌握了CSS的使用。做了一个融合字体、背景、布局、定位等的例子，算是对自己这段时间学习的总结。

　　这个标题部分，如果用表格，至少需要两行一共5个单元格。我用了下面的代码来实现：

<div class="redtitlebox" style="WIDTH: 300px">　　
    <div class="redtitleleft"></div>
    <div class="redtitlemain">热门图文</div>
    <div class="redtitleright"></div>
    <div class="redtitlerightbody" style="WIDTH: 185px">专题：</div>
</div>

对应的CSS规则：

.redtitlebox {
　　width:100%;
　　position:static;
　　border-bottom:2px solid #900;
　　margin:0px;padding:0px; }
.redtitleleft {
　　width:8px;
　　background:url(skin/oldbisu/redtitlebg_left.gif) no-repeat;
　　float:left;
　　height:20px;
　　line-height:20px;
　　margin:0px;
　　font-size:0px;
　　color: #FFF;
}
.redtitleright {
　　width:7px;
　　background:url(skin/oldbisu/redtitlebg_right.gif) no-repeat;
　　float:left;
　　height:20px;
　　line-height:20px;
　　margin:0px;
　　font-size:0px;
　　color: #FFF;
}
.redtitlemain {
　　width:100px;
　　text-align:center;
　　background:url(skin/oldbisu/redtitlebg_main.gif) repeat-x;
　　float:left;
　　height:20px;
　　line-height:20px;
　　margin:0px;
　　font-weight: bold;
　　color: #fff;
　　font-size: 12px;
}
.redtitlerightbody {
　　max-width:645px !important;
　　float:right;
　　height:20px;
　　line-height:20px;
　　background:url(skin/oldbisu/titlebg.gif) repeat-x;
　　margin-bottom:0px;
　　color: #666;
　　font-size: 12px;
　　 text-align:right;
 }

 　　如果只是为了实现一个效果，似乎这个过程比用表格来实现还复杂了，但是考虑到这个效果将被运用在几千个网页里，就会觉得非常划算了。CSS毕竟只需要下载一次，而且这里还有我本身的问题，写CSS的经验还不够丰富，所以上面的样式规则肯定难免有一些冗余的地方。

 　　总之，用CSS做网页的感觉，真的是很不错的……

本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名小李刀刀（包含链接）。如您有任何疑问或者授权方面的协商，请给我发送邮件。