当前位置:首页 > DIV+CSS教程 > 正文

视频:第7课 - 理解CSS定位与div布局 - CSS/DIV布局专题讲解

作者:曾顺 来源:前沿视频教室 【 】 浏览: 添加日期:2008-06-26 我要评论(7)     

点击在线观看

下载该节视频教程 动力软件园分流下载 FLV播放器下载 或者使用QQ影音播放

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

1.div标记与span标记

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

  • div与span的概念
  • div与span的区别

2.盒子模型

盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法,才能真正的控制页面中各元素的位置。我们在这里主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。

所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说,可以通过调整盒子的边框、距离等参数,来调节盒子的位置。

一个盒子模型由content(内容)、border(边框)、padding(间隙)、margin(间隔)这四部分组成,如图所示。

 

一个盒子的实际宽度(或高度)是由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定位将其移动到图片上,再设置相应的字体、颜色即可。

5定位实例二:文字阴影效果
前面介绍了用CSS滤镜实现文字阴影效果的方法,可是CSS滤镜仅仅适用于IE浏览器,如果希望Firefox下也能有文字阴影的效果,该方法就无能为力。采用本课介绍的定位方法,便能轻松实现文字阴影的效果,而且适用于各个浏览器,本例效果如图所示。

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 视频 css定位 div布局

所属专题:视频教程

更多评论(7)..会员评论

friciny(113.57.*.*) 发表于:2013-06-07 15:45:05
你好,为什么今天不能在线播放视频了啊?
nzh773(112.113.*.*) 发表于:2013-02-12 22:39:34
网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.4; InfoPath.1) 时间戳: Tue, 12 Feb 2013 14:27:35 UTC 消息: 没有权限 行: 17 字符: 3 代码: 0 URI: http://learning.artech.cn/uploads/2007/06/11/20070611.html
管理员回复:问题已经解决请刷新使用。
nzh773(112.113.*.*) 发表于:2013-02-12 22:38:48
我已注册,怎么没有权限看呀?
mmsunni(220.178.*.*) 发表于:2010-11-13 10:49:55
站长老大啊!怎么样才可以加入咱们的交流群中啊!我老实被拒绝。帮帮忙吧!
管理员回复:交流都是由各个群主管理的,我管理不了,多试几次
zhqy(117.82.*.*) 发表于:2010-05-13 02:24:22
<html> <head> <title>position属性</title> <style type="text/css"> <!-- body{ margin:10px; font-family:Arial; font-size:13px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; width:100%; height:100%; } #block{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:absolute; /* absolute绝对定位 */ right:20px; left:30px; /* 同时设置4个位置 */ bottom:10%; top:10%; } --> </style> </head> <body> <div id="father"> <div id="block">absolute</div> </div> </body> </html> 请问管理员这段教程里的代码在FF显示正常在IE显示不正常是怎么回事?
管理员回复:一般情况下是用两个方向来控制,当一个元素被绝对定位后,它会以以容纳下它内容的最小宽度显示。建议改用定宽和高的形式
tichan(119.126.*.*) 发表于:2009-08-19 22:39:16
我跟第7课学的。我弄了一个父DIV居中,子DIV固定位置top55px left 166px。然后浏览器不最大化或者改变浏览器窗口大小, 发觉父div会动,而子div不会跟父起动。我想要子嵌入到父里面,父改变的时候,子也改变,而不固定在一起 怎么做?
管理员回复:这个需要看你的代码,如果两个子div是相对父div定位的话,需要设置父div相对定位,子div绝对定位,这样可以实现,具体可参考css常用网站布局频道底部文字部分
奋斗(219.131.*.*) 发表于:2009-02-21 17:00:01
padding: 15px;是高度的多少啊~~
管理员回复:padding:15px是指容器的内边距是15px

出差旅游免费预订酒店

【视频教程】新手常见问题