div+css布局

制作网页先从布局开始，将一个网页分红四块，用div画块布局，块画好了，打开是一片空白的，div只是将网页分块，但要显示块的大小颜色，咱们就须要用CSS来控制，如下将div设置为宽为300px，高为200px，背景色为蓝色，出来的效果以下：

 

 

    那么为何是这显示的是一大块呢，由于呢，我将背景色都设置为同样的了，那么不想将这四块连在一块呢，那么咱们就将如下四块div分别用一个名字命名，再根据名字咱们再用css来改变四个div的背景。

 

 

那么从上面能够看出四块已经分别用蓝色，绿色，红色和灰色区分出来了，能够看出并非一块了吧，那么为何第一块div仍是蓝色的呢，这是由于css里面第一个div样式将因此的body里的div设置了蓝色，咱们以后将2、3、四块，这三块特地用了其余三种颜色，但第一块咱们并无特地去设定颜色，因此第一块仍是蓝色的，四块分出来了，可是这四块和咱们要的效果并不同就这么一点宽并无充满整个页面，咱们以前将div设置了宽300px，那咱们就将“width:300px;”删除，咱们来看下效果：

 

 

如今呢四块宽度已经充满整个页面。这个呢就实现了最简单的一个布局。