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

程序员文章站 2022-05-29 20:44:46

...

上一篇现在看起来好像没什么营养，呵呵，今天努力。首先说一下“盒子模型” ，在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不过就是一个盒子套一个盒子，或者一个盒子和另一个盒子并列，或者一个盒子在另一个盒子上边，主要就是看盒子的位置了，那么怎么控制盒子的位置呢？这里有个“行内元素”,“块元素”. 就是行内元素，不单独为一行;

就是块元素，也就是单独为一行在这个网页中控制

的位置用到了float属性，然后就是直接用的width，height这种绝对位置来控制的！这里不知道大家注意了没！有一个层是

这个层是用来清除上边浮动的影响。下图是去了此层后的效果：

可以看到最下边的footer层的位置已经错乱了！这就是

这一层的作用，消除上边浮动层的影响。网页的主体布局就是这样了，剩下就是菜单了：上面两幅图显示的菜单全是由

也就是无序列表来制作的，当然下边的这幅图的标题用了
标签来控制字的大小。
的默认显示是竖直方向的，要是想做成横着的主要是用它CSS熟悉display: inline; 这个网站剩下的就是图片了，他的图片做的非常好看，这个就要用Photoshop了，以后在介绍，呵呵！今天就到这里了。。。。明天见！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。