基于工作过程的网页设计与制作教程ppt课件.ppt

DIV 1 单行单列结构 1 宽度固定宽度固定主要是设置DIV对象的width属性 举例说明 图10 7中的DIV标签都属于宽度固定的标签 DIVwidth 200px 高度属性为 height 200px 2 宽度自适应自适应布局能够根据浏览器窗口的大小 自动改变其宽度或高度 是一种非常灵活的布局形式 自适应布局网站对于不同分辨率的显示器都能提供最好的显示效果 单列宽度自适应布局只需要将宽度由固定值改为百分比值的形式即可 如果将实现的代码中的width 200 修改为width 75 大家可以浏览测试 DIV常见布局设计 1 单行单列结构 3 单列居中上述例子的特点是Div位于左上方 宽度固定或自适应 在网页设计中经常见到的形式是网页整体居中 在传统的表格布局方式中 使用align center 可以实现表格的居中 使用CSS的方法也能够实现内容的居中 CSS代码如下 Divtest1 height 80px width 500px background color FFCC00 margin top 0px margin right auto margin bottom 0px margin left auto DIV常见布局设计 2 二列布局结构 1 二列固定宽度对于列式布局与单列布局类似 只不过需要两个DIV标签和两个CSS样式 利用float属性来实现两列式布局 CSS代码如下 divleft float left height 100px width 200px border 10pxsolid CCFF00 background color F2FAD1 divright float left height 100px width 200px border 10pxsolid 00FFCC background color FFFF00 DIV常见布局设计 2 二列布局结构 在body中插入两个DIV标签 代码如下 此处显示id divleft 的内容此处显示id divright 的内容将上述两个样式表分别应用于两个Div对象 如图所示 DIV常见布局设计 2 二列布局结构 divleft和divright两个样式都使用了浮动 float 属性 该属性的值指出了对象是否浮动以及如何浮动 Float表示不浮动 而使用left时 对象向左浮动 因此对于第2个DIV来说 将向左浮动 即流到第1个DIV对象的右侧 使用right时 对象将向右浮动 如果将 divright的float值设置为right 将使得 divright对象浮动到网页的右侧 而 divleft对象由于设置了 float left 属性而浮动到了网页的左侧 如图所示 DIV常见布局设计 2 二列布局结构 如果结合margin属性 调整两个布局块之间的距离 在样式 divleft和 divright中添加 margin 10px 则第2个DIV和第1个DIV之间会保留20px的距离 如图所示 如果没有设置margin属性 则由于设置了 float left 的属性 第2个DIV会紧紧贴着第1个DIV对象 DIV常见布局设计 2 二列布局结构 2 二列自适应宽度对于二列式布局方式 除了固定宽度 象表格一样还可以做到自适应宽度 从单列自适应布局中可以看出 将宽度值设定成百分比即可实现自适应 重新定义CSS代码如下 divleft margin 10px float left height 150px width 30 border 10pxsolid CCFF00 background color F2FAD1 divright margin 10px float right height 150px width 50 border 10pxsolid 00FFCC background color FFFF00 DIV常见布局设计 2 二列布局结构 左栏设置宽度为30 右栏设置宽度为50 这种二分法是常见的一种网页布局结构 左侧一般都是导航 右侧是内容 如图所示 DIV常见布局设计 2 二列布局结构 上面的结构采用百分比宽度 但是没有占满整个浏览器窗口 如果将右栏的宽度设置为70 那么右栏将被挤到第2行 从而就失去了左右分栏的效果了 如图所示 这个问题的原因是由CSS盒模型引起的 在CSS布局中 一个对象的真实宽度是由对象的宽度 左右填充 左右边框 左右边界相加组成的 因此 左栏的宽度不仅仅是浏览器窗口宽度的30 还应当加上左右填充 左右边框 左右边界 右栏的宽度也应当是浏览器窗口的70 加上左右填充 左右边框 左右边界 因此最终的宽度超过了浏览器窗口的宽度 从而使右栏被挤到了第2行显示 DIV常见布局设计 2 二列布局结构 在实际使用中 如果要达到满屏效果 简单的办法就是避免使用边框和边界属性 CSS代码如下 divleft float left height 150px width 30 background color F2FAD1 divright float right height 150px width 70 background color FFFF00 使用上述代码后 即可实现两列自适应且左右与浏览器填满的效果 如图所示 DIV常见布局设计 2 二列布局结构 利用CSS定位属性也可以实现两列的自适应布局 其CSS代码如下 divleft float left height 150px width 20 background color F2FAD1 position relative divright height 150px margin left 22 background color FFFF00 DIV常见布局设计 2 二列布局结构 divleft对象的宽度为20 所以只需要把 divright对象的左边界宽度设置成大于或等于20 就可以了 上述代码中 margin left 22 正是设置 divright的左边界为22 如图所示 左边界为22 DIV常见布局设计 2 二列布局结构 二列自适应宽度布局的实际预览效果如图所示 DIV常见布局设计 2 二列布局结构 3 左列固定 右列宽度自适应前面学习了两列宽度均为百分比值 从而实现了两列宽度自适应 在实际使用时 有时需要左栏固定 右栏根据浏览窗口的大小自动适应 实现的方法很简单 只需要将左侧宽度设置为固定值 右栏不设置任何宽度值 并且右栏不浮动 CSS代码 divleft float left height 150px width 150px border 10pxsolid CCFF00 margin 10px background color F2FAD1 divright height 150px margin 10px border 10pxsolid CCFF00 background color FFFF00 DIV常见布局设计 2 二列布局结构 使用上述代码后 左栏宽度固定在150px 而右栏将根据浏览器窗口的大小自动适应 如图所示 DIV常见布局设计 2 二列布局结构 4 二列固定宽度居中在上个核心知识点中介绍了如何使一个DIV对象居中显示 在CSS代码中使用边界属性 margin 0pxauto 即可实现 那么 在两分栏结构中 需要控制左分栏的左边界和右边界和右分栏的右边界相等 这时候需要利用DIV的嵌套设计来完成 使用一个DIV作为容器 将两列分栏的两个DIV放入容器中 从而能够实现两列居中显示 将两分栏的两个DIV放入一个id为layout的DIV布局对象中 网页的代码如下 divleft左栏divright右栏 DIV常见布局设计 4 二列固定宽度居中上述的3个Div的CSS代码如下 layout width 500px margin 0pxauto divleft float left height 150px width 100px border 10pxsolid CCFF00 background color F2FAD1 divright float left height 150px width 360px border 10pxsolid CCFF00 background color FFFF00 DIV常见布局设计 这里通过 margin 0 xpauto 设置 layout 的居中属性 从而使里面的内容也居中 根据盒模型理论 一个对象的实际宽度由对象的宽度 左右边界 左右边框 左右填充相加而成 所以 layout 的宽度设置为500px 即 100px 360px 20px 20px 500px 布局的预览效果如图所示 DIV常见布局设计 1 左右固定宽度中间宽度自适应三列式的布局是网页中的常见布局形式 采用浮动定位方式 可以很容易地实现多列固定宽度 以下是三列固定宽度的CSS代码 divleft float left height 150px width 100px border 10pxsolid CCFF00 background color F2FAD1 divcenter float left border 10pxsolid 22FF00 height 150px width 300px background color F2FAff 3 三列式布局结构 DIV常见布局设计 divright float left height 150px width 300px border 10pxsolid CCFF00 background color FFFF00 上述布局的效果如图10 19所示 DIV常见布局设计 使用绝对定位将左栏和右栏的位置确定下来 其CSS代码如下 divleft float left height 150px width 100px border 10pxsolid CCFF00 background color F2FAD1 position absolute left 0px top 0px divright float right height 150px width 100px border 10pxsolid CCFF00 background color FFFF00 position absolute right 0px top 0px DIV常见布局设计 然后 设置中间栏的左边界和右边界 使它的左边界等于左栏的宽度 它的右边界等于右栏的宽度 从而可以使让出的宽度正好显示左栏和右栏 divcenter border 10pxsolid 22FF00 height 150px background color F2FAff margin right 120px margin left 120px margintop 0px 为了达到最好的预览效果 定义body标签的边界和填充为0px CSS代码如下 body margin 0px0px0px0px padding 0px0px0px0px DIV常见布局设计 2 顶行三列式布局顶行的三列式布局结构是顶行自动适应宽度 左右栏绝对定位 中间栏自适应宽度 这是常见的一种网页布局形式 这里一共需要4个DIV标签 分别是顶行 左栏 中间栏和右栏 其DIV部分的代码如下 divtop顶行divleft左栏divcenter中间divright右栏首先编写 divtop的CSS代码如下 divtop height 100px border 10pxsolid FF