欢迎来到天天文库
浏览记录
ID:34503695
大小:31.93 KB
页数:6页
时间:2019-03-07
《页面布局与样式设置》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
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列的表格,如果需要不同的表格可以在
5、border="*px"cellspacing="*px"cellpadding="*px"使边框不显示②
6、c=""name="rightFrame"scrolling="yes"frameborder="yes"/>最外层的
7、d:访问过后的样式active:刚刚访问过的样式网址链接:
此文档下载收益归作者所有