转换成功
成功地原来基于table的网页转为基于div+css的，不是一般的兴奋啊！把14.8KB的网页刷地减肥成4.6KB，把杂乱的框架理顺为明了的层次。最后，在万恶的帮助下，解决了div的怪现象。叙述一下经过吧、
首先，我网页的一部分是这么设置的（问题简化版）：
<html>
<head>
<title>test</title>
<style>
<!–
body { background-color:#000000;}
#main { background-color:#00ff00; width:755px; margin:0 auto;}
#left {background-color:#ff0000; width:200px; height:200px; float:left;}
#right {background-color:#0000ff; width:555px; height:600px; float:right;}
–>
</style>
</head>
<body>
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
</body>
</html>
得出的结果如左图：
从上面的css可以看出，我是希望#main里面是#00ff00（绿色）的，也就是红色的下面应该是绿色，但显然，FF得不出，Opera得不出，Google Chrome也得不出，只有丑陋的IE实现了那个效果。为什么呢？Firebug指出，在上面的设置之下#main的高度为“0”，肯定得不出绿色！为什么呢？万恶说，那是css的浮动性导致的，因为我#main下有2个div，两个div都设置为浮动，浮动的元素是被撇除在外的，所以我们觉得#main里有东西，实际上却不认。万恶给我出个非常简单但有效的方案——在<div id=”right”></div>后面#main结束之前加上一句<div class=”clear”></div>（css里添.clear { clear:both;}），问题解决了！clear是干嘛的？清除浮动元素的！在两个浮动元素之后加个这么个空载div保证了#main里面有东西，又因为clear的设置是both，左右都不能有浮动元素，所以它肯定位于所有浮动元素的后面，把#main“撑”了出来。应该可以这么解释吧。现在才恍然大悟为什么BlogBus很多模板后面都有那么句空载的div，原来是这般用的。成功范例见右图。
我一直理所当然地认为在div里嵌div就能把外面的撑大，理论上是这样，但如果里面的div设置为float那就另当别论。真是郁闷到极点。又死在细节上，自学的东西不系统结果就会经常碰到抓破脑袋都搞不懂的情况。
除了这个难点以外，还有一个导航栏的问题，但经过我的瞎弄后，马虎成功了。
哇咔咔，鼓掌庆祝一下！
还没有评论