(精)TP02 网页布局.pptVIP

如何控制CSS样式2-1 盒模型 元素内容 填充（也称内边距） 边框 边界（也称外边距） 网页中的所有元素可以看作一个一个的“盒子” 如何控制CSS样式2-2 样式控制思路 盒内样式修饰 盒子位置布局 盒内样式： 设置网页元素的颜色、字体等外观 盒子位置布局：确定盒子所在的位置、和其他网页元素的关系 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 为什么需要盒子属性 盒子模型平面图 盒子模型三维立体图：注意背景色在背景图的下一层 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向 什么是盒子属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left margin外边距 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px; 分别代表什么含义？ 演示示例：margin的用法 border属性 border-color border-width border-style border边框 border-top border-right border-bottom border-left border border-left … 修饰属性 四个方向 缩写形式 border 每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置 border-style: none; border: 1px solid red; border-right: 5px dotted blue; 分别代表什么含义？ style type=text/css .textBorder { border-width:1px; border-style:solid; } /style /head body form action= method=post p名字： input name=fname type=text class=textBorder //p p密码： input name=pass type=password class=textBorder size=21 /p 细边框的样式 使用border属性修饰表单 三种布局技术 框架布局 表格布局 DIV+CSS布局 文件1： top.html 文件2：left.html 文件3： right.html 框架文件的特点 多个页面文件组成 主文件： index.html 创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件 frameset cols=25%,50%,* rows =50%,* border=5 frame src=the_first.html …… /frameset 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 引用各窗口要显示的网页文件 框架的基本结构3-1 纵向分割窗口 …… frameset bordercolor=red rows=25%,50%,* border=5 frame src=subframe/the_first.html name=top / frame src=subframe/the_second.html name=middle / frame src=subframe/the_third.html name=bottom / /frameset noframes body 如浏览器不支持框架，才显示body内的内容 /body /noframes …… 注意： 1、框架和body不能共存 2、为了兼容性，可以使用noframes标签 窗口边框的宽度 框架的基本结构3-2 将窗口分割成上中下3部分 推荐：将窗口子文件放在单独的文件夹中用于区分 操作演示1：纵向分割窗口 横向分割窗口 …… frameset cols=200,*,200 border=5 bordercolor=#FF0000 frame name