首页 > web前端 > html教程 > myRoad--详解一个漂亮的div+css网页模版(二)_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 12:30:16
原创
1126 人浏览过

上一篇现在看起来好像没什么营养,呵呵,今天努力。 首先说一下“盒子模型” ,在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了,以后在介绍,呵呵! 今天就到这里了。。。。明天见!
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板