页面布局和样式设置.docVIP

页面布局与样式设置 单元学习报告 一、所学知识与技能 1使用DIV页面布局 2使用DIV实现仿Windows窗口的设计 3使用DIV实现大小可变的仿Windows窗口的设计 4使用Table实现大小可变的仿Windows窗口的设计 5.使用frameset实现网页布局，超链接样式的设置与引用，列表样式与iframe使用DIV实现区域滚动，图形菜单的建立 二、所做作品或模块 任务一：使用DIV页面布局 1. text-align: center 使页面和页面内容居中 2. margin-top; margin-bottom; margin-left; margin-right;顺序是使层与层上/ 下/ 右/ 左之间留有一定的空隙。例如：margin-top: 5px; 3. float: left 使层横向排列 4. padding-top:60px; 是指内容的相对于层的位置 5. background-color 设置背景色。 任务二：使用DIV实现仿Windows窗口的设计 1. position:absolute;left:100px;top:100px 对层实现绝对定位 2. background-image:url(图片路径) 填充背景图片 . 说明：图片若不能正常显示，1.请检查图片的路径是否正确 2.检查是否对层进行height、width设置 对控件定位的方法： 1.Style=”left:*px; top:*px；“ 2.在设计界面拖动控件 3.在属性窗口中修改 任务三：使用DIV实现大小可变的仿Windows窗口的设计 该任务与任务二大同小异，首先指定Div的height，width然后用 position:absolute;left:*px;top:*px属性实现绝对定位，填充背景图片：background-image:url(图片路径) 注意背景图像的路径 说明：2和8填充图片一致只是注意它的height、width，同样4和6一致，5可以不对其填充，1，2，3的高度的一致，1和3的宽度一致，4，5，6的高度一致，4，6的宽度相同，7，8，9的高度一致，7和9的宽度一致，并准确计算它的高度和宽度。 问题：由于浏览器不是规定的，做完之后，最下面出现了溢出。这时就要在最外层设置 style=overflow:hidden；使溢出部分隐藏。 任务四：用Table实现仿Windows窗口的设计 首先在设计界面中在工具箱中拖出table空间，会出现一个3行3列的表格，如果需要不同的表格可以在table /table添加行tr /tr，在tr /tr中添加列td /td 例如在原来的基础上添加1行2列 table border=*px cellspacing=*px cellpadding=*px ... ... ... tr td /td td img src=图片路径 /td /tr /table border=*px cellspacing=*px cellpadding=*px 使边框不显示 ② td img src=图片路径 /td 填充图片 任务五：使用frameset实现页面布局 在框架集中首先将body/body去掉，再写下如下代码： frameset rows=100,* frame src=上框架.htm name=upFrame noresize=yes / frameset cols=199,* border=10 frame src=左框架.htm name=leftFrame frameborder=yes / frame src= name=rightFrame scrolling=yes frameborder=yes/ /frameset 最外层的frameset/frameset是分为上下两部分，中间的frameset/frameset是将中间的部分分为左右两部分。 ①rows=100,* 100是指上面的部分height，*是下面的 cols=199,* 199是指右面的部分width，*是右面的 no