前端页面设计总结 .docx
信息工程学院课程设计报告（2021-2022学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结一 .设计思想设计一个班级网站。二 .各个网页设计分析1 .网页的结构主要分为登录界面，网站首页，班级活动展示，班级部分人员信息，班级论坛，课表查询共六大板块。2 .部分网页的具体实现方法：(1)网站首页主页设计主要以盒子的形式划分。背型图片也调整到对应大小，页面上方的导航栏所对应的字符都设置了超链接href,班级图标也通过链接刷新首页，鼠标移动到相应位置时会到达下一个页面，中间的图片之间设置了合适的间距并调整图片大小，并用js做成了轮播图，其中还用js做了一个的换肤效果，并且还加上来一个类似于点击文字、链接放大的效果。代码：<!DOCTYPEhtm1.><htm1.1.ang=*enz,><head><metaCharSet="UTF-8”><metaname="viewport"content=idth=device-width,initia1.-sca1.e=1.0"><tit1.e大数据212首页/tit1.e)<1.inkre1.=*sty1.esheet*href=*cssindex.css*IyPe="tex1.css”><scriptSrC="js/index.js*><script><head><body><divc1.ass=,skin*><!一页面皮肤一><inputtype=*buttonwva1.ue=*设为黄色OnCIiCk="co1.or('ye1.1.ow')>><inputtype=*button*OnC1.iCk="co1.or('red')"><inputtype=*button*OnCIiCk="co1.or('b1.ue')”><inputtype=*button,va1.ue=*设为红色va1.ue=*设为蓝色va1.ue=*设为绿色OnCIiCk="co1.or('#0OffOo')”><div><divc1.ass="header”><!一头部一><divc1.ass=*1.ogo*><ahref=*index.htm1.*tit1.e="大数据212"><imgSrC="images/IOgO2.jpg"><a><div><pCIaSS="by”>创造分析 手脑并用<p><divc1.ass=*nav*><!导航一><u1.><1i><ahref="index,him】"tit1.e="首页"首页<a><1.i><1.i><ahref="hdzs.htm1."IitIe="活动展示”>活动展示Ga><1.i>< 1i><ahref="ryxx.htm1."CIaSS="curr"tit1.e="人员信息”>人员信息<a><1.i>GiXahref="1.t.htm1."tit1.e="论坛”论坛GaX/H< 1.i><ahref="kbcx.htm1."tit1.e="课表查询”>课表查询<a><1.i>< 1.i><ahref="1.ogin.htm1."tit1.e="登录/注册”>登录/注册<a><1.i><u1.><div><div><divid=*max*><!-轮播图><divCIaSS="re”<u1.>< 1.i><imgsrc=*images2.jpgz,a1.t=*,><1.i>< 1.i><imgsrc=*images3.jpgz,a1.t=*z,><1.i>< 1i><imgsrc=*images4.jpg,a1.t=*><1.i>< 1.i><imgSrC="images/5.jpg“a1.t=*><1.i><1.i><imgSrC="images/6.jpg"a1.t=wz,><1.i><u1.><o1.><1.i><1.i><1.i><1.i><1.i><1.i><o1.><div><div><divCIaSS="content”）<divCIaSS="onc”><imgsrc=*imagesa1.jpg*a1.t="路易艾黎”><divc1.ass=*text*><pC1.aSS="p1."><ahref=*1987年12月27口，路易艾黎在北京逝世，享年90岁。被称为“中国的十大国际友人"°<p><div><hr><div><c1.ivc1.ass=*two*><imgsrc=wimages/1.ogo2.jpg"aI="兰州城市学院培黎校区”><divc1.ass=*text,><pC1.aSS="p1."><ahref=*https,图书馆藏书18万册，固定资产总额6500万元。2008年以后主要新建设工业实训中心和4号学生公寓等教学及辅助设施3.5万平方米；项目总扩建面积13.4万平方米。现有学院：美术学院、外国语学院、培黎石油工程学院（培黎职业技术学院）、社会管理学院、培黎工程技术学院<p><div><hr><div><divC1.aSS="three”<imgsrc=*imageshk.jpg*a1.t="乔治何克”><divC1.ass=*textwXpc1.ass=*p1.*><ahref=*https<hr><div><t1.ivC1.aSS="four”><imgsrc=*imagespic.jpg"a1.t="兰州城市学院培黎校区*><divc1.ass=*text*><pCIaSS="p1."><ahref="https:WWw.W<div><div><body><htm1.>（2）课表查询创建一个课程表的表格，并设置一些样式。在这个课程表中，每个单元格代表一个时间段，并按星期几进行排列。第一行列出了星期儿的标题。接下来的行表示不同的时间段。这个HTM1.代码使用了类名“ppp”和一些样式规则来控制课程表的位置和外观。具体来说，它将课程表的位置设置为相对于网页的绝对位置（top:100Px;1.eft:300px;）,并设置了背景颜色为antiquewhite<>这段代码还包含一个标题标签（CaPtiOn）用于显示“我的课表”字样。代码：<trheight="60"a1.ign=*center*><tdWidth="30">3<td><tdWidth="120"rowspan="2"bgco1.or="ccffOO”>概率论与数理统计博文楼401<td><tdWid1.h="120"rowspan=*2z,><td><tdwidth=*120*rowspan=*2*><td><tdWidth="120"r。WSPan="2"bgc。Ior="87ceff”>大学英语B4博文楼302<td><tdWidth="120"rowspan="2"bgCoIOr="99CCff毛泽东思想和中国特色社会主义理论体系概论博文楼1.03<td><tdwidth=*120*rowspan=w2*bgco1.or=z,ccffOOzr>概率论与数理统计博文楼107<td><tdWid1.h="120"rowspan=*2z，X/td><tr><trheight="60"a1.ign=wcenterw><tdWidth="30">4<td><tr><trheight="60"a1.ign=wcenterw><tdwidth=*30*>5<td><tdWidth="120"rowspan=*2*></td><tdWidth="120"rowspan=*2*bgco1or=*ffcc99*>虚拟现实脚本设计博雅楼B502<td><tdWidth="120"r。WSPan="4"bgco1.or="33cc99”>融媒体内容设计求实楼206<td><tdWidIh="120"rowspan=*2*X/td><tdwidth=*120*rowspan="4"bgco1.or="6699ff”>wcb前端开发技术求实楼409</td><tdwidth=*120*rowspan=*2*><td><tdWidIh="120"rowspan=*2z,><td><tr><trheigh1.="60"a1.ign=wcenter,><tdWidth="30">6<td><tr><trheigh1.="60"a1.ign=wcenterz,
