呈现效果如图1所示：
图1
2、主页：
2.1、主页设置模块：
利用div+css为主页布局。
“style.css”文件中设置。
代码如下：
*{
margin:
0px;
padding:
0px;
border:
0px
}
body{
font-family:
"新宋体";
font-size:
13px;
color:
#000000;
}
a:
link,a:
visited{
color:
#333;
text-decoration:
none;
font-weight:
normal;
}a:
active,a:
hover{
color:
*fff;
text-decoration:
underline;
}
#wrap{
width:
984px;
background:
#98EDF3;
margin:
0auto;}
2.2、登陆注册模块：
在“style.css”文件中设置板块的大小，字体的颜色大小。
代码如下：
#top{
float:
right;
width:
200px;
font-family:
"新宋体";
font-size:
14px;
text-align:
right;
margin-top:
10px;
margin-bottom:
20px;
padding-right:
20px;
}
#topspan{
padding-left:
5px;
padding-right:
5px;
}
在主页中设置超链接，连接到注册页面。
代码如下：
呈现效果如图2所示：
图2
2.3、导航栏模块及关键字搜索：
在“style.css”文件中设置板块大小及背景，字体的颜色大小。
代码如下：
#nav{
width:
984px;
float:
left;
overflow:
hidden;}
#nav_search{
float:
right;
width:
260px;
height:
40px;
margin:
10px0px0px30px;
margin-left:
15px;
}
#nav_menu{
height:
36px;
margin:
10px0px0px0px;
float:
left;
background:
#00CC99;
}
#nav_menu_mid{
float:
left;
width:
580px;
height:
36px;
}
#nav_menu_midul{
list-style:
none;
margin:
0px;
padding:
0px;
}
#nav_menu_midli{
float:
left;
margin-top:
10px;
padding-left:
11px;
}
#nav_menu_mida{
font-family:
"新宋体";
font-size:
15px;
background:
;
}
在主页中设置超链接。
代码如下：
呈现效果如图3所示：
图3
2.4、新闻滚动模块：
在“style.css”文件中设置板块大小及背景，字体的颜色大小。
并添加属性overflow:
auto，呈现出新闻滚动的形式。
代码如下（仅显示左边模板代码，右边类似）：
#main_top1{
float:
left;
width:
477px;
height:
35px;
margin-top:
10px;
margin-left:
10px;
margin-right:
5px;
background:
#00FFCC;
}
#main_top1h3{
height:
40px;
font-size:
16px;
font-weight:
bold;
padding-left:
20px;
padding-top:
10px;
}
#main{
float:
left;
width:
984px;
}
#main_left{
float:
left;
width:
477px;
height:
260px;
overflow:
auto;
margin-left:
10px;
margin-right:
5px;
margin-bottom:
10px;
}
.news_list*{
margin:
0;
padding:
0;
list-style:
none;
text-decoration:
none;
overflow:
hidden;
}
.news_listli{
float:
left;
width:
450px;
height:
30px;
margin-left:
10px;
}
.news_listlispan{
float:
right;
width:
120px;
}
.news_listlia:
hover{
text-decoration:
none;
color:
#32600;
}
在主页中添加内容以及背景。
代码如下（中间有缩减）：
更新预告
动漫资讯
...
...
在主页上方滚动的字幕代码写在主页warp中：
呈现效果如图4、5所示：
图4
图5
2.5、站内图片切换播放器模块;
在“style.css”文件中，输入代码：
ul,li{list-style:
none;}
.mid{margin:
0auto;}
.area{width:
944px;height:
600px;overflow:
hidden;margin-top:
10px;margin-bottom:
10px;position:
relative;}
#pic_list{position:
relative;}
#pic_listli{position:
absolute;visibility:
hidden;}
#pic_listli.show{visibility:
visible;}
#pic_listliimg{vertical-align:
middle;}
.button{width:
240px;height:
20px;line-height:
20px;position:
absolute;bottom:
0px;}
#button{float:
right;}
#buttonli{float:
left;width:
20px;height:
20px;text-align:
center;margin:
03px;font-family:
"Arial";font-size:
12px;color:
#fff;background:
#000;}
#buttonli.current{background:
#f00;cursor:
pointer;}
在主页中，输入代码：
萌图欣赏
（function（）{
varimgbox=document.getElementById（"imgbox"）;
varpic_list=document.getElementById（"pic_list"）;
varpics=pic_list.getElementsByTagName（"li"）;
varbutton=document.getElementById（"button"）.getElementsByTagName（"li"）;
varp;
varstart;
functionautoplay（start）{for（i=start;i varp=i; button[i].onmouseover=functionchange（）{ for（j=0;j this.parentNode.childNodes[j].className=""; } this.className="current"; for（m=0;m pics[m].className=""; if（m==p）{ pics[m].className="show"; }}}};}} autoplay（0）; }; 呈现效果如图6所示： 图6 2.6、页尾： 在“style.css”中，输入： #footer{ clear: both; width: 984px; height: 40px; margin: 0; background: #999; font-size: 13px; color: #666; text-align: center; } 在homework1.html中，输入： Copyright©2016-201752Tian.NetInc.Allrightsreserved.动漫集中营 联系邮箱： 1234567890@ 呈现效果如图7所示： 图7 3、子页： 登陆注册： 主要是验证部分有难度。 需要写js脚本。 下面是密码验证码的代码： functioncc（）{ varpass1=window.document.my_form.password1.value; varpass2=window.document.my_form.password2.value; if（pass1==pass2）{ window.alert（"注册成功！ "）; returntrue; } else window.alert（"密码错误！ "）; returnfalse; } 整体呈现效果如下： 欢迎页 主页 登录注册页 三、所遇到的问题： 在设计网页的过程中，遇到了很多问题，在查阅资料以及请教同学，一一解决了。 主要问题有以下几个： 1、新闻滚动模块的滑动条设置不出来 解决方法： 在“style.css”文件中的相应div中加入属性overflow: auto。 2、设置注册页面中的密码验证码设置不出来 解决办法： 在主页中
functioncc（）{
varpass1=window.document.my_form.password1.value;
varpass2=window.document.my_form.password2.value;
if（pass1==pass2）{
window.alert（"注册成功！
"）;
returntrue;
}
else
window.alert（"密码错误！
"）;
returnfalse;
}
3、欢迎页设置倒计时，页面上的数字没有随时间的减少发生递减变化
解决办法：
输入以下代码：
varsec=5;
functioncount（）{
if（sec>0）{
num.innerHTML=sec--;
}else
location="homework1.html"
}
四、总结：
网页的主题以动漫为主，设有多个板块。
在设计主页过程中，页面布局是一个很大的难题，要在纸上画出心中的方案，并计算好数值，否则，就会出现页面混乱的情况。
把整个结构设置好后，就开始设置具体板块。
登录注册板块，需要设置超链接，连接到注册页面，这个还比较简单。
导航栏板块，则需要在板块中再设置相应的小版块，这样可以分别操作，互不影响。
新闻滚动板块，则是在设置滚动中遇到了问题，在设置了属性后，解决了。
幻灯片播放则相对有些难度，在网上查找了资料，设置了一下宽和高，也可以在网页中相应播放。
而页尾的设置很简单，输入代码即完成。
再就是子页的设置，分别有登录注册页和欢迎页。
登录注册页中，验证码是一个难题，后来请教同学，设置了javascript脚本，得到如果两次密码设置不正确，就会有提示，并重新输入。
欢迎页主要是倒计时数字的变化。
开始一直做不好，后来发现有个单词的大小有问题。
最后，就是美化和修饰了。
开始为了分辨模块，背景设置了不同的颜色，现在就是重新设置属性background，是整个视觉效果达到最好
这次设计网页的作业让我收获颇多，知道了自己的不足，但能让脑中的知识活学活用，也还是很满足的。
遗憾的是时间太少了，没有让网页很精致，只是基本上满足了作业的要求。
但是，以后有兴趣还是会继续深入学习。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 