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

武 汉 工 业 学 院 ---动 态 网 页 制 作(校公选) 大 作 业 报 告 专业 电气类 学号 姓名 日期 2012 .4.29 【大作业目的】 了解和掌握CSS样式的动态主页的制作方法，；熟练掌握CSS样式的对于页面显示控制的作用，通过CSS+DIV实现主页的显示 【实验内容】 通过CSS+DIV定制一个主页。主页页面的形式自定，但要求有以下内容： （1）浮动的广告图片在主页飘动 （2）主页两测有滚动广告图片 参考网站：/ 使用到的主要知识：HTML、CSS、JavaScript 【实验报告要求】 1. 实验目的 2．主页布局和CSS样式说明 3. 部分关键代码说明 /**********************作答区***********************/ 布局和样式说明 body div 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 /table ul class=num id=idNum /ul//此div容器用于显示图片的序号 /div div id=content_about/div//此容器用于显示“作业说明”栏目下内容（具体内容已省略） div id=navigation//导航栏容器，用于容纳两个Tab菜单的选项 a class=current_tab id=tab_home href=javascript:showTab(tab_home,content_home)校园风光/a a class=ordinary_tab id=tab_about href=javascript:showTab(tab_about,content_about)作业说明/a //两个tab样式的菜单容器。单击则运行showTab函数。 /div /div div 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//导航栏的样式设