用CSS取代TABLE

今天上了discuz的网站, http://www.supesite.com/index.php?action=home 看了它的首页,随手查看了一下它的源文件,结果发现discuz真是牛,全部用CSS设计的,没用一个table,很了不起啊.

我一直觉得CSS的定位很难,我做网站的时候用它老是偏掉,对不齐. 它就不会.
而且这个首页的源码还极牛,最上部分的一个导航我没查到它的文字在哪儿,结果发现body的最下面,用了一个Script.
<script type="text/javascript" src="http://www.discuz.com/products_nav/products_nav.js"></script>
就用迅雷下下来,看看原文件,果真这个script 就是最上部的导航条.
看看product_nav,js源文件吧:

var  navCSS  =  document.createElement( ' link ' );
document.getElementsByTagName( ' head ' )[ 0 ].appendChild(navCSS);
navCSS.rel  =   ' stylesheet ' ;
navCSS.type  =   ' text/css ' ;
navCSS.href  =   ' http://www.discuz.com/products_nav/products_nav.css ' ;

var  navDiv  =  document.createElement( ' div ' );
navDiv.id  =   ' products_nav ' ;
document.body.appendChild(navDiv);
navDiv.innerHTML  =   ' <label><a href="http://www.comsenz.com" target="_blank" title="Comsenz Inc.">Comsenz</a></label><ul><li class="first"><a href="http://www.discuz.com/download" target="_blank">Discuz!</a></li><li><a href="http://www.discuznt.com" target="_blank">Discuz!NT</a></li><li><a href="http://www.supesite.com" target="_blank">SupeSite / X-Space</a></li><li><a href="http://www.5d6d.com" target="_blank">5d6d</a></li><li><a href="http://www.phpchina.com" target="_blank">PHPChina</a></li></ul></div> ' ;
document.body.style.borderTop  =   ' 29px solid #EDEEEE ' ;

它先定义一个CSS,再建立一个Div,用document.body.appendChild加入,结果就能加到最上部了.(后来者居上啊).在家里上网网速比较快,如果网速慢,这个DIV应该是最后显示出来,网页会不会抖一下啊？

再看看首页的CSS文件，都是一个容器一个容器的做，看来也不难，多数用的都是DIV H2 UL LI 等容器，定义的也就是文字，背景，高度之类的，我们公司要做不同的模板，不懂用ＣＳＳ能否实现，如果可以，程序可以少写很多．

明天再去看看163的blog，它就可以换肤，看它是怎么样实现的．今天给妞妞的blog换肤了，换了一个挺可爱ＢＢ型的．

#header  {...} {
    BACKGROUND: url(images/corner.gif) #0f559e no-repeat 0px 79px; HEIGHT: 84px
}
#header H2  {...} {
    MARGIN: 0px
}
#header H2 A  {...} {
    BACKGROUND: url(images/site_logo.gif) #fff no-repeat 10px 50%; FLOAT: left; OVERFLOW: hidden; WIDTH: 265px; TEXT-INDENT: -9999px; HEIGHT: 79px
}

 

#footer  {...} {
    BORDER-TOP: #f8f8f8 5px solid; MARGIN-TOP: 1px; PADDING-LEFT: 230px; BACKGROUND: url(images/comsenz_logo_gray.gif) no-repeat 0px 100%
}
#footer P  {...} {
    PADDING-LEFT: 10px; MARGIN: 12px 0px 0px; FONT: 10px/20px Verdana, Arial, Helvetica, sans-serif; BORDER-LEFT: #c5c5d8 1px solid; COLOR: #666
}
#footer A  {...} {
    COLOR: #666; TEXT-DECORATION: underline
}