前端页面设计总结课程设计.docx
电子与信息工程学院课程设计报告课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据211班组别：一.主页:<Idoctypehtn1.><htn1.1.ang三-en><head><netachars¢t-,UTF8><xit1.e>rU<xit1.e><I1.rtice1.，”Sty1.eSME-type三-texxcss,hre*«Mc$s/persona1.css,><ead><bcdysty1.p-"b4ckgrourx1.r。时Nt:norpp<>at;backgroundttach11ont:fixod;background-inuge:ur1.(irg52.jpg)><divc1.ass三-header'><divc1.assa*wie00*,><d1.vC1.aSSOeOYX3href-,persona1.htfir>iEH1.'('÷tFd<><d1.v><d1.vCIaSS-nav"StyIe-ms1.ns:15px;nargin-ieft:35>xj><psty1.e三-1.ine-height:1;>< ac1.a5S-bor*hr"力主更.htr11”>个人主页”，«ac1.ass*ghrea9Xf1.itn1.*>A(F<a>< d1.1.dti-tJ'I«'i<*-t'1.'>',.<dz< ac1.ass-bo-hrcf-SS.ht>1.>iftftS<a><p><(J1.v><d1.v><div><divc1.ass-contf><divc1.ass三*cr><dxvc1.35s*bo-id-*tx>x"><divc1.as5,inner,><u1.><1.i><div><i11gsrc*i11gf½fifH46Me.jpg*><div><H><d1.v><in;"C=r11gK:搐图/轮播图1.jpg"><div><H><H>< d1.v><if«SrOrCg之播图，能指图2.Jp><d1.v><11><1.i>< div><11gsrcTrg/粒播图/恰播相3-jpg*><<iiv>< 11><1.i><div><ingWrg轮fit图/轮扑四jpg”xdh<1.i><u1.><d1.v><scripttypc,'textjavascript,co1.or->'25S,255,25S*opacity-'©.7'X1.ndtX-2-comt-W511>rty1.j5能播图<div><div><divc1.ass-*cn1.><br>3»MbSp; Mbsp;&nb$p;我是东白兰州版巾学院.大我转2”班的王瑞森城区开嫩曲门卿!的学习,我己姓基本华握了网页设计的相关加鲫.#I1.可以手设计主网页,这个最畿的个人网页.员信睨很多方还不郸精致.怛Q我还是铁斑包的.初过口已学到的HR回也完整的设计出一个M页.¾ftW.本次网页»HWHTM1.,csscss§茶山嬴迁孙表机，忖"F枝到表按钮、运枢通叁藐不丽扇嬴嬴否F<2<div><div><br><d1.vc1.ass"co><divc1.055*contcnt2,'><u1.><1.ic1.8SSu-box1.”>我的球和<1.i><1.ic1.assbox4><ngsrc-1®«/KtZrjjhJpg-widtb-16ep-height-"IWpxea1.t->,>3C1.ass1.text1.O人机之互与界界设it>< pCMss1.texO当业UU任慑电钵3W<><1.i><1.ic1.ass-box4>< 1Q£Srcw-Iiig/Hsucf.Jpg-2160PX-height."IWpx-1.->< pcUss=-tetr><故仓博IB以及应用><p>< pCISn1.tCXt2”>专业课：任课些体：米IWH老仲p)<1.i><11><1.ic1.ass-box4><r>gsrc-ing/S>tA.jpgMMidth-,16phQiht-166px,a1.t-><c1.ss*tet1.-><大学体育武术)<><pc1.as>a½xt2a>>1.iHUIttW任课卷师*Mnft名将<1.i><1.i><1.i><div><scripttype=textjavascr1.pt-co1.or=255,25St255opacity=0.7zIndex=M-2eCOUm=-2。»src*sty1.ejscanvas-ne5t.11in.js,><script><div><scr1.xxyperMtext/javdScript-81or，'255,255,255"ccixy'.7'ZmdeX，”2”count三-2e"src三,imjs<anv3s-nest.n1.n.jsMx/scr1.pt><bDdy><tw1.>页面包含一个顶部导航栏和主体内容部分。顶吾得航栏中有一个1.ogo,并且导航链接分别指向个人主页、个人爱好、个人信息和留言页面。主体内容部分包括一个轮播图和简介信息。轮播图是一个图片列表，每个图片都使用img标签显示,并且使用JaVaSCriPt脚本控制轮播效果。在简介信息下方,还有一个课程模块,展示了作者当前所学习的课程。每个课程都有T长封面图片、课程名称和任课老师信息。整个页面使用了CSS样式和JavaScript脚本来美例口增加交互效果。二.爱好:<CTYPEhtn1.><htn1.1.a"en-><hcad><11etachar5¢t-',UTF8><x1.t1.e>个人爱舒<八1.t1.e><1.inkre1.三"styIesbeeftyp="textcss,href-cssrsona1.cssw><head><bcdySty1.e1.baCkgro5X1峰：no咋:f1.xed；gc*erounC1.mEe：UrMi曜，52.J咤);background-size:100%ICCX;"><1.头郡区域,<divc1.a$-"h9a(5«rM><0ivc1.ss-w1.00><divC1.ass-eIogoeXahref-persona1.htn1.->H4vAf*.½i01rt<a><div><divc1.ass三11av"><pstyIe-eIine-height:3;11rgin-top:-6pxj"><aC1.ass1.txTMef，呼mteir个人主贞a<ac1.ass='bor“卜摩代"假“怔川个人偏好3<ac1.ss',bo,'href/K1.g.htiT1.”)个人俏.y×a><cUss-"bo,hr”留在八1地”>给我用在3><p><d1.v><div><div><divCIaSS="COnteCt2"><1.><11r1.a-nox1.,>><11c1.ss,tJ0×4-sty1.e,M1.dth:JWpx;11rgin-1.eft:15px><i11Hsrc=r*?H八枭,WMidth=,20px1.2be1.ght="160px-<p4。”“七0七广>#欧曙的饮科：<p>3C1.-S1.S)Ct4,-杯催眠的仍茶“机分串的Hfybr>仃若也宛平荣却蹴笑的生物<P><1.i><11c19(aXx4Sty1.A1Vkith:3eepx；*><ingSmRrMd"Mdm小一浦"即，it-><pc1.8SS=-text1.->/吃的火MHM<P><pCh1.n1.tCXt4"M。火就MM3r)和好的朋友例T板p><11><11c1.SS三box4Sty1.e=wWidth:3O0px;nargin-1.eft:15&px;*><<g5rc-1ngXiA.jpg-Midth-',18p×height-16p×-a1.t->WCIaSS飞软t>at的书<体塔，<，。><pCIaSS6*14，111这天谅的核子!>r>晶你有梦为马!91处可18</仲>；】，<11c1.ss<*box4Sty1.e-W1.dth:3eep>< ifgSrC=rg爱，"收妖小红雄JM-Midth="IWpx-height="16ep-a1.t三->< pc1.as5-text1.*>fift¾:以乐小红ifi<p>< Pc1.SigXVT汝郎我们他濡加I，去的话<"万欢F山你屈就陪我比稔叫？<p><1.i><11c1.ass-box4sty1.c',v(idth:36p×11rgin-1.eft:ISOpx;*><ig5f*G.aig/爱好/动慢7NM1.dt->,2p×hight-,16ep1.t"""><C1.aSS1.teXtir最玳介的功祖1%笑世界"。<pc1.3SS=-text4->-ir1111.Ji栋你"<br>f1.i你认为注过的络皆""<“>”才被可怜！”<P><H><11C1.ass*box4StyIewidth:3O0px><if1.gsrc.wingM.jpg-Midth->,22pheight-16p-a1.t-*><PC1.Ss1.eXti”>喜玳玩的新度，王行朱隼“P><Pc1.ass->r<tr><.f；,»Id我i:：""p><u1.><scripttype*textjavascriptco1.or-2SS,2SS,25S"opacity*.7'zXndex-2-CoUnt"2”src-'imgjscanvas-ncst.11in.js,><script><div><body><ht111.>页面顶部有一个导航栏，包含个人主页、个人爱好、个人信息和给我留言的链接。页面中间是一些关于个人爰好的内容，包括喜欢喝的饮料、喜欢吃的火锅、喜欢看的书、喜欢看的漫画、喜欢看的动漫和喜欢玩的游戏。每个爱好都有对应的图片和描述。页面底部还有一个背景效果O三.信息:三信息:<IOOCTYPehXi><htn1.1.ang-'Vn-><hed><11etacharset,'UTF-8><tit1.6个人伯息“tit1.)(11Mr1.-sty1.esheetyp«-text/cssMhref»,'cssersona1.css,><head><bcdysty1.c"backgr<jrx1.-rcp<t:no-repeat;background-attach11ent:fixed;bckground-imgc:ur1.(i11g52.jpg);0MkrouM-S1.ze:10W73apx><divc1.ass=-hea(JerM><divC1.ass-Wieee,><d1.vc1.w*1.ogo*><9hr2"ersonj1.htfr>j8F1fr>J>Stt51.Bkg<di><d1.vc1.ssnv-><pSty1.e="Undhefght:3;nargin-top:-6pxi">< ac1.ss-bo-hrcf-主丸.htt1.>个人主页.)< ac1.ass-*boa*hr“i组好.ht11)个人爱”<j>< 9c1.ass三bor-href«-fAB.htr»1.H>1*Af».S</a>< ac1.ass三bo"href=W.htn1.*>ftW<a><p><div><div><div><divc1.a5s*1.ist_nM><divc1.ass"1.ist-n1.*sty1.e-,*mrgin-top:1.©i>px;-><u1.><d1.vC1.aS5”rit1.e”>个人那H<A1.N><1.i><ahref="<HI.ht>'c1.SS=,'cur->个人仁！<a><1.i><!-<1.i><ahref.".htn1.'>xH>><u1.><.,<11v><divc1.a$s«M1.ist_nr*Sty1.h-ndrg1.n-top:1.Wp×i',><br><divStyU-Width:35p×1.oat:1.e<t;<,><pstyU"nrg1.n-to:8px;">姓名:.ERtt<p>< pSty1.e=-IMrgin-top:7p×">H1.HI5:2002.1.27<p>< psy1.iiintop:Tjpx;1*>S：Hft<p>< Psty-rg±ngp:7pxj*>乡:tt南省定西。<p>< pSty1.e-tWg1.n-XOp:7p×>?.:耳城< pS1.y1.e="ITtargin-top:7pxj">:科1.J大做IK技术<，p»< p5ty1.e-nargin-top:7p×j*>Mi:KttJK211<p>< p5ty)-"argintop:7p×j-><i)：2021804051.33<p><br><div><divc1.ass*box><i11gsrceing/1.b.JPG,'width»"HSHheight-"318*a1.t->,-><div><div><div><58Iyttyp8ttxtav¾scr1.ptc。IOr>255¾55a55o¾>ty'"7NintfeX«、2comt2"src三,imgjs<anvas-nest.nin.jsMx/script><body><htr>1.>页面顶部有一个导航栏，包含个人主页、个人爱好、个人信息和给我留言的链接。页面中间分为两列，左侧是个人资料的列表，包括个人信息和家乡风景的链接（但被注释掉了），右侧是个人资料的具体内容，包括姓名、出生日期、星座、家乡、学校、专业、班级和学号。页面底部还有一个背景效果。留言:<DOCTYPfHeI><htn1.1.ag-',cn><ed><>ctacharset-UTF-8,>>.一<1.inkro1.-Sty1.PSheQt"typ<>-text/c$Mhr¢f"cssp4>r¾ona1.css,'>，一,，-,一,一,(sty1.etye=textcss',><sty1.e><scripttype-"tcxtJavaScript,>functionNMj>0pupMsg(rt5)(卜a1.ert(BS<);)<5cript><hMd><boOysty1.c-',backgrc<jDd-repeat:no-repeat;bockground-attacKr>cnt:fixed;background-ifiagc:ur1.(img/52.jpg);background-size:Ieet730xj><<1.ivc1.dSS»MhedOerM><d1.vc1.assyeoa><divc1.a5s-1.ogo"><hrcf-periona1.htn1.,*>H4wA(½i5i<a><div><divc1.ass-enav*'><pStyU-Mne-Ixiight:!;<nargintop:-6p×)>< CIdS、二飞。卜rd'：.htn>"!.!,.<d>< ac1.ass-bo-href/爱好)个人爱好"a卜,i< ac1.(S-vboa*hr""K总.htf11>个人信g<n>< aCIaSS-Oor"hre*ff1.A.tr>ft<a><><d1.v>I<div><d1.v><d1.vc1.ass»Mcontnx2M$ty1.e»-ndrgm-top:1.p×><divc1.ss"f1.5ty1.e-crgin-bottc11:20pxa*><i11src-,1.r19.jpg-width-,48p×-><div>W1.vc1.assJf1.-sty1.%idth:470px;ac1.n-1.eft:5px;ea11g1.ns:ICpx;height:Wpx><tab1.ew1.dth三*Wmborder=-0-S1.1.spadng=T"ce1.1.padding=-0-><for11action*'*11ctbd-postn<>e-*'form><tr><tdwidth-89-height艺a1.ign*,rightava1.n1.cW1.ebgco1.or三-rgba(255,2S5,25Si0.3)->SWK:<td><td81igft三1.eftebg<o1.or=-rgba(2S5,2SS,255j0.3)><inputtype=wtexfnanc-,*textfie1.d-sty1.<*,beight:2px;*><td><tr><tr><tdheight三w3e"a1.n三rihfva1.ign="11idd1.e-bgco1.or=Mrgba(25S,2S5,25S,0.3)-X»邯粗，八d><tda1.1.fi1.effb“O1.OZ一的a255,255,255,。3)”<inputtype*passwor-nae-textie1.d2*sxy1.e三"he1.ght:2×7><td><tr>'<tr><tdheight三-30-81igmright-VaUgnNFi<M11bgco1.or=-rgj>a(255.2S5,25S,.3)w>5产职业：<td><tda1.ign-1.effbgco1.or.Mrgba(2SS,2SS,25S.0.3)"><se1.ect>卜“.一<option)在校学生“oUon><option>6!y<optio11><opton>4UiSJS<otion><919Ct>I一,，；,<td><tr><tr><xdheight-1.1.gnvifVaIIafi1.dC1.e"把81。”“叫力包255,255,255,8.3)卷的专业：八”<tda1.n三-1.eft-bgco1.or三'rgba(255t255,2S5,0.3)*><se1.9Ct><option></opt1.on><option>CtiW<ot1.on><optio11>½f<otion><sUct><td><tr><tr><tdheigt-a)1.gn-rigt,'va1.ign-"nidd1.pKbgco1.or-Hrgba(255,255,255,.3),>&的舞好I<td><tda1.igrt1.effbg<o1.or="rgb(2SS12SS,25Sie.3)-><inuttype-checkbox-11aj,'checkbox"va1.ue-checkbox',><inputty¢-checkbox*naw>-checkbox2,va1.up-checkbo×>frK,Inputtype-CheCkbOX-nw，-CheUtX>x3"v1.ue三*che<kDo×>if<inputIype=eCheckbox"n*=,checktx>x3"va1.ue三-che<kbo×xift<inuttypecheckbox"na>c->checkbox3-va1.ue-*checkbo>fitt1.1.;<tr><tr><tdhcight,10-1.ign-,rightvHgn-nidd1.c-bgco1.or.,rgba(255,2SS,25S,.3)>S的TM<td><tda1.ign-Uft"bgco1.or-rgbM255,255,255,3)”><1.be1.><tcxtrcna11e-textarc,co1.s*,S0rows-6-><tcxtarea></1.ab«I><八d><tr><tr><tdco1.span.2,a1.ign-1.effva1.n-tp,bgco1.or-,'rgb(25S,2S5,2SS,0.3)*sty1.<""t<>xt-a1.ign:cant”“typo-"button"><inutna11e三Sutoiftyp三"submit-styIe=eWidth:70px;height:J0px;cursor:pointer;"ocic1.ic1.c«nNMaBpapupMsg(,.7X)va1.ue,*>Anbspj <inputtype-rc5ct,'nanc*"Subnit2"5ty1.e-width:78px;hcight:ip×cursor:pointer;"vd1.ue>a'*SN><spnsty1.eext-a1.1.:center><spn><td><tr><orn>/tab1.e)<div><scripttype-text/javascript,co1.or-2S5,25S,2S5-opacity,.TzIndex*,-2count-,25rc-,inr/JsZcanvas-nest.11in.js,><script><div><body><htn1.>四.留言:< Idoctypeht111.>“YhEI1.ang»-ene><ead>< nctaCharsct-eUTF-8',><t,t1.o>给我谕J<"t1.o><1.1.nkr>1.-5ty1.5ho>t,typ«»-text/cs$MhrH"cssprRona1.c$"><sty1.etype=textcss-><sty1.e>< scripttypo-"t¢×t/OavaScripf>JgEMMpopupMsggg)(a1.er1.(11s);2<script><hed><bodysty1.e*"background-repeat:no-repeat;bckgrou11d-attach11c11t:fixed;background-inagc:ur1.(img/S2.jPgJjbackground-Size:IGei738pxj*><d1.vc1.ass*hea(Jer-><divC1.SS=*wim-><divc1.aM-1.ogo-><a匕。”口。8031.八七11”退卜个人信思?断91谢/。<5"><d1.vc1.assrnav*><psty1.e"1.Ine-re1.gt:3;arg1.n-top:-6>xj><3c1.ss-bo-hrcf"1：页.htn1.)个人主页<)<ac1."sbo-hgf-显好.ht<11>个人会好。Oc1.assbo-hr¢f-'(j,2.htfi1.>1'A<i,<a><ac1.ass三bor*href三-.;.tn1.,>ri>ft1.Y<><p><div><d1.v><div><divc1.oss*cotcnt2"sty1.e-,'firgintp:1.G0px;*><divc1.ass*f1.sty1.e«4nargin-btton:2p×>><i11gsrc-irg19.jpg,'width-48px><div><divc1.ass=,'f1.-S1.y1.a-Wid1.h:470px;<11argin*1.eft:S0px;margin-top:IOpx;height:3x"><tab1.eMitfthB-See-border="©'<e1.1.spacing=1.-S1.IN(W“第”e”><for11acti<-*11ethod-postname-*form>><tr><tdwidth=89-height=40w1.ign=Vighfva1.igMf1.ddd1.e-b8co1.or-r8bM255,2S"2SS,e.3)8>恕的网名：<td><tda1.igrv-Uft-bgco1.or-rgba(255,255,255,.3),><iputtype-,tp×t"a(<e-<<<rfiM1.<sy1.e,heit:2小，>：<八r><tr><tdhoight-,3e,a1.ign-rghfva1.i11-11idd1.-bgco1.or",'rgt)(255,2S5,255,.3)">Q1.记<m><tdB1.igiu-Ieft-bg<o1.or=-rgba(2S5t2SS,255,0.3)-><inputtype-po55Mrd,11a>c->,textfic1.d2'*sty1.,'height:2px7>八d)<tr><tr><tdhoightWa1.ign-right-va1.ign*anidd1.e*bgco1.or-"rgba(2SS.2SS,2SS,e.3)->S的职业I<td><tdM1.w1.秋M810Eb"255,25555j83)”><se1.ect><ptio在校学生</option)<option>H!Jc<opon><option>不概透>R<otion><se1.ect><td><tr><tr><tdeight-30a1.n三-r1.ght"MuWi1.iddK-bgco1.orU(Vgba125二255.255,03)您的专叠：<td><tda1.ign-1.eft-bgco1.or.'rgba(2SS,2SS,25S,.J)-><se1.e<t><opt1.on>fiC<option>option)软件工程“option),31,30智便上|学</叩七，00)</se1.ect>“ts<tr><tr><tdhe1.t-1.1.r1.ht"vdMgne-nidd1.e-bgco1.or-Vgt>a(255,255,255,3),>½yj:<td><tda1.ign-'1.eft*bgco1.or-Mrgba(2S$,25S,25S,e.3)M>inputtychpckbox”naw-,ch¢ckt>ox"g1.u。JChQCkbox"/沿泳<inputtype*che<kboxHna«e«wchec1.c1.x>x2Mva1.ue-,che<kt>o×>111$<inutIype=eChetkbox',na*e="checkbox3-v1.ue=-che<kbo×>uiM<inputtypc-checkbox*'na*c-*checkbox3,'va1.ue-,chcckbo×>1.<?<i11utty-ch¢ckbo×,naw,chcktx>×3-va1.ue-,chpckbo×>fi*t1.R;<tr><tr><tdhcight-"1.Wa1.ign-,rightva1.ign-nidd1.e,bgco1.or-,rgb(255,2S5,25S,.J)->SW<td><tda1.1.kIef1.coh”。匕Ba255,255,255,。3)”»<1.abe1.><tcxtrcan11e-tcxtarca*'co1.s,Srows-6,'><tcxtrca><td><tr><tr><tdco1.spn.2-I1.ign-eIeft-YaIigI2top"bgco1.or-rgba(2SS.25S,25S,.3)sxy1.etext-aMn:center-type"buttonw><inutnie三Sutoiftype="submit"sty1.e=*width:7epx;he1.ght:50x;cursor:pointer;"oc1.ick,"K'1-ppupM5g(,1.<*)*v1.ue-5>4nbsp： <inputtype-ercsctMnane-,Sbnit2*styIe-width:7px;height:Wpx;cursor:painter;-va1.ue-RK>spansty1.e=text-a1.n:center><span>八d<tr><forn><Ub1.e><div><scripttype-"text/javascript*co1.or*a2SS,2SSf2SSaaopacity-'.7*zIndex-*,-2count"28a$rc-Hi«rg/j$/canva$-ne5t.nin.js,><script><d1.v><body><ht111.>五.要创建一个留言板，你需要使用HTM1.、CSS和JavaScript来构建前端，并使用后端语言（如PHP.NodeJs等）来处理用户提交的留言数据，以及将数据存储到数据库中。下面是一个简单的步骤指南：来处理用户提交的留言数据，以及将数据存储到数据库中。下面是一个简单的步骤指南：六.HTM1.结构创建一个HTM1.表单，包含输入姓名、邮箱和留言内容的文本框以及提交按钮。七.CSS样式使用CSS来美化表单和留言列表的外观，使其看起来更加吸引人和用户友好.八.JavaScript交互：使用JavaScript来验证表单输入是否合法,例如检查是否填写了必填字段，并在提交按钮被点击时触发提交函库连接来将留言保存到数据库中。10.数据库操作：创建一个用于存储留言的数据库表格，并编写码来插入、查询和显示留言数据。五.小游戏：<100ctypeht11><htn1.Iang=en><hcad><netacharst-"UTF-8><1.inkre1.='sty1.eshe«tMhref=-sty1.e.css"><head><boy><h1.>的做/小卷戏<h1.><d1.vid=gane-><P>请除入一个】先18f"的软体"p><ir>uttypp-"tpt"id-"gue$sInputH><buttonid三guessBtn->fft<btton><pid-resu1.t*><p><pid-guesses'*><p><div><script>后成个1到1“之何的时机及1.etrndonrpr-Math.f1.r(Nath.ran3n(),1.)/初怕化计e净和保”猜第次数的数加Irtguesses-1;UtCuessesArrdy-IhconstgUcss1.nput-(Socuncnt.getEIcncntById("guessInput*);constCuessBtn-docunenxetE1.e11entById('guessxn');constconstresu1.tdocunent.getE1.e11e<ty1.d('resu1.t');guessesisp1.ydo<u11ent.getE1.en*fn8yId('guesses');guessBtn.ddEveot1.1.stener(,c1.ick',/uct(or>()/荻取现我的猜照Irrguos-parnt(gx>sInput.va1.u¢);/GfiU*输入的乂1MJ100的垃字if(isN3X(guess)11guess<111guess>1.)resu1.t.inn¢rim-谓扬入】丸1&»2何泊致力)e1.se(/W祟精霸正确,R示胜利信总if(guess-r11dcNu11bcr)resu1.t.innorT¢×t-,.-f*,4g¢ss¢s)>X¾/$(randonXurto¢rI;guessinput.d1.s01edFS回guessBtn.disab1.ed-true；e1.se(好如第测他谡/IH山东(gu$>randW1.11txr)(resu1.t.1.nnerText=太大了！饰与试rt.*;R1.se(resu1.t.Inn¢rToxt-木小了!谓可试&*;/沿柔玩粼的第用次做和别篇历史guess
