前端页面设计总结 .docx

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

1、信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据212班一 .设计思想班级网站课设是项很有趣、很仃挑战性的学习任务，它涉及到的知识点比较丰富，需耍我们综合应用自己的专业知识和技能“我认为款好的班级网站需要具备几个方面的特点，比如页面简洁、排版清晰、整洁高效、色彩搭配协调等等。在网站内容的策划方面，更需要符合班级主题、充满活力和贴近实际活动。当然，我们也可以尝试增加些创新元素，来让我们的班级网站更加突出。比如大幅度的图片或并视频介绍，还可以利用互动凸显班级的特色元素等等。总之，班级网站课设的目的是要让我们能够综合应用所学的知

2、识和技能，将其化为一个不同寻常的、有价值的成果。二 .各个网页设计分析1.网页的结构主要分为登录界面，网站首页，教师风采，班级部分人员信息，班级论坛，个人信息共六大板块。2.部分网页的具体实现方法I(1)网站苜页：主页设计主要以盒子的形式划分。页面上方的导航栏所对应的字符都设置了超链接href,副标移动到相应位置时会到达下一个页面。网站首页主要包括精彩期影，教师团队，班级成员，班级课表。精彩剪影这一部分使现了轮播图。首先在HTM1.页面中创建一个容器div,用于保存轮播图的内容。可以为其设置宽度、高度和定位样式,然后在该容器中，创建一个U1.列表，并添加Ii元素,在每个Ii元素中添加一张图片。

3、用JaVaSCriP1.编写轮播图的功能，比如设置轮播间隔时间、添加鼠标移入和移出轮插图时的操作等等。教师团队，班级成分这两部分实现/视频的插入。首先，在HTM1.网页中创建一个VidOo元素.然后，媪辑视频元亲的屈性，使其适应页面.最后，在VideC元素中添加源文件.班级课表这一部分实现了对tabic,tr,和td标签的使用.首先，在HTM1.网页中创建个表格元素。然后使用tabic,tr和td标签配置课表格了中的内容。可以设置rowspan和co1.span属性来解决某些单元格跨行或跨列。代码：HUe大数据212班i1.onMeuname=VieWpOrcon(ent=widh=devic

4、e-wid(h.initia1.-sca1.e=,VseriP1.sr=hnpscdn.siaticfi1.e.org.,jquery2.1.1.,jquery.min.jsM.bd(margin-bottom:2()px;background-co1.or:rgM204,86,204);1.sp.row(margin-top:IOpx;Jspz(font-size:I8px;J,foo1.er(margin-top:-10px;).ftcrpwidth:100%;height:1.(X)px;font-size:14px;co1.or:a1.iceb1.c:1.ine-height:98px

5、:tex1.-a1.ign:center:backgroundokrsi(ion:re1.ative：height:4(X)px;J.contentu1.Iist-Sty1.c-Iypc:none;J.ntcnu1.1.iwidth:600px:height:300px;position:abso1.ute;transition:Is：opacity:0;).contentu1.1.iimgwidth:9(X)px;height:5(Mpx:border-radius:5%;border:5pxso1.idWocO600:).conten1.o1.position:re1.ative:disp

6、1.ay:grid:gridem1.ateco1.umns:reea(5.75x);gridem1.aterows:auto;grid-gap:1.em;gap:Ienuf1.oat:right;magin(o:450x;Iisi-Siy1.e:none;(op:0;1.eft:0;J.contento1.1.i(width:25px;height:IOpx;font-size:I5px;1.ine-height:20px;f1.oat:1.eft:tcxt-a1.ign:center;border-radius:2cm;border:5pxso1.id#afVd9d:I.container(

7、background-co1.or:whitesmoke:Jnavc1.ass=*navbarnavbarTogg1.enavigaionutton岐尔Dcskt(班级网站班级网站imgs1.cy.jpgah=Widih=FOpxthcight=,60px;ahrcf=首页.him”首页教师风采班级论坛DaXi个人信息登录注册精彩剪影班级网站班级网站imgs精彩剪影4 .jpg,a1.t=1.i班级网站班级网站imgs精彩剪影5.jpgMa1.t=MMx/1.iwindw.on1.oad=funcion()varcon1.en1.=1.hs.dument.getE1.ernen1.sByC1.assNa11w(*con1.en)(0);varIi=conten,geE1.e11)entsByTagNiu)e(*1.i);functionfun(ij)(1.ii,sty1.e.oachy=1.;Ii(j