web大作业实验报告.docx

五、CSS代码及注释

1.JS代码

2.css代码及代码

*{padding:

0px;margin:

0px;}

body{background-color:

#ebf7ff;

font-size:

12px;

margin:

0px;

padding:

0px;

text-align:

center;}

#container{/*宽度固定且居中的版式*/

position:

relative;

margin:

1pxauto0pxauto;

width:

850px;

text-align:

left;}

#globallink{width:

800px;

height:

200px;

margin:

0px;

background-image:

url（img/;/*banner图片*/

background-repeat:

no-repeat;

font-size:

18px;

padding-bottom:

25px;}

#globallinkul{

list-style-type:

none;

position:

absolute;/*绝对定位*/

display:

inline;

width:

800px;

top:

200px;

padding:

0px;margin:

0px;

background-color:

#00FFFF;}

#globallinkli{

float:

left;/*左浮动*/

text-align:

center;

padding-top:

10px;

}

#globallinkulli#one{width:

100px;}

#globallinkulli#two{width:

150px;}

#globallinka:

link,#globallinka:

visited{

color:

#FFFFFF;

text-decoration:

none;}

#globallinka:

hover{

color:

#000000;

text-decoration:

none;}

#parameter{

position:

relative;

margin:

10px0px00px;

float:

left;

font-size:

12px;

width:

200px;

padding-right:

10px;

color:

#FF99CC;}

#parameterdiv{

border:

1pxsolid#00FFFF;

}

#parameterbr{

clear:

both;

display:

none;}

#parameterh3span{

display:

none;}

#parameterh3{

height:

30px;width:

90px;

padding:

0px;margin:

0px;}

#parametera:

link{

color:

#2a788e;

text-decoration:

none;}

#parametera:

visited{

color:

#FF99CC;

text-decoration:

none;}

#parametera:

hover{

color:

#FF99CC;

text-decoration:

none;}

#lstatisticsspana,#lhotblogspana,#lrecentspana,#lapplyspana{

float:

left;

text-align:

left;

padding-top:

5px;

padding-right:

5px;

margin-bottom:

5px;}

#fenlei{height:

25px;

left:

1px;

top:

2px;}

#fenleih3{background:

url（img/no-repeat;/*用背景图片代替标题*/

position:

absolute;

left:

1px;

top:

2px;}

#lstatisticsh3{

background:

url（img/no-repeat;}

#lhotblogh3{

background:

url（img/no-repeat;}

#lrecenth3{

background:

url（img/no-repeat;}

#lapplyh3{

background:

url（img/no-repeat;}

#lstatistics,#lhotblog,#lrecent,#lapply{

position:

relative;

clear:

both;}

#lstatisticsul,#lhotblogul,#lrecentul,#lapplyul{

list-style-type:

none;/*统一不显示项目符号*/

padding:

10px0px0px0px;

margin:

0px;}

#lstatisticsli{

border-bottom:

1pxdashed#CCCCCC;

text-align:

left;

padding-left:

30px;

font-size:

14px;

line-height:

25px;

background:

url（img/no-repeat7px4px;}

#lhotblogli{

border-bottom:

1pxdashed#CCCCCC;

text-align:

left;

padding-left:

30px;

font-size:

14px;

line-height:

25px;

background:

url（img/no-repeat7px4px;}/*背景小图片作为项目符号*/

#lrecentli,#lapplyli{

border-bottom:

1pxdashed#CCCCCC;

text-align:

left;

padding-left:

30px;

font-size:

14px;

line-height:

25px;

background:

url（img/no-repeat7px6px;}

#mainsupport{

width:

590px;

float:

left;

position:

relative;

font-size:

12px;

margin:

0px;}

#mainsupportdiv{

border:

1pxsolid#00FFFF;}

#mainsupporth3span{

display:

none;}

#mainsupporth3{width:

230px;height:

31px;}

#mainsupportlia:

link{

color:

#2a788e;

font-size:

12px;

text-decoration:

none;}

#mainsupportlia:

visited{

color:

#227086;

font-size:

12px;

text-decoration:

none;}

#mainsupportlia:

hover{

color:

#FF99CC;

font-size:

12px;

text-decoration:

none;}

form{

padding:

0px;

margin:

0px;}

input{

margin:

0px;}

#logoin{

clear:

both;

margin-bottom:

2px;

position:

absolute;

left:

0px;

top:

260px;

height:

30px;

width:

588px;

background-color:

#d1ebff;

top:

10px;}

#logoinul#per{

margin:

0px;

padding-left:

0px;

padding-top:

3px;

list-style-type:

none;

text-align:

left;}

#logoinul#perli{

float:

left;

line-height:

23px;

padding-left:

15px;

padding-top:

3px;

margin:

0px;}

#logoin#perinput{

background-color:

#FFFFFF;

border:

1pxsolid#226c81;

color:

#226c81;

font-size:

12px;

height:

15px;

padding:

0px;}

#logoin#per1,#logoin#per2{

background-color:

#FFFFFF;

border:

1pxsolid#226c81;

color:

#226c81;

font-size:

12px;

height:

14px;

padding:

0px;

width:

110px;}

#logoin{

display:

none;

clear:

both;}

#recommendbr,#newbr,#tipsbr{

display:

block;

clear:

both;

margin:

0px;padding:

0px;}

#recommendul,#newul,#tipsul{

list-style:

none;

margin:

:

0px;}

#recommendulli,#newulli,#tipsulli{

padding-left:

20px;

text-align:

center;

float:

left;

width:

170px;}

#recommendulliimg,#newulliimg,#tipsulliimg{

border:

4pxsolid#ccc;

margin:

5px0px3px0px;

padding:

0px;}

#recommendullia:

link,#recommendullia:

visited,#newullia:

link,#newullia:

visited,#tipsullia:

link,#tipsullia:

visited{

color:

666666;

text-decoration:

none;}

#recommendullia:

hover,#newullia:

hover,,#tipsullia:

hover{

color:

#000000;

text-decoration:

underline;}

#demo1h3{

height:

32px;width:

590px;

padding:

0px;margin:

0px;}

#mainsupport#recommendh3{

background:

url（img/no-repeat;}

#mainsupport#newh3{

background:

url（img/no-repeat;}

#mainsupport#tipsh3{

background:

url（img/no-repeat;}

#recommend,#new,#tips{

position:

relative;}

#footer{

width:

800px;

clear:

both;/*不受浮动影响*/

font-size:

12px;

text-align:

center;

color:

#226c81;

padding-bottom:

20px;

margin:

0px;

padding-top:

20px;

background-color:

#ebf7ff;}

#footerp{

margin:

0px;

padding-top:

10px;

background-color:

#ebf7ff;}

#footera:

link{

color:

#006480;

font-size:

12px;

text-decoration:

none;}

#footera:

visited{

color:

#006480;

font-size:

12px;

text-decoration:

none;}

#footera:

hover{

color:

#000000;

font-size:

12px;

text-decoration:

none;}

#demo{

background:

#FFF;

overflow:

hidden;

border:

1pxdashed#CCC;

width:

590px;}

#demoimg{

border:

1pxsolid#F2F2F2;}

#indemo{

border:

1pxdashed#CCC;

float:

left;

width:

800%;}

#demo1{float:

left;}

#demo2{float:

left;}

六、页面测试结果

（要求：

页面在FF及以上任一版本下测试结果，贴图完成）

1、下测试结果

2、FF下测试结果

七、心得体会

（要求：

必须要有内容，可以是学习总结，可以是体会，可以是技术知识总结，也可以是经验总结等,不少于500字）

第一次做蓝色经典的时候老师带着我们一起做，给了我们网页文字材料和切好的图片并教我们如何处理盒子与盒子之间的位置，带着我们做css。

这些过程当中我感觉自己好像跟上了老师的步伐，但是在真的准备最后的大作业时才发现这是一个大工程（不过或许是因为自己第一次做）。

从构思要做什么类型的网站，找相关的图片材料和文字材料，设定网页的container的长和宽，构思将网页的布局将其怎样分割，大致确定好后开始找适合整个网页的背景色调，设定每个盒子的大小，切割找的图片的大小使其适合整个网页的布局，接着开始编写代码。

或许因为自己不是很熟练感觉做的时候自己做做改改这样重复了好几遍，感觉好麻烦。

可是当网页最终的效果出来的时候我感觉好有成就感，这是第一张真正意义上的自己设计的、自己找资料的、自己编写的网页。

在做的过程当中，遇到的主要问题是盒子的布局问题，因为我的整个盒子的结构是：

上、中（左、右）下的结构在布局时没有计算好图片结合文字后的尺寸的大小，导致出现了盒子被挤到下面的现象，因此每张图片我都做了两次以上的切片，使得整个过程有点麻烦。

还有就是一些标签记得不是很清楚导致在做的过程当中出先了看不到效果，又花了好些时间子在找错误单词上。

做这次期末大作业，感觉自己还不是很熟练，频频出错浪费了很多时间，但值得欣慰的是我还是顺利的完成了我的第一张自己设计的网页，感觉还不错！

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

web 作业 实验 报告

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。