1、Web 前端技术实验报告课程名称：Web 前端技术实验名称：课程设计系别班级：学生姓名：学生学号：指导老师：一、实验目的通过一学期的所学，制作一个网站作为课程设计，能基本满足实验大纲要求。二、内容及要求1、综合运用 html、CSS、javascript 进行课程设计，主题不限。2、作品尽量支持原创。三、实验原理1.在 index.html 里标题栏：运用了 javascript 制作了一个定时器完成了自动手动的切换。导航栏：应用无序列表，去掉列表符；设置悬浮；制作级联菜单等隐藏功能；设置超链接至其他网页。运用 iframe 链接至主页面。2.home.html 里内容栏：左边一栏：第一模块运
2、用 javascript 更改 style 的背景颜色，设置了一个数组。第二模块制作表单并加入了大量的函数，选择循环语句进行判断与提交并作出提示语句。第四模块制作超链接并将列表项换成图片。右边一栏：进行样式设置等，下面制作了一个选项卡，通过设置函数等，记录上一步的操作 oldobj，在鼠标移动到上面时自动记录。3.在 lesson.html 里进行样式设置4.在 prompation.html 里设置了悬浮时的一些操作，起到放大镜的效果，5.在 contact.html 里制作了一个表单四、实验步骤1.明确需求，掌握要做什么，并画出框架图，理清思路。2.在网上下载所需图片和文本介绍，并分清各模
3、块的内容。3.构建各网页的框架，设置好样式和属性。4.正式往框架内敲入代码，实现各项功能的函数等。5.页面调整与优化，设置自适应。6.对页面美观进行加工。7.对代码进行封装，进行标注与分块。5、 实验代码1、Index.html味道扬州123首页美食学堂扬州炒饭狮子头灌汤包美食展示联系我们(c) Copyright 2016 盛金秋. All Rights Reserved. 2、lesson.html#main_center_lessonwidth: 99%;height: 596px;background-image: url(img/jiao.png);/*border: 1px red
4、 solid;*/background-position:center ;background-repeat:no-repeat ;background-size:100% 100%;/*position: relative;*/.main_center_title_lessonwidth: 100%; height: 40px;/*border: 1px red solid;*/font-family: “楷体“;font-weight: 900;color: blueviolet;font-size: 30px;/*position: absolute;*/margin-left: 10p
5、x;.main_center_title:hovertext-decoration: underline;.main_center_contmargin-left:30% ;width: 65%; height: 40%;/*border: 1px red solid;*/font-family: “仿宋“;font-size: 20px;color: #000000;font-weight: 700;position: absolute;top: 8%;text-indent: 15px;#img_huaiyangmargin-left: 1%;.canyinwidth: 100%; hei
6、ght: 15%;border-top: 2px red dotted;font-size: 15px;color: #2F4F4F;font-family: “仿宋“;font-weight: 700;margin-top: 15px;.yangzhoumswidth: 50px; height: 20px;font-family: “楷体“;color: #FF8C00;font-size: 25px;background-color: #E6E6FA;border-radius: 7px;margin-left: 10px;.shizitouletter-spacing: 10px;美食
7、学堂 扬州菜以拆 烩鲢鱼头、扒烧整猪头、蟹粉狮子头“三头”为代表，大煮干 丝体现了淮扬菜的刀功， “三套鸭” 则将菜鸽藏于野鸭腹中再将野鸭藏于家鸭腹中，野鸭喷香，菜鸽细酥，大胆的创新造就了无上美味。三头宴和红楼宴、全藕宴一起被称为扬州菜肴三绝。扬州小吃也极负盛名。大名鼎鼎的扬州干丝，一片豆腐干可被分成十七层然后切丝，丝细如发；闻名全国的蟹黄包，每年十月取饱满的膏蟹蟹黄，配以精白面粉制成，可谓扬州点心中的极品。此外，扬州炒饭也是来到一定不能错过的传奇美味。扬州十大名点：三丁包子、千层油糕、双麻酥饼、翡翠烧卖、干菜包、野菜包、糯米烧卖、蟹黄蒸饺、车螯烧卖、鸡丝卷子。扬州炒饭扬州炒饭其中“扬州”是配
8、料的名称，是指“叉烧”和“鲜虾”的合称。以火腿、基 围虾、鸡蛋、青豆、白米饭等为主料炒制而成。营养丰富，味道鲜美。扬州的蛋炒饭，风味各异，品种繁多，有“清蛋炒饭” 、 “金裹银蛋炒饭” 、 “月牙蛋炒饭” 、 “虾仁蛋炒饭” 、“火腿蛋炒 饭” 、 “三鲜蛋炒饭” 、 “什锦 蛋炒饭”等等。去扬州一定要尝一下地道的扬州炒饭哦。 狮子头狮子头扬州菜中知名度最高的就是狮子头了。虽然汤比较有油，狮子头却口感松软，肥而不腻，入口微甜。这道菜做起来也是极讲究的。首先，一定要用五花肉，这是因为五花肉的肥瘦比例正适合狮子头，其次一定要用刀把五花肉剁成肉末而非绞肉机，因为手工剁出来的肉末弹性十足。这样做出来的
9、扬州狮子头是极清淡的，咬上一口能吃到肉圆的鲜香之味！扬州灌汤包扬州人常说的一句话：“早上皮包水，晚上水包皮” 。这句 话的典故：扬州人早起喜欢到茶楼喝茶、吃一笼灌汤包，啜着浓浓的汤汁，嚼着醇香的肉馅。可见，灌汤包在扬州是有多受欢迎，灌汤包子用料考究，制作精细。它以精粉烫面制皮坯，选用肋条肉为馅心，用鲜骨髓汤打馅，配以十多种上等调料佐味。包子鲜香肉嫩、皮簿筋软、外形玲珑剔透、汤汁醇正浓郁、入口油而不腻。3、Promptation.html.wrap_contentwidth:100%; height: 602px;/*border: 1px red solid;*/background-imag
10、e:url(img/noise.png) ;background-position: center;background-size:500px 500px ;.main_rowfloat: left;margin-top: 10px;margin-left: 10px;.main_cla_imgall position: relative;overflow: hidden;display: inline-block;font-size: 16px;.main_cla_imgall img display: block;width: 180px; height: 150px;-webkit-tr
11、ansition: all .5s ease; /* Safari and Chrome */-moz-transition: all .5s ease; /* Firefox */-ms-transition: all .5s ease; /* IE 9 */-o-transition: all .5s ease; /* Opera*/ transition: all .5s ease;.main_cla_imgall .main_img_title position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 10;backgr
12、ound: rgba(0, 0, 0, 0.5);-webkit-transition: all .5s ease; /* Safari and Chrome */-moz-transition: all .5s ease; /* Firefox */-ms-transition: all .5s ease; /* IE 9 */-o-transition: all .5s ease; /* Opera */transition: all .5s ease;.main_cla_imgall .main_img_title span display: block;text-align: cent
13、er;font-family: “新宋体“;font-size: 20px;font-weight: 900;letter-spacing: 3px;/*text-transform: uppercase;*/color: #fff;margin-top: 30%;padding: 10px 0;border-top: 4px solid rgba(255, 255, 255, 0.15);border-bottom: 4px solid rgba(255, 255, 255, 0.15);.main_cla_imgall:hover img -webkit-transform:scale(1
14、.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25);.main_cla_imgall:hover .main_img_title background: none;.rowcommmargin-left:10%;.firstrowmargin-top: 3%;.content_titlemargin-top: 10px;padding-top: 4px;width: 100%; height: 45px;background-im
15、age: url(img/jiao.png);background-repeat: no-repeat;background-size: 700px 150px;font-size: 30px;font-family: “黑体“;color: blueviolet;美食展示大煮干丝红烧狮子头三丁鲜包拆烩鲢鱼头扬州炒饭蟹黄汤包鲜炒虾仁翡翠烧卖千层油糕四喜汤圆虾籽饺面蒜香龙虾Contact.html联系我们.wrap_contactwidth: 100%; height: 602px;background-color: #E6E6FA;.contact_titlefont-family: “新宋体
16、“;font-size: 40px;color:chocolate;font-weight: 900;margin-left:40% ;padding-top: 3%;labelfont-family: “宋体“;font-size: 20px;text-spacing: 5px;font-weight: 500;.contact_wrapwidth: 40%;height: 400px;margin-left: 150px;padding-top: 60px;float: left;#tijiaomargin-left: 20px;.contact_rightwidth: 36%;heigh
17、t:400px;float: left;/*border: 1px red solid;*/margin-top: 6%;margin-left: -80px;font-size: 20px;font-weight: 700;line-height: 26px;text-indent: 36px;function operA()var text=document.getElementById(“text“);if(text.value=“)return false;elsealert(“已提交！“);联系我们姓名性别男女电子邮件职业 学生 农民工人 个人留言扬州是中国四大菜系之一淮扬菜系的发源
18、地。康熙、乾隆皇帝将淮扬菜水平带到了极高的高度，堪称人间至味。淮扬菜最大的特色就在于南北皆宜。扬州菜注重本味、讲究火工、擅长炖焖，口味清淡鲜美、甜咸适中。著名的“三头” （蟹粉狮子头、扒烧整猪头、拆烩鲢鱼头）就是扬州菜的代表作。此外，扬州特色小吃也远近闻名。在四望亭路及望月路一带是扬州的美食聚集地。所以扬州可称得上吃货们的天堂了。首页有我的邮箱和联系方式，想要联系我们的朋友可以发送邮箱给我们一起进行讨论哟。4、框架.css/*=对整体框架进行的样式设置=*/#div_boxwidth: 100%; height:1000px; /*border: 1px red solid;*/*margin
19、-left:0;padding: 0px;*/position: relative;top: -9px;left: -9px;/*=对标题栏进行的样式设置=*/.div-toolbar width: 80px;height: 20px;/*border: 1px red solid;*/ margin-top:-40px ; margin-left:90%;position: absolute;z-index: 5;.div-toolbar span color: aliceblue;font-weight: 900;font-size: 20px;background-color: gold
20、;opacity: 0.6;display: inline-block; width: 18px; height: 20px; text-align: center;line-height: 20px;border-radius: 5px;/*=对导航栏进行的样式设置=*/#daohangwidth: 77.5%;height: 50px; border: 1px lavender solid; background-color:#FFD700;padding-left: 300px;position: absolute;top: 300px;z-index: 20;opacity: 0.9;
21、#daohangulwidth: 707px; height: 31px;list-style: none; margin: 0; /*去掉列表符、去掉 ul 会自带的外边距*/#daohangullifont-size:20px ;line-height: 40px;width:120px; height: 40px; /*border: 2px grey solid;*/background-color:greenyellow;opacity: 0.7;float: left; margin-top: 5px; margin-left: 20px;border-radius: 5px;te
22、xt-align: center;line-height: 40px;#daohangulli:hoverbackground-color:orangered; #daohangulli:activetext-decoration: underline;#id_ulAwidth:60px; height:140px;font-size: 8px;list-style: none;margin-left: 4px;position: absolute;z-index: 10;#id_ulAliwidth: 60px; height: 30px;/*border: 1px blueviolet s
23、olid;*/margin: 0;padding-top: 0;background-color:lightsteelblue;display: none; /*li 的小 块进行隐藏*/#daohangulli:hover#id_ulAlidisplay:block; /*悬浮时恢复*/#id_ulAli:hoverbackground-color: burlywood; text-decoration: underline;/*.cla_liAborder: 0px red solid; */*=对内容栏进行的样式设置=*/.main_left width: 15%; height: 62
24、0px;/*border: 1px black solid;*/*float: left;*/position: absolute;top: 350px;z-index: 2;.main_rightwidth: 15%; height: 620px;/*border: 1px red solid;*/*float: left;*/position: absolute;top: 350px;left:85%;z-index: 2;.main_centerwidth: 70%; height: 620px;/*border: 4px black solid;*/*float: left;*/pos
25、ition: absolute;top: 350px;left:15%;z-index: 2;/*-*/.cla_main_left /*中间左边整体样式*/width: 25%;height: 620px;background-color:#F0F8FF;/*border: 1px red solid;*/*position: absolute;top:0;left:0;*/.main_left_top /*中间左边第一个*/width: 100%; height: 100px;/*border: 1px red solid;*/.main_left_center /*中间左边第二个*/wi
26、dth: 100%; height: 250px;/*border-top:1px cadetblue dashed ;*/*border: 1px red solid;*/.main_left_bottom /*中间左边第三个*/width: 99%; height: 170px;border: 1px darkgray solid;.cla_main_right /*中间右边整体样式*/width:75%;height: 620px;/*border: 1px red solid;*/background-color:azure;position: absolute;top:0;left:
27、25%;margin-top: 10px;.main_right_top /*中间右边第一个*/width: 100%; height: 25%;/*border: 5px red solid;*/background-image: url(/img/五亭桥.jpg);background-repeat: no-repeat;background-size: 200px 150px;margin-left: 15px;margin-top: 15px;.main_right_center /*中间右边第二个*/width: 100%; height: 40%;/*border: 1px red
28、 solid;*/border-top: 1px darkred dotted;border-bottom: 1px darkred dotted;.main_right_bottom /*中间右边第三个*/width: 100%; height: 27%;/*border: 1px red solid;*/*-*/#font_Afont-family: “楷体“;font-size: 20px;margin-left: 10px;margin-top: 10px;.comm /*改变颜色*/width: 24px;height: 30px;float: left;margin-left: 2
29、0px;margin-top: 20px;border-radius: 4px;#Abackground-color: papayawhip; opacity: 0.4;#Bbackground-color: red;opacity: 0.4;#Cbackground-color: yellow;opacity: 0.4;#Dbackground-color: blue;opacity: 0.4;/*-*/#font_Bfont-family: “楷体“;font-size: 20px;margin-left: 10px;margin-top: 10px;spancolor:red;font-
30、weight: 900;#mian_left_buttmargin-left:30px;margin-top:20px;width: 40px;#mian_left_restwidth: 40px;labelfont-size: 10px;margin-left: 10px;inputwidth: 130px;margin-left: 10px;/*-*/#main_left_ulAmargin-left: -10%;line-height: 23px;#main_left_ulAli:hovertext-decoration: underline;#font_Cheight: 30px;li
31、ne-height: 30px;letter-spacing: 2px;background-color: darkgray;color: #E6E6FA;font-weight: 600;padding-left: 30%;/*-*/#font_Dfont-family: “楷体“;font-size: 20px;margin-left: 10px;margin-top: 10px;#main_left_lianjiemargin-top: 10px; margin-left:20px;#main_left_lianjie lilist-style: none; list-style-ima
32、ge:url(/img/lian1.png);/*-*/.font_E font-size: 25px;color:black;margin-left: 20%;display: inline-block;position: absolute;left: 230px;.content_Atext-indent: 40px;font-size: 20px;font-family: “楷体“;color:black;display: inline-block;position: absolute;left: 230px;/*-*/.select_tab_titwidth:24.6%;height:
33、 30px;/*border: 1px darkkhaki solid;*/font-size: 15px;text-align: center;line-height: 30px;float: left;background-color: dimgrey;opacity: 0.6;border-radius: 6px;margin-left:2px ;margin-top: 5px;.select_clearclear: both; /*清除浮动*/.select_tit_currentbackground-color:red #6495ED.select_mainwidth: 100%;h
34、eight:100% ;/*border: 1px red solid;*/.select_commB display: none; /*隐藏*/font-size: 20px;color:#FF8C00;margin: 20px;line-height: 30px; .select_currentB display: block;/*-*/.renqimargin: 20px;font-size: 20px;float: left;position: absolute;left: 16px;#spa_imgAbackground-image: url(/img/renqi.png);back
35、ground-repeat: no-repeat ;width: 20px;height: 30px;margin: 20px;float: left;.al_renqi liwidth:600px;border-top: 1px darkgrey dotted;border-bottom: 1px darkgrey dotted;line-height: 30px;.al_renqi li:hoverbackground-color: #B0C4DE;/*-*/#bttomwidth: 65%;height: 40px;/*border: 1px red solid;*/position:
36、absolute;top:98%;background-color: darkslategrey;padding-left: 35%;line-height: 40px;font-size: 20px;font-weight: 400;/*-*/.main_center_home /*主页面设置*/width:95%; height: 594px;5、首页.js/*=对标题栏的事件进行设置=*/var imgArr=“1.jpg“,“2.jpg“,“3.jpg“; /切 换图片var spanArr,imgObj,t,cindex=0,oldobjA = null;function chang
37、eImg(numb,obj) /手动操作window.clearInterval(t);cindex = numb;autochangetime(); /直接调用function autochangetime()if(cindex=imgArr.length)cindex = 0; imgObj.src = “img/“ + imgArrcindex;if(oldobjA!=null)oldobjA.style.backgroundColor=“gray“;spanArrcindex.style.backgroundColor=“green“;oldobjA = spanArrcindex;c
38、index+;function startChageImg()spanArr = document.getElementById(“div-toolsA“).children;imgObj = document.getElementById(“imgidA“);t = window.setInterval(autochangetime,3000);/*=对内容的事件进行设置=*/function opercolorA() /主题风格document.body.bgColor=“papayawhip“;function opercolorB()document.body.bgColor=“red
39、“;function opercolorC()document.body.bgColor=“yellow“;function opercolorD()document.body.bgColor=“blue“;6.用户注册.Jsfunction mian_left_operA()var name = document.getElementById(“txt1“);var spa1 = document.getElementById(“spa_idA“);var reg1 = /w/; var A = reg1.test(name.value);/ alert(A);/ alert(name.va
40、lue.length);var age = document.getElementById(“txt2“);var spa2 = document.getElementById(“spa_idB“);var reg2 = /(1-90-9$)|(100$)/;var B = reg2.test(age.value);/ alert(B);var upw = document.getElementById(“txt3“);var spa3 = document.getElementById(“spa_idC“);var reg3 = /w1,10/; var C = reg3.test(upw.
41、value);/ alert(C);var Reupw = document.getElementById(“txt4“);var spa4 = document.getElementById(“spa_idD“);var reg4 = /w1,10/; var D = reg4.test(Reupw.value);/ alert(D);if(name.value = “)spa1.style.backgroundColor=“#F2BCA8“; spa1.innerHTML = “*请输入用户名！“; /spa1.innerHTML += “请输入用户名！“;在 *的基础上加上一个retur
42、n false;else if(name.value.length8)spa1.innerHTML = “;spa1.style.backgroundColor=“#F2BCA8“;spa1.innerHTML = “*请确保用户名在 3-8 个字符间！“;return false;else if(A = true)spa1.innerHTML = “*“;spa1.style.backgroundColor=“#F2BCA8“;spa1.innerHTML = “*请输入有效用户名！“;return false;else if(age.value = “)spa1.innerHTML = “
43、*“;spa2.style.backgroundColor=“#F2BCA8“; spa2.innerHTML = “*请输入年龄！“; return false;else if(B = false)spa1.innerHTML = “*“;spa2.innerHTML = “*“;spa2.style.backgroundColor=“#F2BCA8“; spa2.innerHTML = “*请确保年龄在 1-100岁之间！“; return false;else if(upw.value = “)spa1.innerHTML = “*“;spa2.innerHTML = “*“;spa3.
44、style.backgroundColor=“#F2BCA8“; spa3.innerHTML = “*请输入密码！“; return false;else if(upw.value.length10)spa1.innerHTML = “*“;spa2.innerHTML = “*“;spa3.style.backgroundColor=“#F2BCA8“;spa3.innerHTML = “*请确保密码长度为 1-10 位！“;return false;else if(upw.value != Reupw.value)spa1.innerHTML = “*“;spa2.innerHTML =
45、 “*“;spa3.innerHTML = “*“;spa4.style.backgroundColor=“#F2BCA8“; spa4.innerHTML = “*确认密码需与密码一致！“; return false;6、实验结果图 1 主页面图 2 级联菜单图 3 表格遇阻显示提示图 4 选项卡图 5 淮阳菜美食展示图 5 放大镜效果7、实验总结通过本次实验，掌握了 JavaScript 制作网页的基础知识，并能熟练运用学过的内容制作、设计较为简单的注册页面,同时也发现了在学习 JavaScript 后与之前学习的冲突，时常找不到合适的关键字来解决问题，造成了诸多的困惑。照目前学习的情况来看，html 语言只是大体框架，内部的美化和函数等是内部的重心，需要学习的还很多。
