css基础100问之网页布局是究竟怎样完成的呢？（8）

我们想要做成下面这样的一个布局，该怎末做呢? 

 

下面咱们一点点去完成它：

第一步：首先加入基本div标签和去掉全局的内外边距。

 

 

第二步：给top和banner和box区域进行css修饰哟

 

再加入外边距，使其有间隙： 

 

进行box的设置： 

 

加入四个小li我是用无序列表来做的： 

 

 

但是li前面有小点，还有间距需要设置：

 

结果如下：

 

第四个又溢出了：

解决方案： 

一定加上.box增加它的权重，才会其效果呀。 

 

结果如下： 

 

最后加入footer部分：

 

最后效果图：