前端页面设计总结课程设计.docx

《前端页面设计总结课程设计.docx》由会员分享，可在线阅读，更多相关《前端页面设计总结课程设计.docx（16页珍藏版）》请在课桌文档上搜索。

1、电子与信息工程学院课程设计报告课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据211班组别：一.主页:rUbcdysty1.p-b4ckgrourx1.r。时Nt:norppat;backgroundttach11ont:fixod;background-inuge:ur1.(irg52.jpg)iEH1.(tFdxj个人主页”，ac1.ass*ghrea9Xf1.itn1.*A(F d1.1.dti-tJIi,.dz1.iftftSxingWrg轮fit图/轮扑四jpg”xdh25S,255,25S*opacity-.7X1.ndtX-2-comt-W511rty1.j5能播图

2、3MbSp; Mbsp;&nb$p;我是东白兰州版巾学院.大我转2”班的王瑞森城区开嫩曲门卿!的学习,我己姓基本华握了网页设计的相关加鲫.#I1.可以手设计主网页,这个最畿的个人网页.员信睨很多方还不郸精致.怛Q我还是铁斑包的.初过口已学到的HR回也完整的设计出一个M页.ftW.本次网页HWHTM1.,csscss茶山嬴迁孙表机，忖F枝到表按钮、运枢通叁藐不丽扇嬴嬴否F2我的球和,3C1.ass1.text1.O人机之互与界界设it pCMss1.texO当业UU任慑电钵3W专业课：任课些体：米IWH老仲p)gsrc-ing/StA.jpgMMidth-,16phQiht-166px

3、,a1.t-大学体育武术)axt2a1.iHUIttW任课卷师*Mnft名将scr1.xxyperMtext/javdScript-81or，255,255,255ccixy.7ZmdeX，”2”count三-2esrc三,imjs页面包含一个顶部导航栏和主体内容部分。顶吾得航栏中有一个1.ogo,并且导航链接分别指向个人主页、个人爱好、个人信息和留言页面。主体内容部分包括一个轮播图和简介信息。轮播图是一个图片列表，每个图片都使用img标签显示,并且使用JaVaSCriPt脚本控制轮播效果。在简介信息下方,还有一个课程模块,展示了作者当前所学习的课程。每个课程都有T长封面图片、课程名称和任课老

4、师信息。整个页面使用了CSS样式和JavaScript脚本来美例口增加交互效果。二.爱好:个人爱舒1.头郡区域,H4vAf*.i01rtaC1.ass1.txTMef，呼mteir个人主贞aac1.ass=bor“卜摩代假“怔川个人偏好3给我用在3i11Hsrc=r*?H八枭,WMidth=,20px1.2be1.ght=160px-#欧曙的饮科：3C1.-S1.S)Ct4,-杯催眠的仍茶“机分串的Hfybr仃若也宛平荣却蹴笑的生物/吃的火MHMWCIaSS飞软tat的书体塔，r晶你有梦为马!91处可18；】，11c1.ssfift:以乐小红ifi Pc1.SigXVT汝郎我们他濡加I，去的话

5、万欢F山你屈就陪我比稔叫？,2phight-,16ep1.tC1.aSS1.teXtir最玳介的功祖1%笑世界。-ir1111.Ji栋你f1.i你认为注过的络皆”才被可怜！”,22pheight-16p-a1.t-*喜玳玩的新度，王行朱隼“Pr页面顶部有一个导航栏，包含个人主页、个人爱好、个人信息和给我留言的链接。页面中间是一些关于个人爰好的内容，包括喜欢喝的饮料、喜欢吃的火锅、喜欢看的书、喜欢看的漫画、喜欢看的动漫和喜欢玩的游戏。每个爱好都有对应的图片和描述。页面底部还有一个背景效果O三.信息:三信息:bcdysty1.cbackgrjrx1.-rcpj8F1frJStt51.Bkg个人主页

6、.) ac1.ass-*boa*hr“i组好.ht11)个人爱”1*Af.SftWpx;-个人那Hahref=c1.SS=,cur-个人仁！!-xH.,divStyU-Width:35p;1.oat:1.et;姓名:.ERttH1.HI5:2002.1.27S：Hft乡:tt南省定西。?.:耳城:科1.J大做IK技术，pMi:KttJK211i)：2021804051.33,-25555a55oty7NintfeX、2comt2src三,imgjs1.页面顶部有一个导航栏，包含个人主页、个人爱好、个人信息和给我留言的链接。页面中间分为两列，左侧是个人资料的列表，包括个人信息和家乡风景的链接（但

7、被注释掉了），右侧是个人资料的具体内容，包括姓名、出生日期、星座、家乡、学校、专业、班级和学号。页面底部还有一个背景效果。留言:ctacharset-UTF-8,.一1.inkro1.-Sty1.PSheQttyp-text/c$Mhrfcssp4rona1.css,，一,，-,一,一,(sty1.etye=textcss,functionNMj0pupMsg(rt5)(卜a1.ert(BS);)boOysty1.c-,backgrccnt:fixed;background-ifiagc:ur1.(img/52.jpg);background-size:Ieet730xjH4wA(i5ipSt

8、yU-Mne-Ixiight:!;!.!,. ac1.ass-bo-href/爱好)个人爱好a卜,i个人信gftIW1.vc1.assJf1.-sty1.%idth:470px;ac1.n-1.eft:5px;ea11g1.ns:ICpx;height:Wpxfor11action*11ctbd-postne-*formSWK:td81igft三1.eftebginputtype=wtexfnanc-,*textfie1.d-sty1.tda1.1.fi1.effb“O1.OZ一的a255,255,255,。3)”tdheight三-30-81igmright-VaUgnNFia(255.2S

9、5,25S,.3)w5产职业：卜“.一6!y4UiSJSI一,，；,xdheight-1.1.gnvifVaIIafi1.dC1.e把81。”“叫力包255,255,255,8.3)卷的专业：八”CtiWf&的舞好Itda1.igrt1.effbg-checkbox2,va1.up-checkbofrK,Inputtype-CheCkbOX-nw，-CheUtXx3v1.ue三*cheifx3va1.ue三-chekboxiftc-checkbox3-va1.ue-*checkbofitt1.1.;S的TMtdco1.span.2,a1.ign-1.effva1.n-tp,bgco1.or-,

10、rgb(25S,2S5,2SS,0.3)*sty1.txt-a1.ign:cant”“typo-buttonAnbspj a*SN/tab1.e)四.留言:“YhEI1.ang-ene给我谕J1.-5ty1.5hot,typ-text/cs$MhrHcssprRona1.c$JgEMMpopupMsggg)(a1.er1.(11s);2a匕。”口。8031.八七11”退卜个人信思?断91谢/。xj3c1.ss-bo-hrcf1：页.htn1.)个人主页)ac1.sbo-hgf-显好.ht个人会好。Oc1.assbo-hrf-(j,2.htfi1.1Ai,rift1.Ydivc1.as

11、s=,f1.-S1.y1.a-Wid1.h:470px;tab1.eMitfthB-See-border=for11acti恕的网名：iputtype-,tpta(e-rfiM1.：Q1.记tdB1.igiu-Ieft-bgc-,textfic1.d2*sty1.,height:2px7八d)S的职业Iptio在校学生/option)H!Jc不概透Rtdeight-30a1.n三-r1.ghtMuWi1.iddK-bgco1.orU(Vgba125二255.255,03)您的专叠：se1.efiCoption)软件工程“option),31,30智便上|学/叩七，00)“tsa(255,255

12、,255,3),yj:inputtychpckbox”naw-,chcktoxg1.u。JChQCkbox/沿泳inputtype*chex2Mva1.ue-,cheo111$inutIype=eChetkbox,na*e=checkbox3-v1.ue=-cheuiM1.?3-va1.ue-,chpckbofi*t1.R;SWtda1.1.kIef1.coh”。匕Ba255,255,255,。3)”inutnie三Sutoiftype=submitsty1.e=*width:7epx;he1.ght:50x;cursor:pointer;oc1.ick,K1-ppupM5g(,1.4nbsp

13、： spansty1.e=text-a1.n:center八d五.要创建一个留言板，你需要使用HTM1.、CSS和JavaScript来构建前端，并使用后端语言（如PHP.NodeJs等）来处理用户提交的留言数据，以及将数据存储到数据库中。下面是一个简单的步骤指南：来处理用户提交的留言数据，以及将数据存储到数据库中。下面是一个简单的步骤指南：六.HTM1.结构创建一个HTM1.表单，包含输入姓名、邮箱和留言内容的文本框以及提交按钮。七.CSS样式使用CSS来美化表单和留言列表的外观，使其看起来更加吸引人和用户友好.八.JavaScript交互：使用JavaScript来验证表单输入是

14、否合法,例如检查是否填写了必填字段，并在提交按钮被点击时触发提交函库连接来将留言保存到数据库中。10.数据库操作：创建一个用于存储留言的数据库表格，并编写码来插入、查询和显示留言数据。五.小游戏：的做/小卷戏请除入一个】先18f的软体puttypp-tptid-gue$sInputHfft后成个1到1“之何的时机及1.etrndonrpr-Math.f1.r(Nath.ran3n(),1.)/初怕化计e净和保”猜第次数的数加Irtguesses-1;UtCuessesArrdy-IhconstgUcss1.nput-(Socuncnt.getEIcncntById(guessInput*);c

15、onstCuessBtn-docunenxetE1.e11entById(guessxn);constconstresu1.tdocunent.getE1.e11ety1.d(resu1.t);guessesisp1.ydo()/荻取现我的猜照Irrguos-parnt(gxsInput.va1.u);/GfiU*输入的乂1MJ100的垃字if(isN3X(guess)11guess1.)resu1.t.innrim-谓扬入】丸1&2何泊致力)e1.se(/W祟精霸正确,R示胜利信总if(guess-r11dcNu11bcr)resu1.t.innorTt-,.-f*,4gsss)X/$(randonXurtorI;guessinput.d1.s01edFS回guessBtn.disab1.ed-true；e1.se(好如第测他谡/IH山东(gu$randW1.11txr)(resu1.t.1.nnerText=太大了！饰与试rt.*;R1.se(resu1.t.InnrToxt-木小了!谓可试&*;/沿柔玩粼的第用次做和别篇历史guess