第14章DIVCSS布局基础.ppt
《第14章DIVCSS布局基础.ppt》由会员分享,可在线阅读,更多相关《第14章DIVCSS布局基础.ppt(34页珍藏版)》请在三一文库上搜索。
1、第14章 DIV+CSS布局基础,在对CSS技术的基础知识有了一定的掌握后就可以开始 学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来 说就是使用div标签作为容器,使用CSS技术来排布div标签 的布局方法。常用的CSS布局方式有浮动、定位等。 本章是学习CSS技术最重要的一个部分,读者应多实践 本章内各个实例。 本章内容包括: 了解DIV+CSS布局的流程 学习盒模型以及盒模型的基本元素 学习页面元素的布局方式 实例制作歌曲专辑列表 实例制作给图片加入信息,14.1 初识DIV+CSS布局的流程,本节通过分析一 个企业主页的排 布方式来讲解初 步了解DIV+CSS 布局的方法
2、。该 网页的效果图显 示如图所示。,14.2 了解盒模型,盒模型是DIV+CSS布局的基础,要实现DIV+CSS布局 必需了解盒模型的原理。在页面上的每个元素都能看做一个 容器,这个容器就是一个盒子。例如,p标签是一个能装文 字的容器,它的高度就是所承载文字的高度。使用 DIV+CSS布局,div标签就是布局中所用到的容器。大部分 人认为只有div标签能作为容器来安排布局。其实在XHTML 页面中几乎所用的标签都是容器,都能被当作容器来使用。 页面上的每个容器都占有一定的位置,有一定的大小。页面 上的每个容器都会影响其他容器的排布,它们相互作用,而 形成一个页面的布局。,14.2.1 div标
3、签的盒模型例子,以下以div标签的盒模型为例子,讲述基本盒模型的基 本概念。【示例】本例子讲述基本盒模型的概念。,14.2.2 基本盒模型,下图所示为基本盒模型。在页面中的所有元素都遵 循该模型的设置方式。,14.2.3 边距,边距用于设置页面元素与其它元素的距离。CSS的 margin属性用于设置边距距离。 1用长度单位设定margin的值 例14-3 2用百分比设定margin的值 例14-4 3边距值的缩写: 如果提供全部四个参数值,将按上右下左的顺 序作用于四边。 如果只提供一个,将用于全部的四边。 如果提供两个,第一个用于上下,第二个用于左 右。 如果提供三个,第一个用于上,第二个用
4、于左右, 第三个用于下。例14-5,4单边距值:margin-top 、margin-right 、margin-bottom 、margin-left 5边距重叠 例14-6 注:在边距重叠时,会淘汰边距较小的一个。边距重叠 只发生在边距属性中,补白和边框都不会出现重叠现象。,14.2.4 补白,补白用于增加页面元素边框与内容之间的空间。CSS的 padding属性用于设置补白。 1用长度单位设定padding的值 例14-7 2用百分比设定padding的值,其计算标准是以该元素的父元素宽高为基准。 例14-8,3.补白值的缩写: 如果提供全部四个参数值,将按上右下左的顺序 作用于四边。
5、如果只提供一个,将用于全部的四条边。 如果提供两个,第一个用于上下,第二个用于左右。 如果提供三个,第一个用于上,第二个用于左右,第三个用 于下。 4.单补白值:padding-top 、padding-right 、padding-bottom 、padding-left,14.2.5 边框,边框是页面元素可视范围的最外圈。边框包围的范围包 括页面元素的补白和内容。CSS中提供以下三个设置边框的 属性: 1边框样式border-style 参数: none : 无边框。与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+
6、与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边,border-style也包括border-top-style 、borde
7、r-right-style 、 border-bottom-style 、border-left-style 例14-9 2边框宽度border-width ,在设定边框宽度之前,必须先指定边框的样式。 参数: medium : 默认宽度 thin : 小于默认宽度 thick : 大于默认宽度 length : 由浮点数字和单位标识符组成的长度值。不可为负值。 例14-10 border-top-width 、border-right-width 、border-bottom-width 、border-left-width,3边框颜色border-color 也包括border-top-c
8、olor 、border-right-color 、border-bottom-color 、border-left-color 4边框缩写,14.3 页面元素的布局,在了解基本盒模型后,就要开始进入页面元素布局的学 习。这一节是学习DIV+CSS布局方式最重要的一节,内容 对初学者而言比较深。但是只要细心理解每个讲解实例就能 深入了解页面元素布局的基本原则。页面元素布局的核心是 定位和浮动的基本原理以及块级元素与行内元素的区别。掌 握了本小节后就能对DIV+CSS布局的原理有相当清晰的理 解。,14.3.1 块级元素与行内元素,所有的XHTML页面元素只有两种,一是块级元素,一是行内元素。表
9、中列出了XHTML中常见的块级元素和行内元素。,块级元素和行内元素的区别,在默认情况下,块级元素在页面中垂直排列,行内元素在页面中水平排列。块级元素一般用作其它页面元素的容器,块级元素一般都从新行开始,它可以容纳块级元素和行内元素。行内元素只能容纳文本或者其它行内元素。使用CSS的display属性中的block和inline值,分别代表块级元素和行内元素。 例14-11,14.3.2 CSS布局方式:常规流,CSS有三种基本的布局方式,分别是常规流、浮动和定 位。所谓常规流(normal flow)是指页面元素按照所在 XHTML文档的位置顺序排列的布局方式。在没有添加其他 布局方式的情况下
10、,页面遵循常规流的布局方式。,14.4 CSS布局方式:浮动,使用浮动布局是目前网页制作中最为常用的方式。应用 了浮动的元素全部都会成为块级元素,并且脱离原来的常规 流模式。应用了浮动的元素可以向页面的左边或者右边移动 ,直到其边缘接触到其父元素的边框或者另外一个浮动元素 的边框。 CSS提供float属性用于设置元素的浮动,它包含三个 值,分别是left、right和none。设置浮动为left值,元素向 页面左边浮动;设置浮动为right,元素向页面右边浮动; 设置浮动为none,元素不浮动。,14.4.1 两个元素的浮动应用,在页面布局中,很多时候 会使用两个元素的浮动应 用。例如,页面
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 14 DIVCSS 布局 基础

链接地址:https://www.31doc.com/p-3470562.html