《水果网页设计总结.docx》由会员分享，可在线阅读，更多相关《水果网页设计总结.docx（16页珍藏版）》请在课桌文档上搜索。
1、电子与信息工程学院课程设计报告课程：人机交互与界面设计题目：前端页面设计总结水果网页设计总结.网页结构包含主界面，注册界面，商品详情页，打地鼠游戏和翻牌子游戏共五个界面。其中用到HTM1.,标题，表格，表单，导航栏；CSS,div布局对象，图片、文字等的定位，浮动；运用JaVaSCriPt展示登录及其图片轮播效果。二.页面效果及其代码1.班级主页的导航栏在右上角，每一个导航用a链接，对应各个页面；CSS圆角设置边框。设置背景图，班级log。等图片应用CSS浮动，定位。其中有许多CSS效果，还使用矢量图使界面看起来更美观。主代码：页购物车论坛搜索还未登录请登录全部水果分类核果类浆果类瓜果类仁果类
2、xem橘果类.坚果类凉性水果温性水果热性水果冷性水果水果快报【热门】黑布林大李子原价100元500g,现50元500g!新款新上线云南大荔枝，只需30元500g,欢迎抢购！新款】新上线云南大荔枝，只需30元500g,欢迎抢购！新款新上线云南大荔枝，只需30元500g,欢迎抢购！【热门】黑布林大李子原价100%500g,现50元500g!【热门】黑布林大李子原价100%500g,现50元500g!fexfD179;vp应季水果查看更多vp天水樱桃pClaSS=before现价100500gpCIaSS=after,原价150500g天水樱桃现价100
3、500gpCIaSS=after原价150500g天水樱桃现价1OO5OOgpClaSS=after,原价150500g天水樱桃现价100500gpClaSS=after原价150500g天水樱桃pClaSS=before,现价100500gpCIaSS=after原价150500gvp应季水果查看更多天水樱桃现价1OO5OOg原价15O5OOg天水樱桃现价1OO5OOgpCIaSS=after,原价15O5OOg天水樱桃pCIaSS=before,现价100500gpClaSS=after原价150500g天水樱桃pCIaSS=before现价1OO5OOgpCIaSS=after,原价15
4、O5OOg天水樱桃现价1OO5OOg原价150500g正品保障vh4正品保障,提供发票vp正品保障正品保障,提供发票vp正品保障正品保障,提供发票正品保障正品保障,提供发票服务指南购物流程会员介绍生活旅行/团购常见问题大家电联系客服服务指南购物流程会员介绍生活旅行/团购常见问题大家电联系客服服务指南购物流程会员介绍生活旅行/团购常见问题大家电联系客服服务指南购物流程会员介绍生活旅行/团购常见问题大家电联系客服服务指南购物流程会员介绍生活旅行/团购常见问题大家电联系客服帮助中心打赏支持我们曜=#”关于我们联系我们|联系客服I商家入驻I营销中心I橘子洲头I友情链接I销售联盟I橘子洲头社区IEngl
5、ishSiteContactU地址：甘肃省兰州市兰州城市学院佩里小区邮编：123123123电话:400-618-4000传真：010-82935100邮箱：123456789京ICP备08001421号京公网安备1101080077022.注册页面用input来显示手机号及密码的输入，HTM1.和CSS结合使页面效果更富有色彩，页面内容更加丰富。效果图和代码如下：、HTM1.部分：手机号：手机号码格式不正确，请从新输入labelfor=短信验证码：spanClaSS=success短信验证码输入正确登录密码：手机号码格式不正确，请从新输入liClaSS=safe安全程度弱中强labelfor
6、=确认密码：spanCIaSS=error手机号码格式不正确，请从新输入同意协议并注册知晓用户协议CSS部分：.registerareaheight:522px;border:IPXsolid#ccc;margin-top:20px;).registerareah3height:42px;border-bottom:Ipxsolid#ccc;background-color:#ececec;line-height:42px;padding:010px;font-size:18px;font-weight:400;).loginfloat:right;font-size:14px;).login
7、acolor:#c81523;).reg-fbrmwidth:600px;margin:50pxauto0;).reg-fbrmulIimargin-bottom:20px;).reg-formulIilabeldisplay:inline-block;width:88px;text-align:right;).reg-fbrmulIi.inp(width:242px;height:37px;border:Ipxsolid#ccc;).errorcolor:#c81523;.error-icon,.success-icondisplay:inline-block;vertical-align:
8、middle;width:20px;height:20px;background:url(imgerror.png)no-repeat;margin-top:-2px;).successcolor:green;).success-iconbackground:url(imgsuccess.png)no-repeat;).safepadding-left:170px;).safeempadding:012px;color:#fff;).ruo(background-color:#de1111;).zhongbackground-color:#40b83f;).qiangbackground-co
9、lor:#f79100;).agreepadding-left:95px;).agreeinputvertical-align:middle;).agreeacolor:#lbale6;).btnwidth:200px;height:34px;background-color:#c81623;font-size:14px;color:#fff;margin:30px0070px;).mod-copyrighttext-align:center;padding-top:20px;).linksmargin-bottom:15px;).linksa(margin:03px;).copyrightl
10、ine-height:20px;)3.主页面的图片轮播主要运用JavaScript实现。轮播图，其中包括：1、一个包含轮播图图片的ul列表，每个图片用一个Ii元素包含2、一个包含轮播图小圆点的ul列表，每个小圆点用一个Ii元素包含两个按钮用于切换轮播图3、一个JavaScript文件用于实现轮播功能具体来说，JavaScript文件中的代码实现了以下功能：4、通过获取轮播图图片列表和小圆点列表以及左右按钮元素，添加点击事件，实现点击按钮切换图片的功能5、通过设置定时器实现自动轮播功能6、实现了鼠标悬浮在轮播图上时停止轮播、鼠标移出继续轮播的功能JS代码如下：varitems=document.
11、querySelectorAll(.item);图片节点varpoints=document.querySelectorAll(.point,)varleft=document.getElementById(leftBtn);varright=document.getElementByld(rightBtn);varall=document.querySeleclor(.wrap)varindex=0;vartime=0;定时器跳转参数初始化/封装一个清除active方法varClearActive=function()for(i=0;iitems.length;i+)itemsi.class
12、Name=,item;)Sr(J=0；jpoints.length;j+)pointsj.className=point;改变active方法vargolndex=function()clearActive();itemslindex.ClassName=itemactive*;pointsindex.className=pointactive*I左按钮事件vargo1.eft=function()if(index=0)(index=4;elseindex;)golndex();)右按钮事件vargoRight=function()if(index4)(index+;else(index=0;
13、)golndex();)/绑定点击事件监听left.addEvent1.istener(,clickfunction()go1.eft();time=0;计时器跳转清零)right.addEvent1.istener(click,function()goRight();time=0;计时器跳转清零1)fbr(i=0;itime+;if(time=20)goRight();time=0;),100)play();移入清除计时器al1.onmousemove=function()ClearlnterVal(timer)J移出启动计时器al1.onmouseleave=function()play(
14、);)4.商品详情页也同样用了轮播HTM1.代码如下：j黑布林大李子Y100500g选择规格：-二份三份四份五份constnum=document.getElementByld(num)constbtnl=document.getElementById(btn1)constbtn2=document.getElementById(btn2)btnl.onclick=function()num.value=1.0*num.value-1btn2.onclick=function()num.value=1.0*num.value+1)加入购物车三.总结通过制作班级网页巩固了HTM1.,CSS和JavaScript的相关知识，并且将HTM1.、CSS、JS部分分开进行调用，大大节省了代码量，在编写代码的过程中，个人对于HTM1.和CSS的相关术语和概念较为熟悉，而JavaScript的知识运用相对薄弱，对前端的应用和问题处理不够全面。随着知识面的不断拓展，学习的相关技术语言越来越多，所需掌握的技术也很广泛，这需要我在学习的过程中不断努力并及时总结。在班级网页制作的过程中，收获颇丰。
