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>这个层是用来清除上边浮动的影响。下图是去了此层后的效果:

12

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

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

cai1

cai2

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

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

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

posted @ 2009-07-02 18:51  风枫峰  阅读(2375)  评论(1编辑  收藏  举报