第 五章 DIV+CSS 基础布局

1、网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6欢迎来到李老师课堂第五章 DIV+CSS 基础布局5.1 CSS定位5.2 盒子模型5.3 块元素和内联元素网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局需要DIV“圈地布局”DIV+CSS布局1、什么是DIVDiv与其他HTML标签一样，是一个HTML所支持的标签，在代码中应用。标签只是一个标识，作用是把内容标识在一个区域，并

2、不负责其他事情，div只是CSS布局工作的第一步，需要通过Div将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局需要DIV“圈地布局”网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局需要DIV“圈地布局”LOGO导航nav广告大图banner左边内容右边内容底部版权头部 header广

3、告 banner 内容 content 页脚 footer主体 main 中间内容网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局position定位定位的基本思想: 定位 (Positioning) 属性允许你对元素进行定位它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个

4、元素甚至浏览器窗口本身的位置网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局定位的基本思想Position四属性 相对定位 绝对定位 固定定位网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局静态相对绝对固定定位的基本思想Position四属性相对定位绝对定位固定定位relative相对定位如果对一个元素进行相对定位，它将出现在它所在的位置上。通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动. .adv_relative position: rela

5、tive; left: 30px; top: 20px;网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局定位的基本思想Position四属性 相对定位 绝对定位 固定定位absolute绝对定位元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。 .adv_absolute position: absolute; left: 30px; top: 20px; 网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局定位的基本

6、思想Position四属性 相对定位 绝对定位 固定定位第五章 DIV+CSS 基础布局5.1 CSS定位5.2 盒子模型5.3 块元素和内联元素网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局盒子模型网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局content上边框左边框下边框右边框上边距margin-top下边距margin-bottom左边距margin-left右边距margin-right上填充padding-top左填充padding-left右

7、填充padding-right下填充padding-bottomCSS允许指定字体、行间距、颜色、边框、背景阴影和图形，以及边距和填充等。使用CSS控制Div。边距和填充在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局content上边距下边距左边距右边距上填充左填充右填充下填充边距和填充边框和背景边距和填充在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。网页制作基础Html+Div+CSS零基础Adobe Dr

8、eamweaver cs6第五章 DIV+CSS 基础布局边距和填充边框和背景margin 边距属性 margin-top 上边距margin-right 右边距 margin-bottom 下边距margin-left 左边距中心链接符，用于属性间的数据链接边距和填充在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局边距和填充边框和背景padding 填充属性padding -top 上填充padding -right 右填充padding -b

9、ottom 下填充padding -left 左填充中心链接符，用于属性间的数据链接边框和背景Border属性是内边距（填充）和外边距的分界线，可以分离不同的HTML元素。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局边距和填充边框和背景上边框下边框右边框左边框边距和填充在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局边距和填充边框和背景border 边框属性语法格式Borde

10、r： border-width | border-style | border-color；border top-color 上边框颜色border -right-color 右边框颜色border -bottom-color 下边框颜色border -left-color 左边框颜色border-style：该属性下提供了9个选项值可供选择：none（无） dashed（虚线）dotted（点划线） solid（实线）double（双线） groove（槽状）ridge（脊状） inset（凹陷）outset（凸出）border-radius:CSS3中的新增属性，设置圆角框。border-

11、collapse：边框是否合成单一边框collapse 合并separate 分开border-spacing：相邻边框的距离，前提是“分开”。第一个选项表示垂直间距，第二个选项表示水平间距第五章 DIV+CSS 基础布局5.1 CSS定位5.2 盒子模型5.3 块元素和内联元素网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局块元素和内联元素（行内元素）HTML代码元素服务于特定的目的。标签可以创建结构、应用格式化效果、标识合乎逻辑的内容，或者发生交互。创建独立的标签成为块（block）元素，在另一个标签的主体内执行其工作的标

12、签称为内联（inline）元素。 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ; 行内元素: span,strong,a等元素 即：内容显示在行中称 行内框; 使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局块元素内联元素块元素在标准文档流里面，块级元素具有以下特点：总是在新行上开始，占据一整行；高度，行高以及外边距和内边距都可控制；宽度始终是与浏览器宽度一样，与内容无关；它可以容纳内联元素和其他块元素。网页制作基础Html+Div+CSS零基础Adobe Dreamweaver cs6第五章 DIV+CSS 基础布局块元素内联元素内联元素（行内元