项目六 DIV+CSS布局网页.ppt

项目六DIV CSS布局网页 掌握盒模型了解元素类型掌握DIV及其常用属性能够分析并使用DIV CSS布局网页 所有页面中的元素都可以看成是一个盒子 占据着一定的页面空间 一般来说这些被占据的空间往往都要比单纯的内容要大 因为盒子可以有边框 盒子内外都可以有边距 可以通过调整盒子的边框和边距等参数 来调节盒子的位置 一个盒子模型由content 内容 border 边框 padding 填充也叫内边距 和margin 外边距 这4个部分组成 如图所示 6 1任务1 认识盒模型 6 1 1盒模型概述 内边距 padding 外边距 margin 边框 border Padding与margin都有上 右 下 左四个值 当这些属性被赋值后 会影响盒子的宽度与高度 1 盒模型的宽度盒模型的宽度 margin left 左外边距 border left 左边框 padding left 左内边距 width 内容宽度 padding right 右内边距 border right 右边框 margin right 右外边距 2 盒模型的高度盒模型的高度 margin top 上外边距 border top 上边框 padding top 上内边距 height 内容高度 padding bottom 下内边距 border bottom 下边框 margin bottom 下外边距 实例 盒模型宽高计算div margin 30px padding 20px height 100px width 100px border solid20px CCFFFF 6 1任务1 认识盒模型 DIV的宽度 30px 20px 20px 100px 20px 20px 30px 240pxDIV的高度 30px 20px 20px 100px 20px 20px 30px 240px 6 1任务1 认识盒模型 6 1 2元素类型 HTML中的元素默认分为两种 块元素 blockelement 与行内元素 inlineelement 1 块元素块元素是独立的 显示时独占一行 常见的块元素有 p div ul li h1 dt 2 行内元素行内元素都会在一行内显示 常见的行内元素有 a img span strong 实例 元素类型 block background color 6CF inline background color F9F 6 1任务1 认识盒模型 块元素块元素在显示时会独占一行 常见的块元素有p ul li 行内元素行内元素在一行内显示 常见的行内元素有strong a span 在浏览器中预览效果如图所示 3 块元素与行内元素转换块元素与行内元素可以通过 区块 分类中display属性的block 块 与inline 行内 进行互相转换 6 1任务1 认识盒模型 division 是一个区块容器标记 它可称作为 DIVblock 或 DIVelement 或 CSS layer 或干脆叫 layer 与之间可以放置任何内容 包括其他的DIV标签 也就是说DIV是一个没有特性的容器而已 DIV块作为一个独立的对象 在CSS样式控制下有着灵活的表现形式 形成另外一种组织布局形式DIV CSS 6 2任务2 认识DIV标签 6 2 1插入DIV标签 创建一个HTML文档 执行 插入 布局对象 DIV标签 命令或点击 插入 面板 布局 DIV标签 打开 插入DIV标签 对话框 如图6 5所示 在这里必须设定一个类或ID 以便于应用CSS样式 图插入DIV标签对话框 3 在ID处输入 top 点击 确定 按钮 在Dreamweaver设计窗口出现如图所示DIV块 表明插入了一个id名为top的DIV标签 6 2 2设置DIV属性 DIV是容器 是块元素 也是一个盒子 主要的属性就是盒模型的一些基本属性 包括边框 内边距 外边距以及DIV容器的位置 创建一个ID为top的CSS规则 打开 top的CSS规则定义 对话框 DIV标签的常见属性主要是在 方框 边框 与 定位 分类里设定的 6 2任务2 认识DIV标签 方框分类属性点击 方框 分类 如图所示 1 width 设置DIV的宽度 2 height 设置DIV的高度 在此处width与height分别设为200 点击 确定 按钮 设计视图中的DIV 3 padding 设置DIV的内边距 也就是内容到边框的距离 4 margin 设置DIV的外边距 也就是边框到父容器或与其他容器之间的距离 设置所有padding为20 所有margin为20 点击 确定 按钮后效果如图所示 6 2任务2 认识DIV标签 5 float 浮动 定义元素浮动到左侧或右侧 以往这个属性总应用于图像 使文本围绕在图像周围 HTML中元素在浏览器中显示是按照流方式显示 行内元素从左到右 块元素从上到下 在CSS中 任何元素都可以浮动 浮动元素会生成一个块级元素 而不论它本身是何种元素 元素对象设置了float属性之后 它将脱离文档流的显示方式 不再独自占据一行 可以向左或向右移动 直到它的外边缘碰到包含它的边框或另一个浮动块的边框为止 后面的元素会围绕它显示 float属性有四个可用的值 left和right分别浮动元素到各自的方向 none 默认 使元素不浮动 inherit将会从父级元素获取float值 6 2任务2 认识DIV标签 实例 float属性div height 100px width 100px margin top 15px border 1pxdashed 33F 此处显示id div1 的内容此处显示id div2 的内容此处显示id div3 的内容 正常DIV显示 6 2任务2 认识DIV标签 给DIV设置float属性 让div1右浮动 div2左浮动 在style内添加如下代码 div2 float left div1 float right 添加后预览效果如图所示 6 2任务2 认识DIV标签 6 clear 清除浮动 其值有left right both none 如上例 要想让div3不受div2浮动的影响 恢复其原始文档流位置显示 则在style中插入CSS规则 div3 clear left 即可 预览效果如图所示 2 边框分类属性点击 边框 分类 如右图所示 6 2任务2 认识DIV标签 style 边框的样式 width 边框的粗细 color 边框的颜色 边框的三个属性可简写为 border widthstylecolor 例如 border 2pxsolidred 3 定位分类属性点击 定位 分类 如图所示 6 2任务2 认识DIV标签 1 position 定位 它有四个属性值 static 静态 relative 相对定位 absolute 绝对定位 fixed 固定 Static 默认值 无定位 元素按正常文档流显示 Relative 定位为relative的元素脱离正常的文档流 但其在文档流中的位置依然存在 所占用的空间依然保留 通过placement中的left right top bottom属性来设置相对于其在正常文档流位置所偏移的距离 相对定位对象可层叠 层叠顺序可通过z index属性控制 实例 relative相对定位 parent height 200px width 200px border solid2px sub height 80px width 100px border solid1px sub1 position relative left 30px top 30px background color C9F 6 2任务2 认识DIV标签 Relative相对static静态absolute 将被赋予此定位方法的对象从文档流中拖出 与relative的区别是其在正常文档流中的位置不再存在 使用left right top bottom属性相对于其最接近的一个具有定位设置的父级对象进行绝对定位 如果对象的父级没有设置定位属性 则依据body对象左上角作为参考进行定位 绝对定位对象同样可通过z index进行层次分级 6 2任务2 认识DIV标签 实例 绝对定位 父级没有设置定位属性 接上例 改变 sub1的定位为absolute 修改内容如下 absolute绝对 sub1 position absolute left 30px top 30px background color C9F 保存预览效果如右图所示 6 2任务2 认识DIV标签 实例 绝对定位 父级设置定位属性 接上例 改变 parent的定位为relation 修改CSS规则如下 parent height 200px width 200px border solid2px margin 20px0px0px20px position relative sub1 position absolute left 30px top 30px background color C9F 保存预览效果如右图所示 6 2任务2 认识DIV标签 fixed 特殊的absolute 总是以body为定位对象 按照浏览器窗口进行定位2 width与height 与方框里的一样 用于设置元素的宽高的 3 visibility 元素可见性 是指当块内元素中的内容超出边界后的显示设置 属性值有 inherit visible hidden Inherit 从父元素继承visibility的值 Visible 默认值 元素可见 Hidden 元素不可见 4 z Index 设置元素堆叠顺序 该属性设置一个定位元素沿z轴的位置 z轴定义为垂直延伸到显示区的轴 数字越大处于越上层 可以为正也可以为负5 overflow 溢出 当元素超过区块的容纳范围时会产生溢出 其属性值有visible hidden scroll auto Visible 默认值 超出部分显示 Hidden 超出部分隐藏 Scroll 产生滚动条 不管是否溢出都产生 Auto 自动 超出时产生滚动条 不超出时不产生滚动条 6 2任务2 认识DIV标签 6 clip 裁剪绝对定位元素 这个属性用于定义一个剪裁矩形 对于一个绝对定义元素 在这个矩形内的内容才可见 出了这个剪裁区域的内容会根据overflow的值来处理 剪裁区域可能比元素的内容区大 也可能比内容区小 实例 使用DIV CSS制作一个如下所示的网页布局效果 网页居中显示 结构代码如下所示 6 2任务2 认识DIV标签 CSS控制代码如下 container width 800px margin right auto margin left auto div border 1pxsolid CCC nav height 55px head height 180px left height 450px width 300px float left right height 450px width 496px float right 在水平方向上边框占了4个像素 footer height 60px clear both 6 2任务2 认识DIV标签 6 3任务3制作DIV CSS布局网页 茶业公司首页 6 3 1案例效果展示 布局规划图 6 3任务3制作DIV CSS布局网页 茶业公司首页 6 3 2搭建框架 6 3任务3制作DIV CSS布局网页 茶业公司首页 1 头部内容首页关于我们业务范围产品展示合作客户 6 3 3添加内容 6 3任务3制作DIV CSS布局网页 茶业公司首页 人才招聘联系我们2 banner内容banner由一张图片组成 光标放在 代码 视图中后 插入图片banner jpg 具体代码如下 3 主体内容A 左边内容从效果图上看 左边内容有一个圆角矩形的边框 上下圆角部分要切图作为图像插入来实现 因此左边内容分为上边框 主要内容 下边框三部分 两边的边框用背景图像实现 主要内容又分为上下两部分 标题与内容 其结构如图所示 6 3任务3制作DIV CSS布局网页 茶业公司首页 左边内容右边内容 6 3任务3制作DIV CSS布局网页 茶业公司首页 6 3任务3制作DIV CSS布局网页 茶业公司首页 6 3任务3制作DIV CSS布局网页 茶业公司首页 4 版尾版尾是版权声明 把光标放在 代码 视图中后 直接输入 Copyright2003 2014 漫想族文化传播有限公司AllRightsReserved版权所有 即可 至此 页面内容添加完毕 HTML文档结构完成 如图所示 6 3任务3制作DIV CSS布局网页 茶业公司首页 1 创建CSS文档2 文档CSS规则初始化具体代码如下 body font size 12px background image url images bg jpg background repeat repeat x margin 0px padding 0px container width 980px margin 50pxauto0pxauto 6 3 3美化网页 6 3任务3制作DIV CSS布局网页 茶业公司首页 3 美化头部具体代码如下 head height 137px headimg float left margin top 30px nav float right height 137px width 830px nav float right height 137px width 830px navullia color FFF text decoration none line height 180 padding 0px10px 6 3任务3制作DIV CSS布局网页 茶业公司首页 navullia hover background color F60 navulli text align center float left list style type none margin right 1px padding 010px border right 1pxsolid FFF width 80px navimg float right margin 20px0px navul clear both background image url images nav 01 jpg background repeat repeat overflow hidden 6 3任务3制作DIV CSS布局网页 茶业公司首页 4 美化bannerBanner处就是一张图片 因此不用美化 5 美化内容 1 左边内容美化 left height 210px width 636px float left background image url images bk center jpg background repeat repeat y right float right height 210px widt