前端页面设计总结课程设计.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-
