Web实验报告课程设计.docx

上传人:b****3 文档编号:6545712 上传时间:2023-05-10 格式:DOCX 页数:33 大小:3.35MB
下载 相关 举报
Web实验报告课程设计.docx_第1页
第1页 / 共33页
Web实验报告课程设计.docx_第2页
第2页 / 共33页
Web实验报告课程设计.docx_第3页
第3页 / 共33页
Web实验报告课程设计.docx_第4页
第4页 / 共33页
Web实验报告课程设计.docx_第5页
第5页 / 共33页
Web实验报告课程设计.docx_第6页
第6页 / 共33页
Web实验报告课程设计.docx_第7页
第7页 / 共33页
Web实验报告课程设计.docx_第8页
第8页 / 共33页
Web实验报告课程设计.docx_第9页
第9页 / 共33页
Web实验报告课程设计.docx_第10页
第10页 / 共33页
Web实验报告课程设计.docx_第11页
第11页 / 共33页
Web实验报告课程设计.docx_第12页
第12页 / 共33页
Web实验报告课程设计.docx_第13页
第13页 / 共33页
Web实验报告课程设计.docx_第14页
第14页 / 共33页
Web实验报告课程设计.docx_第15页
第15页 / 共33页
Web实验报告课程设计.docx_第16页
第16页 / 共33页
Web实验报告课程设计.docx_第17页
第17页 / 共33页
Web实验报告课程设计.docx_第18页
第18页 / 共33页
Web实验报告课程设计.docx_第19页
第19页 / 共33页
Web实验报告课程设计.docx_第20页
第20页 / 共33页
亲,该文档总共33页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

Web实验报告课程设计.docx

《Web实验报告课程设计.docx》由会员分享,可在线阅读,更多相关《Web实验报告课程设计.docx(33页珍藏版)》请在冰点文库上搜索。

Web实验报告课程设计.docx

Web实验报告课程设计

 

Web前端技术实验报告

 

 

课程名称:

Web前端技术

实验名称:

课程设计

系别班级:

学生姓名:

学生学号:

指导老师:

 

一、实验目的

通过一学期的所学,制作一个网站作为课程设计,能基本满足实验大纲要求。

二、内容及要求

1、综合运用html、CSS、javascript进行课程设计,主题不限。

2、作品尽量支持原创。

三、实验原理

1.在index.html里

标题栏:

运用了javascript制作了一个定时器完成了自动手动的切换。

导航栏:

应用无序列表,去掉列表符;设置悬浮;制作级联菜单等隐藏功能;设置超链接至其他网页。

运用iframe链接至主页面。

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>

味道扬州

--==============标题栏=============-->

1

2

3

--==============导航栏=============-->

  • 美食展示
  • 联系我们
  • --==============内容栏=============-->

    --左边空白-->

    --中间-->

    --右边空白-->

    ---->

    (c)Copyright2016盛金秋.AllRightsReserved.

    2、lesson.html

    DOCTYPEhtml>

    #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{

    width:

    100%;height:

    40px;

    /*border:

    1pxredsolid;*/

    font-family:

    "楷体";font-weight:

    900;

    color:

    blueviolet;

    font-size:

    30px;

    /*position:

    absolute;*/

    margin-left:

    10px;

    }

    .main_center_title:

    hover{

    text-decoration:

    underline;

    }

    .main_center_cont{

    margin-left:

    30%;

    width:

    65%;height:

    40%;

    /*border:

    1pxredsolid;*/

    font-family:

    "仿宋";font-size:

    20px;

    color:

    #000000;font-weight:

    700;

    position:

    absolute;top:

    8%;

    text-indent:

    15px;

    }

    #img_huaiyang{

    margin-left:

    1%;

    }

    .canyin{

    width:

    100%;height:

    15%;

    border-top:

    2pxreddotted;

    font-size:

    15px;

    color:

    #2F4F4F;font-family:

    "仿宋";

    font-weight:

    700;

    margin-top:

    15px;

    }

    .yangzhoums{

    width:

    50px;height:

    20px;

    font-family:

    "楷体";

    color:

    #FF8C00;font-size:

    25px;

    background-color:

    #E6E6FA;

    border-radius:

    7px;

    margin-left:

    10px;

    }

    .shizitou{

    letter-spacing:

    10px;

    }

    美食学堂

    扬州菜以拆烩鲢鱼头、扒烧整猪头、蟹粉狮子头“三头”为代表,大煮干丝体现了淮扬菜的刀功,“三套鸭”则将菜鸽藏于野鸭腹中再将野鸭藏于家鸭腹中,野鸭喷香,菜鸽细酥,大胆的创新造就了无上美味。

    三头宴和红楼宴、全藕宴一起被称为扬州菜肴三绝。


       扬州小吃也极负盛名。

    大名鼎鼎的扬州干丝,一片豆腐干可被分成十七层然后

    切丝,丝细如发;闻名全国的蟹黄包,每年十月取饱满的膏蟹蟹黄,配以精白面粉制成,可谓扬州点心中的极品。

    此外,扬州炒饭也是来到一定不能错过的传奇美味。

    扬州十大名点:

    三丁包子、千层油糕、双麻酥饼、翡翠烧卖、干菜包、野菜包、糯米烧卖、蟹黄蒸饺、车螯烧卖、鸡丝卷子。

    扬州炒饭

        扬州炒饭其中“扬州”是配料的名称,是指“叉烧”和“鲜虾”的合称。

    以火腿、基围虾、鸡蛋、青豆、白米饭等为主料炒制而成。

    营养丰富,味道鲜美。

    扬州的蛋炒饭,风

    味各异,品种繁多,有“清蛋炒饭”、“金裹银蛋炒饭”、“月牙蛋炒饭”、“虾仁蛋炒饭”、“火腿蛋炒饭”、“三鲜蛋炒饭”、“什锦蛋炒饭”等等。

    去扬州一定要尝一下地道的扬州炒饭哦。

    狮子头

        狮子头扬州菜中知名度最高的就是狮子头了。

    虽然汤比较有油,狮子头却口感松软,肥而不腻,入口微甜。

    这道菜做起来也是极讲究的。

    首先,一定要用五花肉,这是因为五花肉的肥瘦比例正适合狮子头,其次一定要用刀把五花肉剁成肉末而非绞肉机,因为手工剁出来的肉末弹性十足。

    这样做出来的扬州狮子头是极清淡的,咬上一口能吃到肉圆的鲜香之味!

    扬州灌汤包

        扬州人常说的一句话:

    “早上皮包水,晚上水包皮”。

    这句话的典故:

    扬州人早起喜欢到茶楼喝茶、吃一笼灌汤包,啜着浓浓的汤汁,

    嚼着醇香的肉馅。

    可见,灌汤包在扬州是有多受欢迎,灌汤包子用料考究,制作精细。

    它以精粉烫面制皮坯,选用肋条肉为馅心,用鲜骨髓汤打馅,

    配以十多种上等调料佐味。

    包子鲜香肉嫩、皮簿筋软、外形玲珑剔透、汤汁醇正浓郁、入口油而不腻。

    3、Promptation.html

    DOCTYPEhtml>

    .wrap_content{

    width:

    100%;height:

    602px;

    /*border:

    1pxredsolid;*/

    background-image:

    url(img/noise.png);

    background-position:

    center;

    background-size:

    500px500px;

    }

    .main_row{

    float:

    left;

    margin-top:

    10px;margin-left:

    10px;

    }

    .main_cla_imgall{

    position:

    relative;

    overflow:

    hidden;

    display:

    inline-block;

    font-size:

    16px;

    }

    .main_cla_imgallimg{

    display:

    block;

    width:

    180px;height:

    150px;

    -webkit-transition:

    all.5sease;/*SafariandChrome*/

    -moz-transition:

    all.5sease;/*Firefox*/

    -ms-transition:

    all.5sease;/*IE9*/

    -o-transition:

    all.5sease;/*Opera*/

    transition:

    all.5sease;

    }

    .main_cla_imgall.main_img_title{

    position:

    absolute;

    top:

    0;

    right:

    0;

    bottom:

    0;

    left:

    0;

    z-index:

    10;

    background:

    rgba(0,0,0,0.5);

    -webkit-transition:

    all.5sease;/*SafariandChrome*/

    -moz-transition:

    all.5sease;/*Firefox*/

    -ms-transition:

    all.5sease;/*IE9*/

    -o-transition:

    all.5sease;/*Opera*/

    transition:

    all.5sease;

    }

    .main_cla_imgall.main_img_titlespan{

    display:

    block;

    text-align:

    center;

    font-family:

    "新宋体";

    font-size:

    20px;

    font-weight:

    900;

    letter-spacing:

    3px;

    /*text-transform:

    uppercase;*/

    color:

    #fff;

    margin-top:

    30%;

    padding:

    10px0;

    border-top:

    4pxsolidrgba(255,255,255,0.15);

    border-bottom:

    4pxsolidrgba(255,255,255,0.15);

    }

    .main_cla_imgall:

    hoverimg{

    -webkit-transform:

    scale(1.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;

    }

    .rowcomm{

    margin-left:

    10%;

    }

    .firstrow{

    margin-top:

    3%;

    }

    .content_title{

    margin-top:

    10px;padding-top:

    4px;

    width:

    100%;height:

    45px;

    background-image:

    url(img/jiao.png);

    background-repeat:

    no-repeat;

    background-size:

    700px150px;

    font-size:

    30px;

    font-family:

    "黑体";color:

    blueviolet;

    }

    美食展示

    大煮干丝

    红烧狮子头

    三丁鲜包

    拆烩鲢鱼头

    扬州炒饭

    蟹黄汤包

    鲜炒虾仁

    翡翠烧卖

    千层油糕

    <

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索
    资源标签

    当前位置:首页 > 农林牧渔 > 林学

    copyright@ 2008-2023 冰点文库 网站版权所有

    经营许可证编号:鄂ICP备19020893号-2