原创力文档- 1、本文档共7页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
前台综合实验
北京理工大学珠海学院实验报告
ZHUHAI CAMPAUS OF BEIJING INSTITUTE OF TECHNOLOGY
班级2班 学号123456789000 姓名 小xxx 指导教师 xxx 成绩
实验题目 前台综合实验 实验地点及时间 2015.1.12
一、实验目的
熟练使用div+css+javascript编程
二、实验环境
1、硬件环境：
2、软件环境
（1）操作系统：windows XP Professional，版本2002，Service Pack 3
（2）编程环境：Dreamweaver CS5
三、实验内容
利用CSS+DIV+javacript实现如下网页的效果, 网页效果图在 综合实验网页效果图.png文件中。
四、实验过程
(1) 先用css编写一个一个main div，在main div中包含三个div，分别为head div、content div和foot div。
（2）在head div中包含了一个top div和menu div，在content div中包含一个left div和right div，在left div 中包含一个leftmenu，在leftmenu中包含十个div ，每个div为一个列表。在right div中包含一个top1 div、left1 div和right1 div。left1 div包含一个lefthead div和一个无序列表。Right1 div包含一个righthead div和一个无序列表。
（3）用JavaScript控制当鼠标点击div id=first时，列表项实现显示功能，没点击时，列表项则是隐藏状态。
五、源程序清单
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title无标题文档/title
style type=text/css
#main{
width:1198px;
height:598px;
position:absolute;
left:50%;
margin-left:-600px;
border:1px solid #cccccc;
}
#head{
width:1198px;
height:120px;
}
#top{
width:1198px;
height:80px;
background:url(top1.png);
border-bottom:1px solid #CFF;
}
#menu{
width:1198px;
height:35px;
position:absolute;
margin-top:2px;
background:url(menu.png);
}
#content{
width:1198px;
height:425px;
}
#left{
width:200px;
height:420px;
border:1px solid #cccccc;
float:left;
}
#leftMenu
{
width:198px;
height:418px;
float:left;
}
#leftMenu dt
{
height:32px;
background:url(ff.png);
border-bottom:1px solid #cccccc;
font-size:13px;
font-weight:bolder;
}
#leftMenu dt span
{
position: relative;
left:40px;
top:9px;
}
#leftMenu dl dd
{
height:28px;
background:url(dd.png);
background-position:5px 5px;
margin-left:10px;
display:none;
}
#leftMenu dl dd:hover
{
background-color:#FFEE94
}
#leftMenu dl dd a
{
text-decoration:none;
color:black;
position:relative;
top:7px;
left:30px;
}
#leftMenu dl
{
margin-top:0px;
margin-bottom:0px;
}
#right{
width:983px;
height:420px;
文档评论（0）