Web实验报告课程设计Word格式文档下载.docx
《Web实验报告课程设计Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《Web实验报告课程设计Word格式文档下载.docx（33页珍藏版）》请在冰点文库上搜索。
四、实验步骤
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>
&
&
扬州小吃也极负盛名。
大名鼎鼎的扬州干丝，一片豆腐干可被分成十七层然后
切丝，丝细如发；
闻名全国的蟹黄包，每年十月取饱满的膏蟹蟹黄，配以精白面粉制成，可谓扬州点心中的极品。
此外，扬州炒饭也是来到一定不能错过的传奇美味。
扬州十大名点：
三丁包子、千层油糕、双麻酥饼、翡翠烧卖、干菜包、野菜包、糯米烧卖、蟹黄蒸饺、车螯烧卖、鸡丝卷子。
canyin"
spanclass="
yangzhoums"
&
扬州炒饭其中“扬州”是配料的名称，是指“叉烧”和“鲜虾”的合称。
以火腿、基围虾、鸡蛋、青豆、白米饭等为主料炒制而成。
营养丰富，味道鲜美。
扬州的蛋炒饭，风
味各异，品种繁多，有“清蛋炒饭”、“金裹银蛋炒饭”、“月牙蛋炒饭”、“虾仁蛋炒饭”、“火腿蛋炒饭”、“三鲜蛋炒饭”、“什锦蛋炒饭”等等。
去扬州一定要尝一下地道的扬州炒饭哦。
yangzhoumsshizitou"
狮子头扬州菜中知名度最高的就是狮子头了。
虽然汤比较有油，狮子头却口感松软，肥而不腻，入口微甜。
这道菜做起来也是极讲究的。
首先，一定要用五花肉，这是因为五花肉的肥瘦比例正适合狮子头，其次一定要用刀把五花肉剁成肉末而非绞肉机，因为手工剁出来的肉末弹性十足。
这样做出来的扬州狮子头是极清淡的，咬上一口能吃到肉圆的鲜香之味！
扬州灌汤包<
扬州人常说的一句话：
“早上皮包水，晚上水包皮”。
这句话的典故：
扬州人早起喜欢到茶楼喝茶、吃一笼灌汤包，啜着浓浓的汤汁，
嚼着醇香的肉馅。
可见，灌汤包在扬州是有多受欢迎，灌汤包子用料考究，制作精细。
它以精粉烫面制皮坯，选用肋条肉为馅心，用鲜骨髓汤打馅，
配以十多种上等调料佐味。
包子鲜香肉嫩、皮簿筋软、外形玲珑剔透、汤汁醇正浓郁、入口油而不腻。
3、Promptation.html
.wrap_content{
width:
100%;
602px;
/*border:
background-image:
url（img/noise.png）;
background-position:
center;
background-size:
500px500px;
}
.main_row{
float:
left;
margin-left:
.main_cla_imgall{
position:
overflow:
hidden;
display:
inline-block;
16px;
.main_cla_imgallimg{
block;
180px;
150px;
-webkit-transition:
all.5sease;
/*SafariandChrome*/
-moz-transition:
/*Firefox*/
-ms-transition:
/*IE9*/
-o-transition:
/*Opera*/
transition:
.main_cla_imgall.main_img_title{
top:
0;
right:
bottom:
left:
z-index:
10;
background:
rgba（0,0,0,0.5）;
/*Opera*/
.main_cla_imgall.main_img_titlespan{
text-align:
新宋体"
3px;
/*text-transform:
uppercase;
#fff;
30%;
padding:
10px0;
4pxsolidrgba（255,255,255,0.15）;
border-bottom:
.main_cla_imgall:
hoverimg{
-webkit-transform:
scale（1.25）;
-moz-transform:
-ms-transform:
-o-transform:
transform:
hover.main_img_title{
none;
.rowcomm{
10%;
.firstrow{
3%;
.content_title{
padding-top:
4px;
45px;
no-repeat;
700px150px;
黑体"
color:
wrap_content"
content_title"
main_rowrowcommfirstrow"
main_cla_imgall"
ahref="
#"
main_img_title"
<
span>
大煮干丝<
img/pro_images/1.jpg"
100px"
/>
<
红烧狮子头<
img/pro_images/2.jpg"
三丁鲜包<
img/pro_images/3.jpg"
拆烩鲢鱼头<
img/pro_images/4.jpg"
main_rowrowcomm"
img/pro_images/5.jpg"
蟹黄汤包<
img/pro_images/6.jpg"
鲜炒虾仁<
img/pro_images/7.jpg"
翡翠烧卖<
img/pro_images/8.jpg"
千层油糕<
升级会员 