裁纸刀下

　　以前我也用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的经验还不够丰富，所以上面的样式规则肯定难免有一些冗余的地方。 [...]