DIVCSS网页布局第三课.ppt

—高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! —高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! 主讲：张鹏 Div+Css网页布局第三课DIV+CSS网页布局 主讲：张鹏邮箱：seo100@126.com 目标 网页元素分类 CSS盒子模型 常见的DIV+CSS布局方式 什么是div 一、 div是什么 div是一个容器，能够放置内容，例如：div内容/div 说明：XHTML页面中的每一个标签对象几乎都可以称得上是一个容器，例如：h1这是一段标题/h1 div是XHTML中指定的，专门用于布局设计的容器对象。CSS布局中，div是这种布局的核心对象，做一个简单的布局只需要两样东西div与CSS 因此也有人称CSS布局为div+css布局。 CSS盒子模型 W3C组织建议把所有网页上的对像都放在一个盒(box)中，-----盒子模型 设计师可以通过创建定义来控制这个盒子的属性，这些对像包括段落、列表、标题、图片以及层div。 盒模型主要定义四个区域：内容(content)、填充(padding)、边框(border)和边界(margin)。 这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁 整个盒模型在页面中所占的宽度是由 左边界+左边框+左填充+内容+右填充+右边框+右边界组成 CSS盒子模型 CSS盒子模型 由“盒子”堆出来的网页版面 CSS中元素的分类 元素分类：不同的元素在文档类型定义DTD(Document Type Definition)内有默认的分类，可以通过CSS修改分类的定义。 1、块级元素：{display:block} 每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，如：div[层]、标题、段落、表格、body等。 块级元素只能作为其他块级元素的子元素，而且需要一定的条件。 2、内联[内嵌]元素：{display:inline} 内联[内嵌]元素不需要在新行内显示，而且也不强迫其后的元素换行，如：a、em、span等。 内联元素可以为任何元素的子元素。 3、隐藏元素{display:none} 当某个元素被设置为display:none的时候，浏览器会完全忽略掉这个元素，此元素将不会被显示，虽然存在于HTML文档内， 但是屏幕上不会被显示出来，也不会占据位置。 浮动float 什么是浮动？ 浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。 值： none:不浮动 left:对象向左浮动，而右侧的内容流向对象的右侧 right:对象向右浮动，而左侧的内容流向对象的左侧 深入布局技巧 浮动的清理(clear)：清理是浮动的另一个有用的工具，实现拒绝浮动对象对后面对象的影响。 技巧：当浮动了许多元素之后，突然需要另起一行时，可以制作一个空白的div标签，为其设置 clear:both;清除左右的浮动。 深入布局技巧 CSS 中溢出的使用 功能 语法 设置当对象的内容超过其指定高度及宽度时如何管理内容 overflow: visible[默认值。不剪切内容也不添加滚动条] , auto[在必需时对象内容才会被裁切或显示滚动条], hidden[不显示超过对象尺寸的内容],scroll[总是显示滚动条] 定位：position 属性：position 描述：设置对象的定位方式 值： static 静态定位：页面中的每一个对象的默认值。 absolute 绝对定位：将对象从文档流中分离出来，通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。 relative 相对定位：对象不从文档流中分离，通过设置left,right,top,bottom四个方向相对于自身位置进行相对定位。 * * 目标：让学员了解网站开发时设计时的工作以及设计时的各种处理原则 —高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! —高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! 主讲：张鹏 * * 目标：让学员了解网站开发时设计时的工作以及设计时的各种处理原则