前端页面设计总结 .docx

上传人:王** 文档编号:1587039 上传时间:2024-09-20 格式:DOCX 页数:24 大小:37.81KB
下载 相关 举报
前端页面设计总结 .docx_第1页
第1页 / 共24页
前端页面设计总结 .docx_第2页
第2页 / 共24页
前端页面设计总结 .docx_第3页
第3页 / 共24页
前端页面设计总结 .docx_第4页
第4页 / 共24页
前端页面设计总结 .docx_第5页
第5页 / 共24页
前端页面设计总结 .docx_第6页
第6页 / 共24页
前端页面设计总结 .docx_第7页
第7页 / 共24页
前端页面设计总结 .docx_第8页
第8页 / 共24页
前端页面设计总结 .docx_第9页
第9页 / 共24页
前端页面设计总结 .docx_第10页
第10页 / 共24页
亲,该文档总共24页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Java

copyright@ 2008-2023 yzwku网站版权所有

经营许可证编号:宁ICP备2022001189号-2

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!