欢迎来到天天文库
浏览记录
ID:50050203
大小:5.08 MB
页数:26页
时间:2020-03-08
《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第12章 控制元素布局.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第12章控制元素布局在网页的设计中,元素布局的控制是非常重要的。好的网站,元素的布局一定也是非常漂亮的。只有在熟练掌握了元素的布局之后,在CSS的制作中才能如鱼得水。12.1块级元素和内联元素在讲解定位之前,需要先来了解两个概念——块级元素和内联元素。在定位中,块级元素和内联元素它们定位的效果是不一样的。12.1.1块级元素和内联元素的概念块级元素生成的是一个矩形框,并且和相邻的块级元素依次竖直排列,不会排在同一行。例如
元素、
2、本的显示方式,我们常用到的、、都属于内联元素。内联元素的显示特点就是像文本一样的显示,各个元素之间横向排列,到最右端自动换行,不会独自占据一个行。12.1.2元素和元素为了更好的理解块级元素和内联元素,这里重点介绍在CSS布局中经常使用的元素和元素。利用这两个元素,加上CSS对其样式的设计,可以很方便的实现各种效果。1.元素元素简单而言就是一个独立的对象,它是一个标准的块级元素,用它可以容纳各种元素,从而方便排版。在用CSS设置样式时只需要对进行相应的控制3、,其中包含的各个元素都会随之改变。元素语法如下所示。各种元素或文字2.元素元素与元素一样,作为容器标记而被广泛应用在HTML语言中。在和之间同样可以容纳各种HTML元素,从而形成独立的对象。元素与元素的区别在于,元素是一个块级元素,它包围的元素会自动换行,而元素是一个内联元素,它包围的元素不会自动换行。元素语法如下所示。各种元素或文字12.2定位CSS中的网页布局,使用的都是块形式,而块4、出现在网页中的哪个位置,所采用的就是定位的方式。定位(positioning)就是允许网页开发者精确定义元素出现的相对位置。这个相对位置可以是相对父级元素、另一个元素或浏览器窗口。12.2.1定位方式在CSS中可以使用position属性来设置定位的模式,position属性的语法代码如下所示:position:static5、relative6、absolute7、inherit;12.2.2偏移在上一节中的定位模式里,有三种定位模式(relative、absolute和fixed)都需要使用偏移属性来指定定位的位置。在CSS中,偏移量有四个属性:left、ri8、ght、top和bottom,分别代表左偏移量、右偏移量、上偏移量和下偏移量。其语法代码如下所示:left:长度9、百分比10、auto11、inheritright:长度12、百分比13、auto14、inherittop:长度15、百分比16、auto17、inheritbottom:长度18、百分比19、auto20、inherit12.2.3综合运用学习了定位和偏移,知道了定位有四种不同的模式,下面我们结合偏移来分别介绍这几种模式的不同之处。1.静态定位静态定位模式是定位模式中的默认定位模式。在该模式中,对定位没有任何要求,完全是由浏览器自动生成,对于块级元素来说,通常是生成一个矩形框,如div21、层等。对于内联元素来说,则按正常的流生成,如b元素等。将元素的position属性值设为static可以设置元素的静态定位。由于静态定位模式并没有对元素在定位方面指出任何要求,因此所有的偏移属性在该模式下都是不起作用的。2.绝对定位绝对定位,是相对于父级元素的四个边框而言的,通常可以把整个网页(或者说是body元素)看成是一张纸,而绝对定位就是将块放在网页的某个位置。至于具体将块放在网页的哪个位置,就由偏移量来决定的了。将元素的position属性值设为absolute就可以设置元素的绝对定位。3.相对定位如果说绝对定位是相对网页的定位,那么相对定位就是相对22、元素自己的定位。所谓相对元素自己的定位是指元素相对于没有设置position属性之前的位置。将元素的position属性值设为relative可以设置元素的相对定位。12.2.4定位元素的层叠次序当一个页面内有多个层的时候,就需要设置这些层的层叠顺序,这样才不会将页面中需要显示的内容遮挡住。一般情况下,越晚添加的层,位置也越靠上。设置层叠顺序的语法是:z-index:顺序号12.3浮动通常在一个网页文档里,文档流都是从上到下、由左而右流动的。对于内联元素而言,创建了一个元素之后,会在其右接着创建其他元素;对于块级元素而言,在创建了一个元素之后,会在其下方接着23、创建其他元素。CSS中的浮动可以让某些元素脱离这种文 当前文档最多预览五页,下载文档查看全文 侵权申诉 举报 1 1 2 3 4 5 / 26 此文档下载收益归作者所有 下载文档 当前文档最多预览五页,下载文档查看全文 点击下载本文档 版权提示 下载文档 举报 温馨提示: 1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。 2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。 3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。 4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。 相关文章 更多 HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第7章框架.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第5章多媒体滚动字幕和.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第14章网页布局综合案例——宝贝.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第13章网页布局与设计技巧.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第10章设置背景边框边.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第9章设置文字和文本样式.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第4章表格.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第3章超链接.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第1章认识网站开发.ppt HTML+CSS+DIV网页设计与布局教学课件作者聂斌1_第2章网页文字和图片.ppt 相关标签 布局 聂斌 12 ppt 课件 网页 教学 元素 作者 设计 控制
3、,其中包含的各个元素都会随之改变。
4、出现在网页中的哪个位置,所采用的就是定位的方式。定位(positioning)就是允许网页开发者精确定义元素出现的相对位置。这个相对位置可以是相对父级元素、另一个元素或浏览器窗口。12.2.1定位方式在CSS中可以使用position属性来设置定位的模式,position属性的语法代码如下所示:position:static
5、relative
6、absolute
7、inherit;12.2.2偏移在上一节中的定位模式里,有三种定位模式(relative、absolute和fixed)都需要使用偏移属性来指定定位的位置。在CSS中,偏移量有四个属性:left、ri
8、ght、top和bottom,分别代表左偏移量、右偏移量、上偏移量和下偏移量。其语法代码如下所示:left:长度
9、百分比
10、auto
11、inheritright:长度
12、百分比
13、auto
14、inherittop:长度
15、百分比
16、auto
17、inheritbottom:长度
18、百分比
19、auto
20、inherit12.2.3综合运用学习了定位和偏移,知道了定位有四种不同的模式,下面我们结合偏移来分别介绍这几种模式的不同之处。1.静态定位静态定位模式是定位模式中的默认定位模式。在该模式中,对定位没有任何要求,完全是由浏览器自动生成,对于块级元素来说,通常是生成一个矩形框,如div
21、层等。对于内联元素来说,则按正常的流生成,如b元素等。将元素的position属性值设为static可以设置元素的静态定位。由于静态定位模式并没有对元素在定位方面指出任何要求,因此所有的偏移属性在该模式下都是不起作用的。2.绝对定位绝对定位,是相对于父级元素的四个边框而言的,通常可以把整个网页(或者说是body元素)看成是一张纸,而绝对定位就是将块放在网页的某个位置。至于具体将块放在网页的哪个位置,就由偏移量来决定的了。将元素的position属性值设为absolute就可以设置元素的绝对定位。3.相对定位如果说绝对定位是相对网页的定位,那么相对定位就是相对
22、元素自己的定位。所谓相对元素自己的定位是指元素相对于没有设置position属性之前的位置。将元素的position属性值设为relative可以设置元素的相对定位。12.2.4定位元素的层叠次序当一个页面内有多个层的时候,就需要设置这些层的层叠顺序,这样才不会将页面中需要显示的内容遮挡住。一般情况下,越晚添加的层,位置也越靠上。设置层叠顺序的语法是:z-index:顺序号12.3浮动通常在一个网页文档里,文档流都是从上到下、由左而右流动的。对于内联元素而言,创建了一个元素之后,会在其右接着创建其他元素;对于块级元素而言,在创建了一个元素之后,会在其下方接着
23、创建其他元素。CSS中的浮动可以让某些元素脱离这种文
此文档下载收益归作者所有