Web实验报告课程设计Word文档格式.docx
《Web实验报告课程设计Word文档格式.docx》由会员分享，可在线阅读，更多相关《Web实验报告课程设计Word文档格式.docx（32页珍藏版）》请在冰豆网上搜索。
2.home.html里
内容栏：
左边一栏：
第一模块运用javascript更改style的背景颜色，设置了一个数组。
第二模块制作表单并加入了大量的函数，选择循环语句进行判断与提交并作出提示语句。
第四模块制作超链接并将列表项换成图片。
右边一栏：
进行样式设置等，下面制作了一个选项卡，通过设置函数等，记录上一步的操作oldobj，在鼠标移动到上面时自动记录。
3.在lesson.html里
进行样式设置
4.在prompation.html里设置了悬浮时的一些操作，起到放大镜的效果，
5.在contact.html里制作了一个表单
四、实验步骤
1.明确需求，掌握要做什么，并画出框架图，理清思路。
2.在网上下载所需图片和文本介绍，并分清各模块的内容。
3.构建各网页的框架，设置好样式和属性。
4.正式往框架内敲入代码，实现各项功能的函数等。
5.页面调整与优化，设置自适应。
6.对页面美观进行加工。
7.对代码进行封装，进行标注与分块。
五、实验代码
1、Index.html
<
!
DOCTYPEhtml>
html>
<
head>
<
metacharset="
utf-8"
/>
title>
味道扬州<
/title>
linkrel="
stylesheet"
type="
text/css"
href="
css/框架.css"
>
scriptsrc="
js/首页.js"
text/javascript"
charset="
UTF-8"
/script>
js/用户注册.js"
js/选项卡.js"
/head>
bodyonload="
startChageImg（）"
divid="
div_box"
<
--==============标题栏=============-->
top"
<
divclass="
div-img-box"
<
imgid="
imgidA"
src="
img/1.jpg"
width="
100%"
height="
300px"
/div>
div-toolsA"
class="
div-toolbar"
spanonmouseover="
changeImg（0,this）"
onmouseout="
1<
/span>
changeImg（1,this）"
2<
changeImg（2,this）"
3<
--==============导航栏=============-->
daohang"
ul>
li>
aclass="
daohang_home"
home.html"
target="
main"
首&
nbsp;
页<
/a>
/li>
daohang_lesson"
lesson.html"
美食学堂<
<
ulid="
id_ulA"
<
扬州炒饭<
狮子头<
灌汤包<
/ul>
daohang_promation"
promptation.html"
美食展示<
daohang_contact"
contact.html"
联系我们<
--==============内容栏=============-->
main_left"
--左边空白-->
main_center"
--中间-->
iframesrc="
name="
frameborder="
0"
/iframe>
main_right"
--右边空白-->
--<
-->
bttom"
（c）Copyright2016盛金秋.AllRightsReserved.<
/body>
/html>
2、lesson.html
styletype="
#main_center_lesson{
width:
99%;
height:
596px;
background-image:
url（img/jiao.png）;
/*border:
1pxredsolid;
*/
background-position:
center;
background-repeat:
no-repeat;
background-size:
100%100%;
/*position:
relative;
}
.main_center_title_lesson{
100%;
height:
40px;
font-family:
"
楷体"
;
font-weight:
900;
color:
blueviolet;
font-size:
30px;
absolute;
margin-left:
10px;
.main_center_title:
hover{
text-decoration:
underline;
.main_center_cont{
30%;
65%;
40%;
font-family:
仿宋"
font-size:
20px;
color:
#000000;
700;
position:
top:
8%;
text-indent:
15px;
#img_huaiyang{
1%;
.canyin{
15%;
border-top:
2pxreddotted;
#2F4F4F;
font-family:
font-weight:
margin-top:
.yangzhoums{
50px;
#FF8C00;
25px;
background-color:
#E6E6FA;
border-radius:
7px;
.shizitou{
letter-spacing:
/style>
body>
main_center_lesson"
main_center_title_lesson"
imgsrc="
img/huanyang.jpg"
250px"
id="
img_huaiyang"
main_center_cont"
扬州菜以拆烩鲢鱼头、扒烧整猪头、蟹粉狮子头“三头”为代表，大煮干丝体现了淮扬菜的刀功，“三套鸭”则将菜鸽藏于野鸭腹中再将野鸭藏于家鸭腹中，野鸭喷香，菜鸽细酥，大胆的创新造就了无上美味。
三头宴和红楼宴、全藕宴一起被称为扬州菜肴三绝。
br>
&
&
扬州小吃也极负盛名。
大名鼎鼎的扬州干丝，一片豆腐干可被
-moz-transition:
all.5sease;
/*Firefox*/
-ms-transition:
/*IE9*/
-o-transition:
/*Opera*/
transition:
.main_cla_imgall.main_img_title{
position:
top:
0;
right:
bottom:
left:
z-index:
10;
background:
rgba（0,0,0,0.5）;
-webkit-transition:
/*SafariandChrome*/
-moz-transit
升级会员 