以前我也用 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做网页的感觉，真的是很不错的……

作者：小李刀刀
原文链接：CSS学习之综合运用
裁纸刀下版权所有，允许非商业用途转载，转载时请原样转载并标明来源、作者，保留原文链接。