欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-25 16:37:35
...
上一篇现在看起来好像没什么营养,呵呵,今天努力。 首先说一下“盒子模型” ,在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了,以后在介绍,呵呵! 今天就到这里了。。。。明天见!myRoad--详解一个漂亮的div+css网页模版(二)_html/css_WEB-ITnose

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • myRoad--详解一个漂亮的div+css网页模版(二)_html/css_WEB-ITnose
  • 专题推荐

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

    认证0级讲师

    推荐视频教程
  • myRoad--详解一个漂亮的div+css网页模版(二)_html/css_WEB-ITnosejavascript初级视频教程
  • myRoad--详解一个漂亮的div+css网页模版(二)_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类