前端页面设计总结.docx

信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据212班一.设计思想设计一个班级网站。二.各个网页设计分析1.网页的结构主要分为登录界面，网站首页，班级活动展示,班级部分人员信息,班级论坛，个人信息共六大板块。2.部分网页的具体实现方法，(1)网站首页，主页设计主要以盘了的形式划分.背景图片也调整到对应大小，页面上方的导航栏所对应的字符都设置了超链接href,班级图标也通过链接刷新首页，鼠标移动到相应位置时会到达卜一个页面，中间的图片之间设置了合适的间距并渐整图片大小，并用js做成了轮播图，其中还用js做了一个的换肤效果，并且还加上来一个类似于点击文字、链接放大的效果，以及一个扫描二维码动画，扫码可进群.代码：<!doct>frtrt1.><htn1.><hed><rtach"atFf8><t1.t1.>Mttt<titU><11nkr1.*5ty1.eUxt'hr£»e<t$.<tse><1.i11kre1.«-5ty1.esh«fhref*g乂<scr1.ptsrc-JQury.ft1.js><ur1.pt><5ritsr<M1.dte.JgrSpt)<5cript5rcj5.j>*><5cript><hctf><header><!-<d1.vieone><d1.v>>><div1.d-<X1.><d1.vC¼5ict-j><i11Esrc4三.jpg"1.t"itfc><d1.v><d1.v3%s'8fr2><p>AB<212«</p><diY><d1.vc1.as5-f-a>卬通4破&MbSbM>气宇H0<p><p>片"今力St>sp;SbZ>Sb“；和马自我p)<d1.v><d1.v><hoadc<5e<tio<1><div1.d-tM>w><divc1.assatM01*><hZ>班线向介<小2><divcIasMt-o1.diV1.*></div>MvC13sjtwo1.d1.v2>3则吸大竽四密不开的MW：,它合作你网欧团附候帚忙你.会在一一的-幺HC3%3""iTMEM.，AJM，,："St1.-um创七个a¾r.SmfB体.*zM”不6¾hw不由我不去¾的人加杜1大¾u2n收除!<p><div><div><divc1.ass-tM02>< ac1.as4-rvhrfJaviscr1.pt.< 1-/tWttf->< 4c1.»Mer»e«t'href*j«va»<ript:;*>4ct;</8>< o1.c1.as5ronorM><11><1S><1.i><1.1.><11c1.35s-5c1.ect><1.1.><n><11><H><H><o1.><u1.>< H><hregW2.jWaK*><><1.i>< Ji><4href*><r<srcie.jpe*1.t*><><1.i>< M><*href-><irsrc16.:Mra1.t-*><a><1.1.>< M><ahrf><1.src-7.jpg*a1.t-*><a><M>< H><>hr*><5rwx*.jpg-)t*><a><1.i>< f-<1.i><ahrf->><i11c»rc«*2.jpc*a1.t三->><xH>-><7ui><div><div<145MtM><u1.>< )i><4hri1.肠,Jt.h5ir注册a,M)< H><*href5>Mft.htp>f1.<M><U>< M><3hrE个人口见用H.htr1.>个人Q<A><M>< n><h3山绕成小信g.htrT>初找成公信Z<6"1.1.><H><*Mef板.HZ>HI找由占i"0x"iVu1.><div><i>用&公告<g>«p)初级/生公诉代利俵£生力J1.方案1.制KW吸公俯噬匕曲生湎Gtt出尔代价EA，.较*川清沿IXJ.2.每天你生活要0鲁比打利”8里生.中午12点检宣卫生.玄W1.MIfb给优利不含格的将在撑板E公布枕济.3 .军妇的带领分计H,在机9M揽*井求生IM用得保浦竹.4 .埃&期MT3次的耐将通行随iS大利1.次，曲生iM员册以女排5 .里生相宣Ien的均切生温姿公立博值日生京I1.m日6每火中午由生好委员帆打岐打好了全常时软宣吃馍.生然委员带以吃快.a-wttr.不俭大施.幺悔，的入京班的XHVBHttUQJR花木班般£个不纪涔M例tti在收只内外礼饮欢峋.7 .itt1.AK.端娅饭MWa皎斗内状.以他加猊彬也叱恒仙卫士.8 .aIV学生*M用M人第方瞬双果.不潴不去物&不地吐寅如书今之不管9位含I9的每可以在发校公布.当馋这些好打慢做侵蚀才出界成.只要形琉个生好的1«气环女加卷人.行为习H不好的旗子应该会有所改,9 .尤Kt!褒SIn个内的M4不得往后商工42员被送列.本嫌祖宗将核零分计镰,学生的转以初反学情绪用修会什个人无培门容如此“瞰的“分只足为r起到学生帙G华空的Hffp(个人的想出念会出辨阳心热至过&让人反络取上都只是我个人所名他£不知通令不理.及大兴，£就此爪承代出公.谙攵宗精"促指出彳出内次由自也以修值好S.让这个力富重御吧合明介尔力外。:公先要说彳I妁tM<¾:«aHt<ftwiR募伞时不检延E老师)一懈不匕何匕打天F(G件械眼18：;计0,肃沽和Ira在se邛次去川个修代分和髭低分.取两或的T均分为粒性飒只我打句个人卫生我打的校园，定会更m奥好.<p><4iV><d1.v><d1.v><dividf10Off'"><divi*thneec1.a>M,w>SZxftifiK采取示“0><divc1.ass-thrw1.><div<1."“tZe2><M¾>S<H1>33,<P4><Pi><P1><P1><W><PJ><P4><P4><a>U!烫力YeSs)>*青海%JW<a><m><wj>3)<poqp<pe*4i>3/<M4>11MW<U1.>«5-耳1)<Mi>himfi<m><«/>：tM<*>Iin%77)<M><MJ><MX>H(ti<M1.>3)<peM1.)Sm<<w>y;zua<w>>><IP><.t*r*M.<<PTP><.R.-55tr>.×M.m”p)<ATP><TP><!P><Arp><ATp><AtP><AtP><Afp><p><A><Ap><ATP><ATP><ATp><AtP><Cp><ACp><td>.EXtt*½<td>“d>f1.K色靠岸便用、敢a统计t”td大学英in<td><td><td><td><td><t<b><tr><t>Jfti.<1i<t><td>ftt½<td><td>iF*MMtftMia<td><td>z2体育八"<td><td><td><td><td><td><td><W><tr><tr><th>?R11<tb><td>1.¾h.ffii<td><td><td><td><td><td><ytd><W><M><td><td><td><td><tr><tbocJy><tJb1.e><d1.v><diy><dSv><4iv><div><divId-footer-Cu1.>价劝我东442»<dWCM"f.tr1.)<<Uv<1.a»Me»cn1.e></div><d1.,c1.35Sscn2><M>1.Wt(><h>><hf><p>为r*aa优箕学川的双余住酒.国少但论悖自机动开展,恰对体力温初的WVEfiW程USe力.最发/工学生徐总收碑和靖jc体开.努力成夕的妨t取示出新“代火今生的崖依物'和丸枝热力Q!，、增遗隙小年姐善专M1.加仙文比，酎*“友袒加一比寿第“俯6咳现菜”军办我后2823*"&向东杷0夕数谏6.<p><div><d1.v><div<h"fN*2)<divc1.«»MesenJe></iv><divc1.assjc*,4>CA朗比亮hA<hr>e>硼m幺用就力：4m(.过栉可以山油性情.开Ma行.史明行,*必收督：时以“故城均界Nii并翔汝入柒的伟殊僚力，以及上口的代把住即式的n和9别佗力.+付一坳可律财,行饮白中，共又自此好，灶以酎仗,-HJ-於临律艇含义布倩雉啦,IWt爱大成余力.<p><d1.v><d1.v><div<U¼sfMhe<*>><<tiv<U»mscr»s*><d1.v><d1.vc1.*5S'i<r6>e><hr><p>ftAJZHft*tUm.所以mH的水i*KR*0件臾类的育的依M!.至于就作汽必用求比正的制笈方还是左手仃手慢初噂廷是婚及伦他位M死了我怆的利或是个州郤代闲人而”了,毕克母个人QR不何行他产生3小克他侑行双悴描(T敛上以F)卜会但今加力人找(丹饿郎小时(ti!H丁出家的.小可。理"为.<7p><div><div><div><so<t1.<x><!-总以MMd-><!-困/电极¥赋-><div<135S-1Wdtoo1."><uX><1.i<1.gwmt>创Mby及及孝“H><h>班饿溟阳猊<m>片动仪示“1，<>(nAMj<M><u1.><div><fctr><dividfoof<h2>g入我力”2><div3"01)-<divc1.MM*n*2a><4Av><h4c1.MS-*QQQQWW<h4><h4c1.NEgf>依曲群<Zd1.v><footr><div>bcdy>(3)班皴部分人员信息，班级部分人员信息我使用J'htm1.中的表单元索进行制作，加上a链接就能完成效果，同时设置了选中框.代码：<,doctypehtr1.><htn1.><retChorset-eUtf-S*><rutahttpqu½.ACc<cat1.Mo<8tMt”IEidgQ”>114r*,vi*p<*t<eft<t*awidth*dtvS<*width,initia1.¼(1.f*1.*><1Ij£3小e"H篁筋总七被:1U1.任他内G>9%触珈乂。！<t1.t1.e>三ttK<t1.t1.e><1-6<x>t5tr4p-><1.i11krc1.*5tyIeshcetehref*.bwt5trjpc*st>ootitrap.fii11.c>>< !Hmsshift；RetpondJt足力计IE8丈朴HTK1.S(*江火CiU1VddUqueriesi)j(fe->< 1.-A*Xti1.*以:牌双，改正直接辨htr1.iftfVJiKH*1.,>仿“负而叼XB1.JS不公作用->< -ifHIC9)><scrtptjrc-,ttpszc>.js-rc<htn1.551.¼if3.7.3d1.5ttn1.5iv.1.n.j5'>c5cr1.pt><cr1.ptsr<*httpscdr.jsdrvf1.r(pond.j1.4.2dastr(pod.<vinjftra><ficr1.p><1*11dif-><1.i11kre1.-sty1.eshet,href*.cjiiMe>.c55'>.return(width：1.Mt>>height:IeePM;f1.oat:right;back9*cund<<o1.ar:warurg；1fo11trSz:Itpi;fo<t-fi1.y:工文彷体”;height:ieet;back"8(m。：ccrft;fUx：1；disp1.ay:Hex;Just1.fy-Content:center;a1.in1.tm:c««tr;tM<k9*jnd-iru(*:】t-8rR1.Et<S3C和1W,-b<2b16X);p4ddi1.g:©nrc:9；)f1.tMr(width：iwepx；height:7px;rurgjn:5邺4uto;.fatherh2(rurin:0uto;width:2ep;h1.gt:Sp*;fo<tfi1.y:懵”；foot-size:4©pM；1.ine-height:S>x;toxt*a1.1.gn:center;.father.s<(rurg1.top:2px;hieM:6Va;width：1两；.father.sen.son1.(height:9SX;width:37.SX;border:)(aso1.idpink;box-shadow：5pi2p35px7px1(OCK);(1.oot：1.eft;furg1.top:2px;.father.58.n1.M(urg1.n:Buto;ridth:2馆)盯hMRt:2Spx;font-fMtUy:ffiff."font-SSit：2)p>1.ine-height:25p«tcxt1.ig:center;rQrgin*top:iep*;.father.son.son1.u1.(height:S7f;width:¢0%;rvjrgntop:2gx;).fithr.$on.4oa2(height：9W;width:57.5%；f1.oat:right;bM<r:Jpxso1.idpSnfc;WXsXw:5pi2p«35PIr-Tpx2WCA;rarein-top:2Spx;.father.5©r.so1122(rurgin:0uto;M1.dth:2W；hiiM：25f>foot-size:2Jpx;1.ine-height:2Spx;toxtJ1.1.gn:Cemm;u1.11(width:ie«t；Might：);font-5ire:14p«text1.ign:C1.ine-height:3px;1.it*5ty1.*:nor*;Ma,93t皿aS.97t.J9.410(disp1.ay:rcrr;)width:358*;rrgin1.eft:Ia»ho1.gt:1.Spx;padd1.gtc<>:1於；rjrin1.eft:ITSar;co1.or:red;.b1.:hover.91.(disp1.ay:b1.ock;height:23p×width:27即“.b2:hovor.2(dKp)4y:b1.(c;height:239px;width:27x;).b3:hoverdisp1.ay:b1.ock;height:238px;width:27邺x；.b4:hovar.a4(di$pUy:b1.ock;height:23px;width:27px;).b5:hover.a5(disp1.ay:b1.ock;height:2期;width:27即；.b6zhovor.a6(dKpUy:b1.<k;height:239px;width:27x;).b7:hover.a7disp1.ay:b1.ock;haigt:238px;width:27>m;.b8:hxor.8(disp1.ay:b1.ock;height：2Wpx;width：27px;.b9:hover.a9disp1.ay:b1.ock;haigt:238px;width:27邺*.bie：ho/«r.16(dispUy:b1.ock;height：230px;*dth:27px;.b1.:hoverH(co1.or:red;).b2:hoverH(co1.or:rE;.bJrhove*H(co1.or:red;).b4:hoverU(co1.or：red;.WihoverH(co1.or:E;,.b6:hoverH(co1.or:rM;.b7:hoverH(co1.or:red;.MrhoverU(co1.or:m；.b9:hov«rH(co1.or:cM;.b1.0:hovcrH(co1.or:red;.father.5.5C1122(rrg11:eto;width:2Mp*;h*iM:2px;foct5ize:23px;H11ehctht:2Spx;text*1.1.gn:ct;irgi11-top:1.p;.sc<3(2rgSn:0auto;nargntop:2epx；width：99%；height:S40x;.5<x3div(rurg1.top:ISpx;rurgSn-UH:毋x;height:25epx；width:25px;f1.oat:1.eft;.soc3divIre(width：ieex；hiht：8Cft;tw<kcrw11d-5ize:cwv;trjnsitio<:113$；divh2(width：ie«i；height:2«t;co1.or：re*font-fami1.y:小体.so<'3ir<:»wer(trnjfcrr:so1.e(1.S,1.S)t3te(15de);<Sty1.><heed><bc<y><divc1.55三*<ontanc<><divc1.assrcw><d1.vC1.Wfjgc加2班成员（小2）<1Vc1.aiMSn><d1.v<135SiH1.><u)><d1.Y<13iMW><1.i>三K<1.i><div<Us4A1.><1.rgsrc-*1.jg*a1.t,>p等好p<div><d1.v>(mc1.attW><H>1MK<H><<Jv<14ss<*2'><i11;rc*2«,jpc,81t*<p>t0f<p><d1.v><div><ivC14M,W><11>14W<M><d1.vc1.assar><1.gsrc-22Jg*a1.t-*><div><d1.v><divc1.as-t4><divc1.*SM*M*><bs5rc*25.jpra1.t*><P>JM>¾<P><d1.v><dKv><ivc1.a>M,W>”生活要W1f<d1.v<CaS-Xingsrc-*24.jpg*a1.t-><p>MWI<p><div><d1.v><d1.vc¼ts-ab6e><H>MI1.H<H><iv<14SM36*><1»>Erc*25.Jpc-a1.t三*><p>-C2<p><d1.v><d1.v>必Vc1.asMb7*>Cn文体委a"”<d1.vc1.ass-v>7a,><i«g"C"26.仔夕aK-*><p>Ktf<p><41v><d1.v><d1.vc1.ass't>8><1.>ttM<H><divc1.>SM<B*><i1.K>C27.JPC,1.t*,*><d1.w><div><vc1.MW>CnCW姿如SC<d1.wC13-F"xSgsrc-26.jg*a1.t-><p>朱。笑“p><div><d1.v><divc1.ats-bW><1.i>AIRM<H>SiVc1.»M10*><i11;cm*27.jpg*1.t三><p>RW<p><d1.v><dKv><u1.><div><vc1.Assasc*aa><M>KrfiM<hj><141MSCn5><4）个人侑息展示个人信息展示主要展示的内容是照片，照片翻转。代码：<IdcxtypvMf1.1.><htn1.><head><txcharsot-*utf-8*><tit1.e>jtkt1.*i<tR1.e><sty1.e>YPad(Hng:切rin:%)retur11f1.oat:r1.gt't;disp¼y:SnHeb1.ock;width：1.Mt>>height:IsPx;background:r«d;padding：e；MCg1.n:e；height:U0A;disp1.ay:f1.e;Justifycontcnt:center;backgroundIgM'grXRnt(NSCd1.%.Sgg1.&rt);backgroundsS2:<ov*r;f1.ex：1；1.ig11-item:center;.fW(width:height:6Spx;rurg1.n:IeePXwto;position:r*Utivw;,.father.rctm(po1.itico:abso1.ute;top:-4«pm；right:-27>x;width:height:36px;fatherh2Mrin:0auto;co1.or:tMigo;bcnJr:Ipx(MdS<*jwidth:2epx;height:88px;fcnts1.2a:4Cp*;HiW-Might:8邺;text-1.ic11:cer*ter;.father/8(width:height:5Wm;border:3pxSsbedp1.nfc；box-shadow:SpA2pxJSpx7pxIoeaA1.2;PoUti8：re1.ative;.son.hiddcn1.(top:SCpx;right:33)p;width:JJ3p三;hcXt:S204;posit1.c<:½o1.ute;7bordr:Ipx(o)idr*djdhp1.”：none;*/).son.M<M82(top:5则；right:9px;width:333px;height:S26x;PoUti8：4bo)ut*;b<d<rrIpx必必<*««；,/disp1.ay:n<x*;s*/.f4thr.S6u1.(width:1W;height:5即引bcrdr:Ipxso1.idrod;"/>,father.5C11u1.1.ihoverbockrc<J11<1.co1.or：be<e;>.fith*r.5cr.9>>e<*u1.M(back©round-co1.or：transparent;>S0nu1.1.1.ifM>*r.$0CyMdisp1.ay:b1.oc*;>/.Othr.S8u1.H(f1.at:IcH;1.ist-sty1.e:none;height:Spx;width:3)p;1.ine-height：翔”：；fo11tsue:2px;textj1.1.gn:cent”；818：W1.Ffftf；.father.s<.jcncr(height:S29px;width:1.1.Wft;.father/8.soefrru1.(width:1供脸heiht：xee%;.father.5srzw1.M(rnrgin-top:2px;width:1.M;height:S4.4p*;disp1.ay:SnMr*;1.ist-sty1.e:sw>f*c;100t-S1.ie:ISpx;1.ine-height:S4.4px;textHgn:1."t;P-Jdd11c1.t:Wpi;co1.or：3A1CO9;ftgr.$8.wr*rwidth：1两；height:ee%;d1.pUy:WA;.father.sc11仅Tb*<2div(height:248px;width:2g>f1.<Mt:1.eft;rjrn1.eft:4ep;rargi11top:ISpx;,father.5C11.s<r*err*r2divr<(dth:et;height：ee%;g<k9*0wd川:<ov*;>.hiddcn1.Murgin:0auto;rwrSn-tOp:1.)p;f1.oat:1.eft;width:99X;height:3的tr4ndtio:411”；b<d<r-rdiv3：W;tninsf0*fcs<4¼(3.S93.S)ent(珀d”)；opacity:0.S;.h1.ddo1.1.ng:nth.ch1.1.d(2):hov<>r(tranifertc<o1.<(3.Sp1.5)routt(-Meg);opacity:e.1.;.h1.ddn1.gmdIW(>hov”(tM"crG8c1.c:MftWft;*/tr4115forr5<a1.e(1.25,1.25)rotMe(-Sec)；opacity:e.s；“回叨/，.hidden2divZnUntop:2px;width：Ieex；h*igM:)C«.h1.dde<2div1.r«(rQrg1.*top:2p;rv11JinUH：)gu;f1.at:1.eft;width:7然；height：eep;transition:a1.1.”；.h1.dden2(HV1.11fizover(g<ufcrcj1.o(2,2);opacity:0.5;.hiddcn2divp(rurg1.n*top:7p*;width:2跳；f1.wt：ri<t;co1.or：48<DCF5;“sty1.e<head><bcdy><divc1.ass-thr'><div><cUi>etvrnhref->i2H,j<oxiv>><divC13S5-5C*1><d1.vc1.ti1.Mon>SfCBeMA1.tjptfc1.t*><111R5<-ft2.)pa1.t-,"><1.f1.gsr<-W>,.3.jpg-1.t-"><d1.v><divc1"sZB*Q)<div><1.112src-'*rftM.1.p31t*><p><frfiif<p><41v><d1.v><1.fgsrc-ft*1.a>Jg3t"p>看电影<p>"div><dSv><irjpg-41.tp>MUffx<Hv><div><u1.><H>W<H><u1.><divc1.35s-'se<><u1.>,IiZ&nb，Pj11b5pjnb5p;5p;:Mhp;MXP;Mbsp;nbspjID<,ii><1171.)Bnb5pj8b5pj8nb¾pi8nbsp8nb5pi8nb5pinb5p311bsp2921e4ese218<i1.><1.i>tfMBbpiBb;ftn½Snbsp;:&nt>ip;&nbp;Knt½p;Knbsp;<11><1i>tftfcnb;nbp;1.nhs;nbp;:Mb5p;Mb5p;Mb5p;MHPM)< H>ftifJii1.优>3p;SbRFngp;Sngp;IAnbipjIinbsp;Knbsp;nbsp;Wft<H< 11>：H*1.1WHrt>Jp;1.nbjp;&nbjp;Ant>jp;:Ant>tp;8nb5p；Snbsp；8nb5p;2093.02.13<1.i>< 11>ftitft系&2Sp；Sbsp；&cb$p;&nMp;:MMP;Snbsp;Bnbsp;Bnbsp;XQ44X<1.i>V北册力2;&nt»4P;Ant4p；;RnbSP；MbSP；MbSP；Xtt<M><:i)或长ZrMw;卜今5p;&nb，p;Anb%p;11t>p;Mnbsp;Unb5p;Iinbsp;1B79422622<71i><u1.><d1.vc1.aJSso11er2><d1.v><1.rsrc-1.jga1.t-,><div>“iv>“pwb<*je'*><<iv><div，CNwx1.-jpca1.t-,><div><d1.v><ircs<<-1.-jp<1.t-*><d1.v><d1.v><1.rsrc'1.jga1.t-*,><div><d1.v><irw*i.jpe*aHw*><<1.iv><4iv><irs<x1.jpca1.t*,><div><div><1.rsc-1.1pr31t->,><.rd1.v><d1.v><dir><div><7div><bcdy><htn1.>(5) .留言板留言板。代码：<!CCCTYPthtfd<htrd1.ang-on-><head>CrCtJCbarset-eUTF-8'><rtnr->v1.M3<rtcontt-eM1.dtbJ©v1.c®.width.1.nXtia1.sca1.1.e"><r*t4http-<4uir*aX-IM-CcmpAtSb)*<8tfr7g<v>><tit1.e>Oxrent<tit1.e><sty1.c>rurin:0;padding:%bc%(height:IWpx;1Inc-height:1.epx;text*<a1.1.gn:C"gr;fontf5”:6p三;foot-fiIy：,i;1?"wrin:1即X“to;tX1.anM(P4ddi11c:2px;position:reUtiYc;top:2Cpx;Uft:Wp«width：571;height:276p«fcnt*s1.26:2Cp*;fot-fjdIy:"：;b<k<rw11d-co1.r:叼3;bc<dcrradius:2¾x2px;out1.ine:rex»box-th4dcw:5pIa3%-7p«”“汕；re3ire:none;butt*xp5iUc0:re1.ative;top：88；1.eft:4Wpx;,UHpc1.t1.c*:abso1.ute;top:»7耐；right:4Cpx;u1.11(2ntop:1.p;width：J峰町height:3Spx;Uh1.ght:38x;padding*1.eft:Sp;b<x<J<r-radius:1.¢pi；bockgrc<J11dco1.r:tie0D2;co1.or:ae<½W;foot-SSit：1.ist-sty1.e:none;border:Ipxdjscdtcc66e;disp1.ay:nona;>Iiaf1.oat:right;txtd«gt1.8：none;rwrgnri<ht:Spx；co1.or：tcee6;buttcn(t>ackgrcord-co1.or：rba(25S,2$,2"，65B2);bcrder:Ipxso1.id21190,22S,255)；padding:Iepx;"/width:1.»px;hei11t:Sepx;1.1.11