myRoad--详解一个漂亮的div+css网页模版（二）

上一篇现在看起来好像没什么营养，呵呵，今天努力。

首先说一下“盒子模型” ，在css里认为div是一个盒子。。。盒子？什么意思？呵呵 看看下边的图吧：

这里把我们用到了好几个CSS属性，在上一篇里介绍过，看到了吧CSS骗了我好久啊，我一直以为width，height是div的宽和高，没想到啊，没想到，它们只是content的宽和高。这就是div全部的大小控制了。不过这里要注意body也是一个大的盒子，要是默认不设置margin的话，会和窗口四周有缝隙的。。。。。还有要注意margin了，padding了。。。它们的简写：margin：0px or margin 0px 0px 这样是代表什么意思，忘了的看看第一篇吧！

到这里有人会说，margin,padding,border就算是不设置，也有自己的默认值，而且也不大，为什么我们还要费力的去设置半天呢？这里就要注意了，做网页可是个细致的活，1px的差别也有可能影响你的网页美观。

再去深入的了解，原来html里“一切皆盒子”！(当然也不是全部，我就这么一说。) O(∩_∩)O哈哈~

到这里大家应该差不多知道了，其实div+css不过就是一个盒子套一个盒子，或者一个盒子和另一个盒子并列，或者一个盒子在另一个盒子上边，主要就是看盒子的位置了，那么怎么控制盒子的位置呢？

这里有个“行内元素”,“块元素”.

<span>就是行内元素，不单独为一行;<div>就是块元素，也就是单独为一行

在这个网页中控制<div>的位置用到了float属性，然后就是直接用的width，height这种绝对位置来控制的！

这里不知道大家注意了没！ 有一个层是<div style=”clear:both”><div>这个层是用来清除上边浮动的影响。下图是去了此层后的效果：

可以看到最下边的footer层的位置已经错乱了！这就是<div style=”clear:both”><div>这一层的作用，消除上边浮动层的影响。

网页的主体布局就是这样了，剩下就是菜单了：

上面两幅图显示的菜单全是由<ul>+<li>也就是无序列表来制作的，当然下边的这幅图的标题用了<h2>标签来控制字的大小。<li>的默认显示是竖直方向的，要是想做成横着的主要是用它CSS熟悉display: inline;

这个网站剩下的就是图片了，他的图片做的非常好看，这个就要用Photoshop了，以后在介绍，呵呵！

今天就到这里了。。。。明天见！