网站综合实验报告.docx

《网站综合实验报告.docx》由会员分享，可在线阅读，更多相关《网站综合实验报告.docx（13页珍藏版）》请在冰豆网上搜索。

网站综合实验报告

CSS部分，大体是分为上中下三块。

最顶部的div是网站的一些logo和导航图片。

（以下效果是在腾讯TT浏览器下查看的）

中间部分又分为上下结构，上边是导航菜单。

下边又细分为左右结构

左边是做了一些滚动连接，以及登陆窗口。

右边部分为自我介绍和一些滚动图片组。

最下部分，也就是bottom，用于写版权。

一下为css部分的代码:

body{font-family:

Verdana;font-size:

14px;margin:

0;}

#container{margin:

0auto;width:

900px;}

#header{height:

736px;width:

1000px;background:

url（zj_12.jpg）;margin:

0pxauto;}

#menu{height:

60px;width:

1001px;background:

#09c;margin:

0pxauto;}

#menuul{

padding:

0;

margin:

0;

list-style-type:

none;

}

#menuulli{

float:

left;

position:

relative;

}

#menuullia,.menuullia:

visited{

display:

block;

text-align:

center;

text-decoration:

inherit;

width:

142px;

height:

60px;

color:

red;

border:

1pxsolid#ffff00;

border-width:

1px1px00;

background:

#3399FF;

line-height:

30px;

font-size:

15px;

font:

"华文行楷";

}

#menuulliul{

display:

none;

}

#menuulli:

hovera{

color:

#FFFF66;

background:

#BBFFAA;

}

#menuulli:

hoverul{

display:

block;

position:

absolute;

top:

31px;

left:

0;

width:

105px;

}

#menuulli:

hoverullia{

display:

block;

background:

#771100;

color:

#000000;

}

#menuulli:

hoverullia:

hover{

background:

#00CCFF;

color:

#000;

}

#mainContent{height:

530px;width:

1000px;margin:

0pxauto;}

#sidebar{float:

left;width:

230px;height:

530px;background:

#9ff;}

#content{float:

right;width:

770px;height:

530px;background:

#cff;}/*因为是固定宽度，采用左右浮动方法可有效避免ie3像素bug*/

#bottom{height:

200;width:

1000px;background-color:

#0099FF}

以下是index.html部分的代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

_明镜|止水.