页面布局与样式设置

《页面布局与样式设置》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、页面布局与样式设置单元学习报告一、所学知识与技能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;顺序是使层与层上/下/右/左之间留有一定的空隙。例如

2、：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.在属性

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的宽度一致，并准确计算它的高度和宽度。问题：由于浏览器不是规定的，做完之后，最下面出

4、现了溢出。这时就要在最外层设置style="overflow:hidden"；使溢出部分隐藏。任务四：用Table实现仿Windows窗口的设计首先在设计界面中在工具箱中拖出table空间，会出现一个3行3列的表格，如果需要不同的表格可以在