第 五章 DIV+CSS 基础布局.pptx

网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6 ;第五章 DIV+CSS 基础布局;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;DIV+CSS布局 1、什么是DIV Div与其他HTML标签一样，是一个HTML所支持的标签，在代码中应用div/div。 div标签只是一个标识，作用是把内容标识在一个区域，并不负责其他事情，div只是CSS布局工作的第一步，需要通过Div将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。 div class=“命名”···/div div id=“命名”···/div ;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;position定位 定位的基本思???: 定位 (Positioning) 属性允许你对元素进行定位 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 ;网页制作基础Html+Div+CSS零基础 Adobe Dreamweaver cs6;relative相对定位 如果对一个元素进行相对定位，它将出现在它所在的位置上。 通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动. .adv_relative { position: relative; left: 30px; top: 20px;} } ;absolute绝对定位 元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，它的位置相对 于最初的包含块。 .adv_absolute { position: absolute; left: 30px; top: 20px; } } ;第五章 DIV+CSS 基础布局;盒子模型;边距和填充 在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。 ;边距和填充 在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。 ;边距和填充 在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。 ;边框和背景 Border属性是内边距（填充）和外边距的分界线，可以分离不同的HTML元素。 ;边距和填充 在CSS样式中可以使用margin属性来控制边距，使用paddin属性来控制填充。 ;第五章 DIV+CSS 基础布局;块元素和内联元素（行内元素） HTML代码元素服务于特定的目的。标签可以创建结构、应用格式化效果、标识合乎逻辑的内容，或者发生交互。创建独立的标签成为块（block）元素，在另一个标签的主体内执行其工作的标签称为内联（inline）元素。 1 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ; 2 行内元素: span,strong,a等元素 即：内容显示在行中称 行内框; 3 使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框 ;块元素 在标准文档流里面，块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽度始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。 ;内联元素（行内元素） 在标准文档流里面，内联元素具有以下特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度只与内容有关； ;常 见 的 块 元 素 和 内 联 元 素