《动态网页考试大作业要求及模板》由会员分享，可在线阅读，更多相关《动态网页考试大作业要求及模板（6页珍藏版）》请在金锄头文库上搜索。
1、武 汉 工 业 学 院-动 态 网 页 制 作(校公选)大 作 业 报 告专业 电气类 学号姓名日期 2012 .4.29 【大作业目的】了解和掌握 CSS 样式的动态主页的制作方法， ；熟练掌握 CSS样式的对于页面显示控制的作用，通过 CSS+DIV 实现主页的显示【实验内容】通过 CSS+DIV 定制一个主页。主页页面的形式自定，但要求有以下内容：（1）浮动的广告图片在主页飘动（2）主页两测有滚动广告图片参考网站：http:/ 、CSS、JavaScript【实验报告要求】1. 实验目的2主页布局和 CSS 样式说明3. 部分关键代码说明/*作答区*/布局和样式说明/定义了 id 为 m
2、ain 的容器，容纳基本所有内容，采用相对居中定位/定义了 id 为 content_home 容器，容纳“校园风光栏目下内容”/定义了 slide 表格，容纳三张滚动图片 /此 div 容器用于显示图片的序号/此容器用于显示“作业说明”栏目下内容（具体内容已省略）/导航栏容器，用于容纳两个 Tab 菜单的选项校园风光作业说明 /两个 tab 样式的菜单容器。单击则运行 showTab 函数。/左侧滚动广告/右侧滚动广告关闭/主页的浮动广告部分 CSS 样式说明acolor: #5086a5;text-decoration: none;font-size: 14px;/设定所有超链接样式a:h
3、overcolor: #5086a5;text-decoration: none;font-size: 14px;a:visitedcolor: #5086a5;font-size: 14px;#mainposition:relative;/定义为相对定位height:530px;/设定高度width:700px;/设定宽度margin:0 auto;/设定为居中显示border: #b2c9d3 1px solid;/设定边框像素以及颜色background: #ffffff;/设定背景颜色#content_homeposition:absolute;/采用绝对定位z-index:2;/设定
4、叠加的层次序height:500px;width:700px;margin:0 0 30px 0;/设定与别的容器的边距#content_home imgwidth:700px; height:500px; border:0; /设定该容器内图片属性#content_about p/设定容器内段落文字的样式text-align:left;/左对齐text-indent:2em;/缩进font-size:14px;/字体大小color:#636;/字体颜色padding:20px;/文字与容器边框距离#navigation/导航栏的样式设定position:absolute;font-size:
5、 14px; line-height: 30px;height:30px;width:700px;margin:500px 0 0 0;background-color: #e8f7fc;#tab_home/导航栏内 id 为 tab_home 选项的样式设定position:relative;/相对定位height:30px;width:80px;float:left;/向左浮动text-align:center;/文字居中.current_tab/类样式定义，当选中菜单时显示的样式border-right: #b2c9d3 1px solid;/分隔线样式font-weight: bold
6、;/字体加粗cursor: pointer;/改变鼠标样式background: #ffffff;/背景颜色#ad/定义浮动广告样式position: absolute;z-index:12;background-color:#FF9;#float_ad1/两侧滚动广告position:fixed;/采用固定位置的定位方式（不支持 IE）.Javascript 部分代码说明function showTab(tabId,tabContentId)/定义函数，参数为要显示的 tab 菜单 id 和要显示的内容 idvar main = document.getElementById(main);/
7、获得 main 容器对象var taContents = main.childNodes;/获得 main 对象下的所有子节点for(i=0; i R) xin = false; x = R y = y + step*(yin?1:-1) if (y B) yin = false; y = B var itl= setInterval(floatAD(), delay) obj.onmouseover=function()clearInterval(itl) obj.onmouseout=function()itl=setInterval(floatAD(), delay)function showmore()/屏蔽 id 为 ad 的层ad.style.display=none ;作业截图
