(2) 定义各个块的宽度，和高度 

       #wrapper{ width:760px; margin:10px auto; } /* 这是外围容器 */
       #content{ width:760px; height:378px; } /* 这是内容容器 */
       #leftbar{width:180px; height:378px; float:left; border:1px solid #DEDFDE;margin:0 10px 0 0;} /* 这是左列的样式 */
        #rightbar{ float:left; width:560px; } /* 这是右列的样式 */

这里我是用的浮动布局，当然，你也可以用别的方法.具体各个属性代表什幺意思，我就不多说了，同学们可以仔细的查看css手册.

(3) 完善左列的样式。。

       #leftbar{width:180px; height:378px; float:left; border:1px solid #DEDFDE;margin:0 10px 0 0;} /* margin:0 10px 0 0; 代表距离右边的列有10px的空隙 */
       ul li{ font-size:14px; list-style:none; text-align:center; margin:20px;}

写完后。。左列的效果应该就出来了，属性都很简单，请各位同学查找一下css手册，对应着理解。。。

 (4) 完善右列的样式

先定义#rightnews_a和#rightnews_b 的样式，然后再写完里面的细节，请同学们跟着我的思路一步一步的写出来，千万不要手懒，不动手，Css是一种实践性很强的技术，不动手是很难学会的。。

        #rightnews_a{ border:1px solid #DEDFDE; margin:0 0 10px;height:178px; overflow:hidden;} /* overflow:hidden是为了把子内容超出的部分隐藏 */
        #rightnews_b{ border:1px solid #DEDFDE; height:188px; }

（5）完善右列的细节样式

先定义 dl的样式 ，这里我依然采用的 浮动 来定位，有一点请注意，一个标签浮动以后，最好给它定义一个合适的宽度。。浮动具体的原理，限于篇幅，就不细讲了，这里主要是提供一种利用web标准来搭建网页的思路，和让同学们对Css有一个感性的认识，所以我不想颁出一大堆的理论来解释，免得让大家丧失了学习的信心。

       #rightbar dl{ text-align:center;}
         #rightbar dt{ float:left; font-weight:bold; font-size:14px; line-height:26px;}
         #rightbar .t1{ width:100px;padding:0 5px;}
         #rightbar .t2{ width:280px;padding:0 5px;}
         #rightbar .t3{ width:148px;padding:0 5px;}
               #rightbar dd{ line-height:26px;font-size:14px; }
                #rightbar .dd1{ width:100px;padding:0 5px;float:left; }
                     #rightbar .dd2{ width:280px;padding:0 5px;float:left; }

五，总结：

Web标准的核心思想：

1. 用合适的标签来搭建页面结构：比如页面中的一个段落，就可以用P标签，而不要用div来代替。。导航条可以用ul等，请不要把看起来是什幺的结构，用其它意义的标签来表达，这样是不太合理的。
2. 表现方面的内容 ，请用css来控制，比如：本教程中的font-size ，background 等，这样就可以实现表现和结构相分离了。
3. 请不要过多的使用hack ，同学们在看本教程的时候，有没有发现我一个Hack都没有写？是的，标准的本意是不推荐使用hack的，因为“向后兼容”的可能性非常小，比如你现在可以兼容ie6.7 ff3.0，但是ie8 ,ff4可能就可能会给你的页面找点麻烦了，所以当你要用Hack的时候，不妨换个思路，改改结构，或者改css，能避免就尽量避免。

怎幺样？？用Web标准来“重构”一个页面，不是那幺困难吧？ 自己动手试试了吗 ？
如果你仔细看了这篇教程，还是有地方不理解的话，可以在论坛留言 ，或者电子邮件给我 ，我会尽力帮助你，本人的水平也有限，如果路过的高手有什幺看法或者意见，请发封邮件给我 ，不甚感激，最后祝愿大家在“标准”的路上一帆风顺 。
My-email: huangpengan@qq.com

经典论坛交流：
http://bbs.blueidea.com/thread-2918259-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6544.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 利用CSS布局到底有多难? [3] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。