动态网页考试大作业要求及模板.doc

武 汉 工 业 学 院---动 态 网 页 制 作(校公选)大 作 业 报 告专业 电气类 学号姓名日期 2012 .4.29 【大作业目的】 了解和掌握CSS样式的动态主页的制作方法，；熟练掌握CSS样式的对于页面显示控制的作用，通过CSS+DIV实现主页的显示【实验内容】通过CSS+DIV定制一个主页。主页页面的形式自定，但要求有以下内容：（1）浮动的广告图片在主页飘动（2）主页两测有滚动广告图片参考网站：/使用到的主要知识：HTML、CSS、JavaScript【实验报告要求】1. 实验目的2．主页布局和CSS样式说明3. 部分关键代码说明/**********************作答区***********************/布局和样式说明bodydiv id=main //定义了id为main的容器，容纳基本所有内容，采用相对居中定位div id=content_home//定义了id为content_home容器，容纳“校园风光栏目下内容”table id=slide border=0 cellpadding=0 cellspacing=0 //定义了slide表格，容纳三张滚动图片 tr tda href=#img src=images/1.jpg//a/td tda href=#img src=images/2.jpg//a/td tda href=#img src=images/3.jpg//a/td /tr /tableul class=num id=idNum /ul//此div容器用于显示图片的序号/divdiv id=content_about/div//此容器用于显示“作业说明”栏目下内容（具体内容已省略）div id=navigation//导航栏容器，用于容纳两个Tab菜单的选项a class=current_tab id=tab_home href=javascript:showTab(tab_home,content_home)校园风光/aa class=ordinary_tab id=tab_about href=javascript:showTab(tab_about,content_about)作业说明/a//两个tab样式的菜单容器。单击则运行showTab函数。/div/divdiv id=float_ad1a href=#/a/div//左侧滚动广告div id=float_ad2a href=#/a/div//右侧滚动广告div id=ada href=# onClick=javascript:showmore() 关闭/a/div//主页的浮动广告/body部分CSS样式说明a{color: #5086a5;text-decoration: none;font-size: 14px;}//设定所有超链接样式a:hover{color: #5086a5;text-decoration: none;font-size: 14px;}a:visited{color: #5086a5;font-size: 14px;}#main{ position:relative;//定义为相对定位 height:530px;//设定高度 width:700px;//设定宽度 margin:0 auto;//设定为居中显示 border: #b2c9d3 1px solid;//设定边框像素以及颜色 background: #ffffff;//设定背景颜色 }#content_home{ position:absolute;//采用绝对定位 z-index:2;//设定叠加的层次序 height:500px; width:700px; margin:0 0 30px 0;//设定与别的容器的边距}#content_home img{width: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: 14px; line-height: 30px; height:30px; width:700px; margin:500px 0