在线建站培训
您的位置: 魔客吧魔客学院div+css视频教程查看内容

课时2-7:理解CSS定位与div布局

讲师:moke | 课程:div+css视频教程


在网页设计时,能否控制好各个模块在页面中的位置是非常关键的。在前面的课程中,已经对CSS的基本使用有了一定的了解。本课在此基础上对CSS定位作详细的介绍,并介绍重要的div标记,讲解利用CSS + div对页面元素进行定位的方法,并分析CSS排版中的盒子模型以及二维三维定位等。

1.div标记与span标记
在使用CSS排版的页面中, div 与 span 是两个常用的标记。利用这两个标记,加上CSS对其样式的控制,可以很方便的实现各种效果。我们在这里从二者的基本概念出发,介绍这两个标记的用法与区别。希望大家能够掌握以下几个方面的内容:
  • div与span的概念
  • div与span的区别

2
.盒子模型
盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法,才能真正的控制页面中各元素的位置。我们在这里主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。
所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说,可以通过调整盒子的边框、距离等参数,来调节盒子的位置。
一个盒子模型由content(内容)、border(边框)、padding(间隙)、margin(间隔)这四部分组成,如图所示。
0E131552933.gif

一个盒子的实际宽度(或高度)是由content + padding + border + margin组成的。在CSS中可以通过设定width和height的值来控制content的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性,就能够实现各种各样的排版效果。

3.元素的定位
网页中各种元素都必须有自己合理的位置,从而搭建出整个页面的结构。我们在这里围绕CSS定位的几种原理方法,进行深入的介绍,包括position、float、z-index等。需要说明的是,这里的定位不是用 table 进行排版,而是CSS的方法对页面中块元素的定位。希望大家能够掌握以下几个方面的内容:
  • float定位
  • position定位
  • z-index空间位置

4定位实例一:轻轻松松给图片签名
手里有漂亮的图片需要放到页面上,而且希望给图片加上个人信息,如果对各种图象处理软件不是很熟悉,用CSS定位完全可以实现给图片签名的效果。
首先找好希望放到网上的图片,然后将其放入一个 div 块中,并用盒子模型的方法给图片加框(padding、border)。然后将需要签名的文字放入另外一个 div 块,用position定位将其移动到图片上,再设置相应的字体、颜色即可。
B4131553871.gif


5
定位实例二:文字阴影效果
前面介绍了用CSS滤镜实现文字阴影效果的方法,可是CSS滤镜仅仅适用于IE浏览器,如果希望Firefox下也能有文字阴影的效果,该方法就无能为力。采用本课介绍的定位方法,便能轻松实现文字阴影的效果,而且适用于各个浏览器,本例效果如图所示。
课程QQ群:146535366 报名截止时间:2月23日 咨询客服QQ:272922238