第七讲层与行为.pptVIP

第七讲层与行为第1页，共19页，星期日，2025年，2月5日层的基本概念层的创建与管理层的操作嵌套层第2页，共19页，星期日，2025年，2月5日层的基本概念div标签与层的定义该标签用来定义网页上一个特定区域区域里可以包含文字、图片和表格等网页元素区域可以重叠常被用于网页布局div标签所定义的对象称为一个“层”；例7-1第3页，共19页，星期日，2025年，2月5日层的定位“position”属性：指采用什么方式设定层的位置“left”属性：设置层的左边缘到网页的左端的距离“top”属性：设置层的上连缘到网页最顶端的距离设置值说明absolute层的位置以网页的左上角为基准来设置relative层的位置以其原始值的位置来设置static层的位置以HTML默认的位置来设置例7-2第4页，共19页，星期日，2025年，2月5日图层的“Z轴”图层可以重叠为表示各图层的上下位置，故给每个图层一个序号，该序号称为“Z轴”序号值可取正、负和零。数值大的层在上面“z-index”属性：改变层的重叠顺序。例7-4第5页，共19页，星期日，2025年，2月5日层的特点：层是可移动的，表格是不可移动的。层是三维的（x，y，z三轴），表格是二维的。层具有可见性，可以隐藏。层的标签是divid=“层id”/div，也可以使用span/span标签。其属性不写在标签中，而是以CSS样式的id选择符写在head部分，故在body部分的代码十分简洁。第6页，共19页，星期日，2025年，2月5日层的创建与管理创建层的方法（3种）：“插入”-“布局对象”-“层”命令把“绘制层”按钮从“插入”面板中拖到“文档”窗口在“插入”面板的“布局”栏中单击“绘制层”按钮，在“文档”窗口中拖动鼠标即可第7页，共19页，星期日，2025年，2月5日“层”面板改变层的可见性改变层的堆叠顺序在“Z”列中，单击要改变的层的数字选择层并上下拖动禁止层重叠选定一个或多个层：按住shift键拖动鼠标建立嵌套层：按住ctrl键将其拖动到目标层取消嵌套关系：将子层拖离父层第8页，共19页，星期日，2025年，2月5日层的操作选择层在“层”面板中选择层在“文档”窗口中选择层单击层左上角的选择柄单击一个层的边框在一个层中按住“Ctrl+Shift”组合键并单击在“设计”视图中，单击层锚记两者都可借助shift键选择多个层第9页，共19页，星期日，2025年，2月5日调整层的大小调整一个层的大小：拖拽层四周的控制柄同时调整多个层的大小在“设计”视图中选择两个或更多个层“修改-排列顺序-设成高度相同”或宽度相同命令在“属性”面板中输入“宽”和“高”的值第10页，共19页，星期日，2025年，2月5日移动层拖拽层左上角的方形标签对齐层选中欲对齐的多个层执行菜单命令“修改”|“排列顺序”下左对齐、右对齐、对齐上缘和对齐下缘等子命令，以黑色控制柄的层作为对齐的标准。第11页，共19页，星期日，2025年，2月5日设置层的属性图4-14单个层的属性面板图4-15多个层的属性面板第12页，共19页，星期日，2025年，2月5日将层靠齐到网格首先显示网格选中“靠齐到网格”复选框选择层并拖拽，当其靠近网格线一定距离时，会自动跳到最近的靠齐位置第13页，共19页，星期日，2025年，2月5日层的简单应用图片和文字的层次建立(16.5)使用层实现文字特效(16.6)把层转换为表格（17.1）显示或隐藏图层（17.2）浮动广告条（index.html)第14页，共19页，星期日，2025年，2月5日