Daily Archives: 2005-11-29

　　以前我也用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; … Continue reading →