前端页面设计总结——曼巴商城.docx
电子与信息工程学院课程设计报告（2022-2023学年第一学期）课程：人机交互与界面设计题目：前端页面设计总结曼巴商城项目背景和目的利用HTML和CSS以及js,做出曼巴商城二.网页结构该网页由五个页面所组成，包含登录页面、曼巴商城首页、科比战靴详情页、注册页面，各个页面之间通过超链接进行相互访问。三.网页的具体操作1.曼巴商城首页参照淘宝网的特点和布局进行主体框架的建造，具体包括下拉菜单，输入搜索框，时钟的实现，轮播图的实现，登录注册的小型框架，商品展示框架。轮播图点击小圆点显示相对应的图片，点击左右按钮实现图片的转换，也同时实现了自动播放的功能，点击登录和注册会跳转到相应的页面。曼巴商城首页和js代码展示2O23/C/2721O52B分典f*/WQfr«/M19累WW*fvtwnw三wVlWmcv0/瑞你喜欢ej««0WarIMw<MMW«MB3.<script>varitems=document.querySelectorAll(".item");图片节点varpoints=document.querySelectorAll(',.point"),varleft=document.getElementByld("leftBtn");varright=document.getElementById("rightBtn");varall=document.querySelector(".wrap")varindex=0;vartime=0;封装一个清除active方法varClearActive=function()for(i=0;i<items.length;i+)itemsi.className=,item,;)Sr(J=0；j<points.length;j÷+)pointsj.className='point*;/改变active方法vargoIndex=function()clearActive();itemsindex.className=,itemactive1;PointslindexJxlassName='pointactive*)左按钮事件vargoLeft=function()if(index=0)index=4;elseindex;1golndex();)右按钮事件vargoRight=function()if(index<4)index+;)else(index=0;golndex();left.addEventListener('click',function()goLeft();time=0;/计时器跳转清零1)right.addEventListener(,click',function()goRight();time=0;)for(i=0;i<POintS.Iengthj+)pointsi.addEventListener('click',function()varpointindex=this.getAttribute(,data-index,)index=pointindex;golndex();time=0;)计时器轮播效果vartimer;functionplay()timer=setlnterval()=>time+;if(time=20)goRight();time=0;),100)lay();移入清除计时器all.onmousemove=function()(clearlnterval(timer)移出启动计时器all.Onmouseleave=function()Play0;)<script><script>constdiv=document.querySelector('.z,)const date = new Date()div.innerHTML = date.toLocaleString()SetInterVal(function () const date = new Date()div.innerHTML = date.toLocaleString(), 1000)<script>2.曼巴商城商品详情页参照淘宝网的特点和布局进行主体框架的建造，实现当鼠标滑至多个图片在 同一个图框里的功能同时也实现了数量的增加和减少功能。曼巴商城商品详情页和js代码展示Nike Kobe 4 ZK4 切两槌沿ZirR Z *J /。或晦/足M如我# /包心怎 ¥6742.00的200n配请 警4州般当 a快辿更京处笈邺 SS国>K贝详加工3*； NiyW先KotX 4 giE.uge/；：M谷为第(6为693500)洸健MW: I .!.MC 2019-JR-隹LJ X工呷.NlWIg数安 40 405 41 42 42.5 43 44 44.5 45：639693 5003R l*C 产，KOcm)M* 合S. Kobe4 不M： cob 工。然，外次黑蛇：中向y版 Ct*rtb 仆说卜圾<script>constsmall=document.querySelector(,.smal)constmiddle=document.querySelector(,.middle,)small.addEventListener(,mouseover,function(e)if(e.target.tagName='IMG,)middle.querySelector(,img,).src=e.target,src)<script><script>consta=document.QuerySelectorAll(,.numli,);constc=document.querySelector(,.can,);letsrt=0if(c.innerHTML>=O)a0.addEventListener(,click,function()srt-=l;c.innerHTML=srt;)al.addEventListener(,click,function()srt=srt+l;c.innerHTML=srt;)<script>3.曼巴商城注册页面和登录页面展示四.网页具体内容1、素材选取：本次网页设计所需要的素材主要来自淘宝网页，少数界面的设计思路来自网络，框架都有自己构思完成，整体框架由自己个人完成布局。2、网页内容：网页的基本色调主要是NBA传奇巨星科比的相关元素，内容积极向上并且富有活力，该网页整体内容大致分为五个部分，包含登录页面、注册页面、曼巴商城首页、科比战靴详情页。五.计算器与小游戏的实现1.计算器计算器利用eval函数实现加减乘除运算，利用js实现了数字按钮功能和归零功能，还实现了输入规定数字显示文字和图片。计算器页面和代码展示<!DOCTYPEhtml><htmllang=z,zh-CNz,><head><metaCharSet二UTF-8><title>css侧边菜单<title><style>*cssreset*/*margin:0;padding:O;)divborder:blacksolidIpx;.awidth:400px;height:540px;margin:0auto;border-radius:20px;.bwidth:380px;height:50px;margin:auto;margin-top:IOpx;.cwidth:380px;height:450px;margin:auto;margin-top:20px;border-radius:20px;.cdivwidth:100px;height:50px;margin-left:18px;margin-top:20px;float:left;text-align:center;line-height:50px;font-size:20px;border-radius:20px;background-color:rgb(245,245,245);.cdiv:hoverbackground-color:orange;img(width:100%;height:100%;<style><head><body><divCIaSS="a"><divCIaSS="b><div><divClaSS=c”><divClaSS=cl>1<div><divClaSS=c2”>2<div><divClaSS=c3>3<div><divCIaSS=c4>4<div><divClaSS=c5>5<div><divClaSS="c6”>6<div><divClaSS=c7>7<div><divCIaSS=c8”>8<div><divClaSS="c9”>9<div><divCIaSS="cl">O<div><divclassed,style=z,color:blue;z">+<div><divCIaSS=cl2style=,'color:blue;z><div><divclass=,cl3,zstyle=z'color:blue/>*<div><divCIaSS="cl4"StyIe="color:blue;“)<div>class=zzcl5<divstyle=,background-color:blue;color:white;<div><divClaSS=cl6style=z,color:blue;z,>C<div><divClaSS=cl7>(<div><divCIaSS="cl8”>)<div><div><div><script>constb=document.querySelector(,.b,);constc=document.querySelectorAl1('.cdiv,);conste=document.querySelectorAl1('.img,);letsrt=*'for(leti=0;i<c.length;1+)if(ci.innerText!=，=,)ci.addEventListener(,click,function()if(ci.innerText!=,C,)srt+=ci.innerText;b.innerHTML=srt;elsesrt+=ci.innerText;b.innerHTML=srt=,;)elseci.addEventListener(,click,function()if(srt=f110,)b.innerHTML,不记得成都市'；elseif(srt=三,120,)b.innerHTML=zz<imgsrc=，elseif(srt=三,119,)b.style.backgroundColor=，green,;b.innerHTML=srt=，')elseb.innerHTML=srt+ci.innerText+eval(srt);)<script><body><html>2 .游戏一网络热门游戏，找出文字提示的所有相关图片即可完成游戏，截取网络图片进行相关操作。游戏一的页面和代码展示<!DOCTYPEhtml><htmlIang="en”><head><metaCharSet="UTF-8”><metahttp-equiv=z,X-UA-Compatib1ez,content=77IE=edgezz><metaname=z'viewport,zcontent=z'width=device-width,initial-scale=l.0><title>Document<title><style>divimgwidth:800px;).wwidth:50px;height:50px;border:5pxsolidred;border-radius:50%;position:absolute;opacity:0;)divposition:relative;.tltop:140px;left:430px;.t2top:480px;left:730px;.t3top:190px;left:690px;.t4top:550px;left:570px;.t5top:190px;left:625px;.t6top:620px;left:430px;.t7top:460px;left:180px;).t8top:620px;left:35px;.t9top:350px;left:130px;).tl(top:440px;left:100px;.tll(top:300px;left:350px;divdivimgwidth:50px;height:63px;)divdivposition:absolute;.rlbottom:130px;left:472px;.r2bottom:130px;left:222px;.r3bottom:130px;left:347px;.r4bottom:130px;left:287px;.r5bottom:130px;left:407px;).r6bottom:130px;left:530px;.r7bottom:53px;left:220px;).r8bottom:53px;left:281px;.rl(bottom:53px;left:345px;.r9bottom:53px;left:407px;.rll(bottom:53px;left:468px;.rl2bottom:53px;left:530px;divborder:solidredIpx;<style><head><body><div><imgsrc=z".img01.jpgalt=""><divclass=,tlw,><div><divclass=z,t2wz,><div><divclass=z,t3w,><div><divclass=z,t4w,><div><divclass=zzt5wzz><div><divClaSS=t6w"><div><divclass=z,t7wzz><div><divclass=z,t8w,><div><divclass=z,t9w,><div><divclass=,tlw,z><div><divClaSS="tilw'Xdiv><divclass=,ztl2w,><div><div ClaSS=rl<div ClaSS=r2<div class=z,r3vz,><imgSrC=.img02.jpgalt=""><div>v"><imgSrC=".img02.jpgalt=X/div>vzz><imgSrC=".img02.jpg"alt=""><div><div<div<div<divclass=z/r4 class=z,r5 class=z,r6 class=z,r7vzz><img SrC=img02. jpg vzz><img SrC=". img02. jpg vzz><img SrC=". img02. jpg vz,><img SrC=". img02. jpgalt=,zzz><div> alt=,zzz><div> alt=,zzz><div> alt=,zzz><div><divCIaSS=r8v,><imgsrc=,img02.jpgalt=""Xdiv><divClaSS=r9vz,><imgSrC=.img02.jpgalt=""><div><divclass=z'rlvz"><imgSrC=img02.jpgalt=""Xdiv><divClaSS二rllv"><imgSrC=".img02.jpgalt=""><div><divclass=,rl2v,><imgsrc=,z.img02.jpg"alt=,><div><div><script>constTl=document.querySelectorAl1('.w,)constT2=document.querySelectorAl1(,.v,)for(leti=0;i<Tl.length;i+)Tli.addEventListener(,click,function()console,dir(Tli)Tli.style,opacity=,T2i.style.opacity='0')<script><body><html>3 .游戏二猜数字游戏，自动生成一个不大于100的数字，拥有10次机会将其猜出，猜大或猜小会给出所猜的数过大或过小，猜中即游戏结束并显示恭喜你赢了，当次数用完还没猜中则显示你输了，不要气馁。游戏二的页面和代码展示欢迎来到猜数字游戏规则介绍：系统随机生成一个010O以内的数请输入您猜的数，您共有10次机会请在下面输入您所猜的数字:正确答案：您所猜的数:当前剩余次数为：次<!DOCTYPEhtml><html><head><metaCharSet二Utf-8”><title><title><head><styletype=,text/cssz">*margin:0;padding:O;.containerwidth:500px;min-height:500px;text-align:center;margin:0auto;background-color:darkcyan;.onewidth:100%;height:160px;padding-top:30px;background:linear-gradient(toright,cyan);.twowidth:100%;height:150px;padding-top:IOpx;background:linear-gradient(toright,aquamarine);num_oneoutline:none;).threewidth:100%;height:130px;padding-top:IOpx;background:1inear-gradient(toright,lime);inputwidth:154px;height:39px;border-radius:IOpx;buttonheight:36px;width:75px;color:#FFFFFF;font-size:15px;border-radius:IOpxIOpxIOpxIOpx;background-color:darkslategray;outline:none;#resultcolor:red;.threepfont-size:20px;brightcolor:#000000;<style><body><divid=CIaSS二COntainer><divCIaSS=one><hl>欢迎来到猜数字游戏<hl><br><P><bStyle="font-size:20px;”>规则介绍：<b><br><bStylC="font-Weight:600;color:#EOoOO3;”>系统随机生成一个（TlOO以内的数<b><br><b>请输入您猜的数，您共有10次机会<bXbr><p><div><divCIaSS="two”><h3>请在下面输入您所猜的数字：<h3><br><formid=z"two-one,z><inputtype=z,numberzzname=num_one”id=num_one”></input><buttontype=z,button,zid="submitbox”onclick=,zsub()”>猜/button)<buttontype=z,buttonz,id="submitbox”onclick=,check()”>查看答案<button><form><br><p>正确答案：<spanid=,rightz,></span><p><div><divCIaSS二three”)<p>您所猜的数：<spanid=,zresult,><span><p><br/><p><spanid="cout"style=*color:red;zz><span><p><br/><p>当前剩余次数为：<spanid="coun"style=,color:red,><span>nbsp次</p><div><div><script>varrandomNum=parseInt(Math,random()*100);varcount=0;document.getElementByld(zcou11zz).innerHTML=10;functionsub()varnuml=document.getElementByld(,num-onez,);varnum2=Number(numl.value);if(count。)次数if(randomNum>num2)count+;document.getElementByld("result").innerHTML=偏小”；document.getElementByld(,coun/z).innerHTML=10-count;elseif(randomNum<num2)count+;document.getElementByld("result").innerHTML=偏大；document.getElementByld(,counz,).innerHTML=10-count;elsecount+;document.getElcmentByld("result").innerHTML二正确“；document.getElementByld(z,coun/z).innerHTML=10-count;document.getElementByld(z,coutz,).innerHTML二恭喜你赢了；alert(游戏结束，请重新开始)；elsealert("游戏结束，请重新开始”)；document.getElementByld("cout").innerHTML=你输了，不要气馁；functioncheck()document.getElementByld("right").innerHTML-randomNum;<script><body><html>六.困难与解决办法困难：对某些属性的使用不是很清楚，对js部分不是很熟悉，有些东西还是比较陌生的，不能灵活运用。解决办法：哗站刷课，请教同学，和同学共同探讨，多看多实践多操做。七.此次网页设计的收获学习制作网页页面是一项非常有趣和实用的技能，通过这个过程我获得了许多宝贵的经验与收获。在制作网页页面的过程中，除了技术层面的知识外，我还从中学到了一些设计、用户体验和项目管理方面的技能。以下是我从中总结出的一些收获。首先,我学会了如何设计一个吸引人和用户友好的页面布局。在设计页面布局时,我学会了考虑用户的习惯和需求。通过观察和研究用户行为，我能够设计出易于导航、信息结构清晰的页面布局。我学会了如何合理地使用网格系统和对齐工具来保持页面的整洁和统一。通过良好的页面布局设计，我能够让用户更轻松地浏览到他们所需要的信息，提高页面的可读性和可用性。其次，我学会了如何运用颜色、字体和图像来提升页面的视觉效果和品牌形象。在设计页面的视觉效果时，我学会了选择适合主题和目标受众的颜色方案。我了解到不同颜色对情感和行为的影响，通过合理运用颜色可以引起用户的兴趣和共鸣。字体的选择也是重要的，我学会了选择适合内容风格的字体，并了解到字体对于信息传达的重要性。同时，我还学会了如何选择和处理高质量的图像，以提高页面的美观度和视觉吸引力。除了设计方面的收获,我还学到了如何进行优化和项目管理。在制作网页页面时代码的优化是非常重要的，可以提高页面的加载速度和响应性能。通过学习使用合适的工具和技术，我掌握了代码压缩和图像优化的方法。我还学会了如何使用版本控制工具来管理项目，以便更好地追踪和管理代码的变化。这些优化和项目管理的技能帮助我更高效地完成网页制作任务，提高工作效率和质量。最后，我从制作网页页面中学到了解决问题的能力和持续学习的态度。在制作过程中，我可能会遇到各种技术挑战和错误，但是通过调试和持续学习，我能够解决这些问题并不断完善自己。这让我明白了技术是动态变化的，我需要不断学习和跟进最新的技术发展，以保持自己的竞争力。总结来说，通过制作网页页面，我获得了许多宝贵的经验与收获。我学会了如何设计吸引人的页面布局，运用颜色、字体和图像来提升页面的视觉效果，进行代码的优化和项目管理，以及解决问题和持续学习的能力。这些收获使我能够创建具有吸引力和用户友好的网页页面，并提高自己的技能和竞争力。希望这些总结对您有所帮助，祝您在制作网页页面的过程中取得成功！
