布局入门.pptVIP

DIV + CSS 布局入门 阶段一：页面元素的类型 div 是什么 div的全称: division (区分) 使用方法：div……/div 职责：负责页面的结构 特性： 容器性质。 可内嵌table，还可嵌文本和其它的html代码。 世华财讯页面 页面元素的分类 页面元素分为两大类：块元素和行元素 块元素的代表：div 行元素的代表：span 块元素 块元素 块元素特性： 可以容纳行元素和其他块元素； 会顺序以每次另起一行的方式一直往下排。 行元素 行元素 行元素特性： 只能容纳文本或者其他行元素； 不可以容纳块元素； 会以顺序横排的方式一直往后排下去。 元素自身的属性 Chrome中的Margin Padding Border IE中 Chrome中 阶段一总结：两个要点 元素的类型 行元素 块元素 元素的构造属性 边框(border) 填充(padding) 间隙(margin) 背景色(background-color) 背景图(background-img) 阶段二：实际应用 为什么选择DIV进行布局 布局要采用块元素：因为块元素可以包含行元素和块元素，而行元素则做不到； DIV的语义是分区的意思； 编写html代码 div class=“header”头部内容/div div class=“nav”导航菜单/div div class=“banner”广告条/div div class=“contentL”内容一/div div class=“contentR”内容二/div div class=“contentB”内容三/div div class=“footer”版权信息/div 编写css代码 . contentL{ float：left; (使得指定元素脱离普通的文档流而产生的特别的布局特性) width：400px; background-color：#fff; } 提示： 块元素可以转换为行元素； 行元素可以转换为块元素； 如何改变块布局 DIV是块元素，两个DIV排列时，会竖着排，如何让他能横排呢？ . contentL{ float:left; } 元素特性的改变 块元素改为具有行元素的特性： display:inline；(改为行元素) float:left；(向左浮动) 提示:只有块元素可以使用 行元素改为具有块元素的特性： display:block ； 元素位置的改变 改变元素的定位属性 position:relative; position:absolute; top bottom left right 阶段三： 使用div布局-示例 3.1 布局步骤1 1、使用div定义语义结构 一个典型的版面分栏结构：页头、导航栏、内容、版权 结构代码： div id=“header”/div div id=“nav”/div div id=“content”/div div id=“footer”/div 把这四个盒子装进一个更大的盒子，body中，如下 body 上面四行代码 /body 3.2 布局步骤2 这样，我们定义最外边的大盒子（body）的属性，让它在页面居中，并定义其宽度为760像素，加上边框，如下： body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0px auto; height:auto; width:760px; border:1px solid #006633; } 3.3 布局步骤3 对于页头，我们应用一幅背景图，并在其下边界设计一定的间隙，使页头的图片不要和下面的导航栏连在一起，如下： #header{ height:100px; width:760px; background-image:url(headPic.gif); background-repeat:no-repeat; margin:0px 0px 3px 0px; } 3.4 布局步骤4 对于导航栏，做成像一个个小按钮，鼠标移上去会改变按钮的背景色和字体色，而这些小按钮我们也可以理解为小盒子，则是一个盒子嵌套的问题了，如下： #nav{/*定义一个导航栏的长盒子*/ height:25px; width:760px; font