页面布局与样式设置

下载本文档

ID 178758
格式 doc
大小 31.5 KB
约6页
收藏
点赞(0)
海报
举报

/ 6

下载本文档

文本预览下载提示常见问题

页面布局与样式设置单元学习报告一、所学知识与技能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列<tableborder="*px"cellspacing="*px"cellpadding="*px">.........<tr><td></td><td><imgsrc="图片路径"></td></tr></table>---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---①border="*px"cellspacing="*px"cellpadding="*px"使边框不显示②<td><imgsrc="图片路径"></td>填充图片任务五：使用frameset实现页面布局在框架集中首先将<body></body>去掉，再写下如下代码：<framesetrows="100,*"><framesrc="上框架.htm"name="upFrame"noresize="yes"/><framesetcols="199,*"border="10"><framesrc="左框架.htm"name="leftFrame"frameborder="yes"/><framesrc=""name="rightFrame"scrolling="yes"frameborder="yes"/></frameset>最外层的<frameset></frameset>是分为上下两部分，中间的<frameset></frameset>是将中间的部分分为左右两部分。①rows="100,*"100是指上面的部分height，*是下面的②cols="199,*"199是指右面的部分width，*是右面的③noresize="yes"固定大小④scrolling="yes"无滚动条任务六：链接样式的设置与引用链接有四种样式：link:未点击过的样式over:光标放上的样式visited:访问过后的样式active：刚刚访问过的样式网址链接：<ul><li><ahref="www.baidu.com"target="显示位置"/a>百度</li></ul>---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---任务七：列表样式与iframe①#name用id=”name”来引用这个样式.name用clas=”name”来引用这个样式②display:在同一行内float:left水平排列③text-decoration:none:上右[=上]下[=上]左[=右]上不可省略，其他可省略④solid:#ff实线，白色分割线。⑤样式分为三类：1.<divstyle=”……”>本标签内显示2<style>……</style>本页面内/本文件3<link……>多文件任务八：使用DIV实现区域滚动<divstyle="position:absolute;left:400px;top:200px;width:400px;height:300px;overflow:auto;border:solid1pxgray"><div>h...

1、当您付费下载文档后，您只拥有了使用权限，并不意味着购买了版权，文档只能用于自身使用，不得用于其他商业用途（如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利）。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供参考，付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等，请点击“举报”。