欢迎来到天天文库
浏览记录
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中的浮动可以让某些元素脱离这种文
此文档下载收益归作者所有
