3.3-Div+CSS3布局.ppt

《3.3-Div+CSS3布局.ppt》由会员分享，可在线阅读，更多相关《3.3-Div+CSS3布局.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.3 DIV+CSS3布局布局Div+CSS3布局布局在在传统的表格式布局中，之所以能的表格式布局中，之所以能进行行页面的排版布局面的排版布局设计，完全依，完全依赖于于表格表格标签。但表格布局需要通。但表格布局需要通过表格的表格的间距或者使用透明的距或者使用透明的gif 图片来填充布局板片来填充布局板块间的的间距，距，这样布局的网布局的网页中表格会生成大量中表格会生成大量难以以阅读和和维护的代的代码;而且表格布局的网而且表格布局的网页要等整个表格下要等整个表格下载完完单后才能后才能显示所有示所有内容，所以表格布局内容，所以表格布局浏览速度速度较慢。而在慢。而在Div+CSS3布局中布局中Di

2、v是是这种布局种布局方式的核心方式的核心对象，使用象，使用CSS3布局的布局的页面排版不需要依面排版不需要依赖表格，表格，仅从从Div的的使用上使用上说，做一个，做一个简单的布局只需要依的布局只需要依赖Div与与CSS3,因此也可以称因此也可以称为Div+CSS3布局。布局。Div布局布局Div与其他与其他HTML标签一一样，是一个，是一个HTML所支持的所支持的标签。与使用表格。与使用表格时应用用这样的的结构一构一样，Div 在使用在使用时也是同也是同样以以的形式出的形式出现，通，通过CSS样式可以式可以轻松地控制松地控制Div的位置，从而的位置，从而实现许多不同多不同的布局方式。使用的布局

3、方式。使用Div进行网行网页排版布局是网排版布局是网页设计制作的制作的趋势。Div概念概念Div元素是用来为HTML文档内大块的内容提供结构和背景的元素。Div的起始标签与结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由标签的属性来控制，或者是通过使用CSS样式格式化这个块进行控制。Div是一一个容器，在HTML页面的每个标签对象几乎都可以称得上是一个容器，如使用段落标签对象。Div插入插入与其他HTML对像一样，只需在代代码中应用这样的标签形式，将内容放置其中，便可以应用Div标签。Div对象除了可以直接放入文本和其他标签，多个Div标签也可以嵌套使用，最终的目的是合理的标

4、识出页面的区域。Div块元素元素每个块级元素默认占一行高度，行内添加一个块级元素后般无法添加其他元素(使用CSS样式进行定位和浮动设置除外)。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素。在HTML代码中，常见的块元素包括、等。Div行行内元素内元素行内元素也叫内联元素、内嵌元素等，行内元素般都是基于语义级的基本元素，只能容纳文本或其他内联元素:常见内联元素有标签。当display属性值被设置为inline时，可以把元素设置为行内元素。在常用的一些、和元素中等都是默认行内元素。CSS盒子模型盒子模型(Box Model)盒子模型是使用Div+CSS对网页元

5、素进行控制时一个非常重要的概念，只有很好地理能的掌握了盒模型及其中每个元素的用法，才能真正地控制页面中各元素的位置。CSS盒子模型概念盒子模型概念SS中，所有的页面元素都包含在一个矩形框内，这个矩形框称为盒子模型。盒模能描述了元素及其属性在页面布局中所占的空间大小，因此盒模型可以影响其他元素的位置及大小。一般来说，这些被占据的空间往往都比单纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数，来调节盒子的位置。CSS3盒子模型的特性盒子模型的特性边框默认的样式(border-style)可设置为不显示(none)。填充值(padding)可以为负。边果值(margin)可以为负，其显示效

6、果在各浏览器中可能不同。内联元素，例如，,定义上下边界不会影响到行高。margin属性属性margin属性用于设置页面中元素和元素之间的距离，即定元素周围的空间范围，是页面排版中一个比较重要的概念。其中，auto表示根据内容自动调整，length表示由浮点数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度。对于内联元素来说，左右外延边距可以是负数值。border属性属性border属性是内边距和外边距的分界线，可以分离不同的HTML元素，border的外边是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border属性值计算在内。border属性的语法格式如下。bord

7、er属性有3个子属性，分别是border-style(边框样式)、border-with(边框宽度)和border-color(边框颜色)。padding属性属性padding属性值可以是一个具体的长度，他可以是一个相対于上级元素的百分比，但不可以使用负值。Padding包括4个子属性，分别用于控制元素4周的填充，分別是padding-top（上填充）、Padding-right(右填充)、padding-bottom(下填充)和padding-left(左填充)。CSS布局常用属性布局常用属性CSS布局完全不同于传统表格布局，它将页面首先在整体上进行标签的分块，将页面分为若干个盒子，然后对各个盒子进行CSS定位，最后再在各个块中添加相应的内容。CSS布局页面最重要的手段就是利用浮动属性和定位属性设置元素位置。浮浮动属性属性float属性(浮动)float属性可以控制盒子左右浮动，直到边界碰到父元素或另一个元素。float属性语法格式如下。float:none|left|right;定位属性定位属性浮动布局虽然灵活，却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页元素的精确定位。position属性在CSS中，position属性用于定义元素的定位模式，其属性值常用有4个。实践与体践与体验 布局和美化旅游新布局和美化旅游新闻页面面谢谢 谢谢