前端页面设计总结

上传人：万*** IP属地：贵州上传时间：2024-07-04 格式：DOCX 页数：27 大小：51.96KB 积分：15 举报 版权申诉

已阅读5页，还剩22页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据212班

设计思想设计一个班级网站。各个网页设计分析1.网页的结构主要分为登录界面，网站首页，班级活动展示，班级部分人员信息，班级论坛，个人信息共六大板块。2.部分网页的具体实现方法：（1）网站首页：主页设计主要以盒子的形式划分。背景图片也调整到对应大小，页面上方的导航栏所对应的字符都设置了超链接href，班级图标也通过链接刷新首页，鼠标移动到相应位置时会到达下一个页面，中间的图片之间设置了合适的间距并调整图片大小，并用js做成了轮播图，其中还用js做了一个的换肤效果，并且还加上来一个类似于点击文字、链接放大的效果，以及一个扫描二维码动画，扫码可进群。代码：<!doctypehtml><html><head>

<metacharset="utf-8">

<title>班级网页设计</title>

<linkrel="stylesheet"href="css.css">

<linkrel="stylesheet"href="base.css">

<scriptsrc="JQuery.min.js"></script>

<scriptsrc="animate.js"></script>

<scriptsrc="js.js"></script></head><body>

<!--

<divid="one"></div>-->

<divid="one1">

<divclass="one_1">

<imgsrc="校徽.jpg"alt="班徽">

</div>

<divclass="one_2">

</div>

<divclass="one_3">

<p>乘风破浪气宇轩昂</p>

<p>竭尽全力超越自我</p>

</div>

</header>

<divid="two">

<divclass="two1">

<divclass="two1_div1"></div>

<divclass="two1_div2">

<p>班级是我们大学四年都离不开的词汇，它会在你困难的时候帮忙你，会在你难过的时候陪伴你，

会在你沮丧时鼓励你，而这些都建立在我们每个人用心去经营的基础上，所以期望我们共同努力创立一个可爱、

团结、互助的班团体，多年之后回首不会有遗憾，不会有自我不去想念的人。加油！大数据212班最棒！</p>

</div>

<divclass="two2">

<aclass="prev"href="javascript:;"><</a>

<!--

//左侧按钮-->

<aclass="next"href="javascript:;">></a>

<olclass="promo-nav">

<!--

<liclass="select"></li>

</ol>

<ul>

<!--

</ul>

</div>

<divclass="two3">

<ul>

<li><ahref="班级成员信息.html">班级成员信息</a></li>

<li><ahref="留言板.html">班级留言板</a></li>

</ul>

<div>

<p>班级卫生公示栏班级卫生管理方案

1.每大周收假的晚上，由生活委员排出本周值日表（教室和清洁区）.

2.每天由生活委员督促打扫班级卫生。中午12点检查卫生，学生检查，老师随机抽查，抽查到不合格的将在黑板上公布批评。

3.不扫的将按0分计算，在黑板通报批评，并要求生活委员督促清扫。

4.连续排倒数第一名3次的班级将进行班级大扫除一次，由生活委员组织安排。

5.卫生相当糟糕的通知生活委员安排值日生重新打扫。

6.每天中午由生活委员带队打饭，打好了全部回教室吃饭，生活委员带队吃饭，统一朝右行，不能大跑，去慢了的直接插入本班的队伍中打饭，（跟在本班最后一个）不允许乱倒饭，在校园内外乱放饭碗。

7.建议扫地要洒水，避免吃饭时间在教室内跳，以免起灰尘影响吃饭的卫生。

8.教育学生学会保护别人的劳动成果，不随手丢垃圾，不随地吐痰。如有违纪，不管哪位老师看见都可以在黑板公布。当然，这些好习惯要慢慢才能养成，只要形成一个良好的风气，环境塑造人，

行为习惯不好的孩子应该会有所改善。

9.尤其要强调的一个内容就是不得往后窗丢垃圾，被逮到，本班教室将按零分计算，（学生的排斥和反感情绪应该会让一个人无地自容，如此严重的打分只是为了起到学生教育学生的目的）

（一个人的想法总会出现偏差甚至过激让人反感，以上都只是我个人所想，我还不知道合不合理，趁大家都在，就此机会提出来，请大家帮忙我指出不足和提出意见以便做好修改，

让这个方案变得更合情合理，另外我最想要说明的一个问题就是：班级卫生检查宗旨在于督促学生搞好卫生，绝对不能惩罚老师）

卫生检查标准：

一屋不扫何以扫天下

(总共按照100分计算，清洁和教室各占50，每次去掉一个最高分和最低分，最后取两项的平均分为最终成绩)

只要我们每个人都讲卫生，我们的校园一定会更加美好。

</p>

</div>

<divid="floor">

<divid="three"class="w">

<h2>班级风采展示</h2>

<divclass="three1">

<divclass="three2">

</div>

<divid="four"class="w">

<h2>班级课程表</h2>

<divclass="four1">

<div>

</div>

<div>

<!--

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>数据仓库原理及应用</td>

<td>数据采集技术</td>

</tr>

<tr>

<td>马克思主义基本概论</td>

<td>数据仓库原理及应用</td>

<td>概率论与数理统计</td>

</tr>

<tr>

<td>计算机组成原理</td>

</tr>

<tr>

<td>人机交互与界面设计</td>

</tr>

</tbody>

</table>

</div>

</div>

<divid="footer"class="w">

<divclass="father1">

<divclass="son1"></div>

<divclass="son2">

<hr>

<p>为了丰富我院同学们的课余生活，

进一步推动体育活动开展，带动体育活动的风气，

增强班级凝聚力，激发广大学生热爱校园和热爱体育、

努力成才的热情；展示出新时代大学生的蓬勃朝气和竞技热情

；加强同学们户外锻炼的意识，增进我院各年级各专业之间的交流；本着“友谊第一

，比赛第二”的态度，现策划举办我院2023年“一起向未来”夏季篮球赛。

</p>

</div>

<divclass="father2">

<divclass="son3"></div>

<divclass="son4">

<hr>

<p>朗诵的意义和魅力：通过朗诵，读者可以陶冶性情，开阔胸怀，文明言行，增强理解；可以有效地培养对语言词汇细致入微的体味能力，以及确立口语表述最佳形式的自我鉴别能力。

坚持朗诵可以加深对文章的理解。书读百遍，其义自见。好文章经过朗读，读出其中的韵味，领悟深层含义。有感情地朗读，，可以激发大脑的想象力。

</p>

</div>

<divclass="father3">

<divclass="son5"></div>

<divclass="son6">

<hr>

<p>音乐人一定是通过音响效果的，所以第一目的永远都是那最终完美的音响效果。至于这音响是用来表达诗和远方还是左手右手慢动作还是你爱他他爱他但他死了我他妈到底是个谁，那就因人而异了，毕竟每个人口味不同

音响效果的产生就有学问了，一个完整的音乐作品（多数情况下），是会包含数个八度的音域随着时间进行出来的。

你可以理解为。

</p>

</div>

</section>

<divclass="fixedtool">

<ul>

<liclass="current">班级风采展示</li>

<li>班级课程表</li>

</ul>

</div>

<divid="foot"class="w">

<divclass="ma1"></div>

<divclass="ma2"></div>

<h4class="QQ">QQ群聊</h4>

<h4class="wei">微信群聊</h4>

</div>

</footer>

</div></body></html>（3）班级部分人员信息：班级部分人员信息我使用了html中的表单元素进行制作，加上a链接就能完成效果，同时设置了选中框。代码：<!doctypehtml><html><head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1">

<linkrel="stylesheet"href="../bootstrap/css/bootstrap.min.css">

<!--[ifltIE9]>

<scriptsrc="/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

<scriptsrc="/npm/respond.js@1.4.2/dest/respond.min.js"></script>

<![endif]-->

<linkrel="stylesheet"href="../css/index.css">

<metacharset="utf-8">

<title>无标题文档</title>

<style>

.return{

width:100px;

height:100px;

float:right;

background-color:aquamarine;

}

body{

font-size:18px;

font-family:"华文楷体";

height:100vh;

background-size:cover;

flex:1;

display:flex;

justify-content:center;

align-items:center;

background-image:linear-gradient(#31C2910%,#fbc2eb100%);

}

padding:0;

margin:0;

}

.father{

width:1000px;

height:700px;

margin:50pxauto;

}

.fatherh2{

margin:0auto;

width:200px;

height:50px;

font-family:"楷体";

font-size:40px;

line-height:50px;

text-align:center;

}

.father.son{

margin-top:20px;

height:630px;

width:100%;

}

.father.son.son1{

height:95%;

width:37.5%;

border:3pxsolidpink;

box-shadow:5px2px35px-7px#1EDCBD;

float:left;

margin-top:25px;

}

.father.son.son1h3{

margin:0auto;

width:200px;

height:25px;

font-family:"楷体";

font-size:23px;

line-height:25px;

text-align:center;

margin-top:10px;

}

.father.son.son1ul{

height:570px;

width:99%;

margin-top:20px;

}

.father.son.son2{

height:95%;

width:57.5%;

float:right;

border:3pxsolidpink;

box-shadow:5px2px35px-7px#2AACAA;

margin-top:25px;

}

.father.son.son2h3{

margin:0auto;

width:200px;

height:25px;

font-size:23px;

line-height:25px;

text-align:center;

}

ulli{

width:100%;

height:30px;

font-size:14px;

text-align:center;

line-height:30px;

list-style:none;

}

.a1,

.a2,

.a3,

.a4,

.a5,

.a6,

.a7,

.a8,

.a9,

.a10{

display:none;

}

img{

width:350px;

margin-left:10px;

height:190px;

}

padding-top:10px;

font-size:15px;

margin-left:175px;

color:red;

}

.b1:hover.a1{

display:block;

height:230px;

width:270px;

}

.b2:hover.a2{

display:block;

height:230px;

width:270px;

}

.b3:hover.a3{

display:block;

height:230px;

width:270px;

}

.b4:hover.a4{

display:block;

height:230px;

width:270px;

}

.b5:hover.a5{

display:block;

height:230px;

width:270px;

}

.b6:hover.a6{

display:block;

height:230px;

width:270px;

}

.b7:hover.a7{

display:block;

height:230px;

width:270px;

}

.b8:hover.a8{

display:block;

height:230px;

width:270px;

}

.b9:hover.a9{

display:block;

height:230px;

width:270px;

}

.b10:hover.a10{

display:block;

height:230px;

width:270px;

}

.b1:hoverli{

color:red;

}

.b2:hoverli{

color:red;

}

.b3:hoverli{

color:red;

}

.b4:hoverli{

color:red;

}

.b5:hoverli{

color:red;

}

.b6:hoverli{

color:red;

}

.b7:hoverli{

color:red;

}

.b8:hoverli{

color:red;

}

.b9:hoverli{

color:red;

}

.b10:hoverli{

color:red;

}

.father.son.son2h3{

margin:0auto;

width:200px;

height:25px;

font-size:23px;

line-height:25px;

text-align:center;

margin-top:10px;

}

.son3{

margin:0auto;

margin-top:20px;

width:99%;

height:540px;

}

.son3div{

margin-top:15px;

margin-left:15px;

height:250px;

width:250px;

float:left;

}

.son3divimg{

width:100%;

height:80%;

background-size:cover;

transition:all3s;

}

.son3divh2{

width:100%;

height:20%;

font-size:15px;

color:red;

font-family:"楷体";

}

.son3img:hover{

transform:scale(1.5,1.5)rotate(15deg);

}

</style></head><body>

<divclass="container">

<divclass="row">

<divclass="father">

<divclass="son">

<divclass="son1">

<ul>

<divclass="b1">

<divclass="a1"><imgsrc="1.jpg"alt="">

</div>

<divclass="b2">

<divclass="a2"><imgsrc="20.jpg"alt="">

</div>

<divclass="b3">

<divclass="a3"><imgsrc="22.jpg"alt="">

</div>

<divclass="b4">

<divclass="a4"><imgsrc="23.jpg"alt="">

</div>

<divclass="b5">

<divclass="a5"><imgsrc="24.jpg"alt="">

</div>

<divclass="b6">

<divclass="a6"><imgsrc="25.jpg"alt="">

</div>

<divclass="b7">

<divclass="a7"><imgsrc="26.jpg"alt="">

</div>

<divclass="b8">

<divclass="a8"><imgsrc="27.jpg"alt="">

</div>

<divclass="b9">

<divclass="a9"><imgsrc="26.jpg"alt="">

</div>

<divclass="b10">

<divclass="a10"><imgsrc="27.jpg"alt="">

</div>

</ul>

</div>

<divclass="son2">

<divclass="son3">

</div>

</div>

</div>

</div>

<!--

<divclass="return"><ahref="">返回主页</a></div>--></body></html>（4）个人信息展示个人信息展示主要展示的内容是照片，照片翻转。代码：<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title>

<style>*{

padding:0;

margin:0;}

#return{

float:right;

display:inline-block;

width:100px;

height:15px;

background:red;

}body{

padding:0;

margin:0;

height:100vh;

display:flex;

justify-content:center;

background-image:linear-gradient(#a18cd10%,#fbc2eb100%);

background-size:cover;

flex:1;

align-items:center;

}.father{

width:1000px;

height:650px;

margin:100pxauto;

position:relative;}

.father.return{

position:absolute;

top:-40px;

right:-270px;

width:100px;

height:30px;

}.fatherh2{

margin:0auto;

color:beige;/*

border:1pxsolidpink;*/

width:200px;

height:80px;

font-size:40px;

line-height:80px;

text-align:center;}

.father.son{

width:1000px;

height:570px;

border:3pxdashedpink;

box-shadow:5px2px35px-7px#DB8A12;

position:relative;

}

.son.hidden1{

top:50px;

right:333px;

width:333px;

height:520px;

position:absolute;/*

border:1pxsolidred;*//*

display:none;*/

}

.son.hidden2{

top:50px;

right:0px;

width:333px;

height:520px;

position:absolute;/*

border:1pxdashedgreen;*//*

display:none;s*/

}

.father.sonul{

width:100%;

height:50px;/*

border:1pxsolidred;*/

}

.father.sonulli:hover{

background-color:beige;

}

.father.son.sonerulli{

background-color:transparent;

}/*

.sonulli:hover.soner2{

display:block;

}*/

.father.sonulli{

float:left;

list-style:none;

height:50px;

width:333px;

line-height:50px;

font-size:20px;

text-align:center;

color:#1FEE8E;

}

.father.son.soner{

height:520px;

width:100%;/*

border:1pxsolidred;*/

}

.father.son.sonerul{

width:100%;

height:100%;

}

.father.son.sonerulli{

margin-top:2px;

width:100%;

height:54.4px;

display:inline;

list-style:square;

font-size:15px;

line-height:54.4px;

text-align:left;

padding-left:50px;

color:#3A1DD9;

}

.father.son.soner.soner2{

width:100%;

height:100%;

display:none;

}

.father.son.soner.soner2div{

height:240px;

width:200px;

float:left;

margin-left:40px;

margin-top:15px;

}

.father.son.soner.soner2divimg{

width:100%;

height:100%;

background-size:cover;

}

.hidden1img{

margin:0auto;

margin-top:13px;

float:left;

width:99%;

height:30%;

transition:all3s;

border-radius:50%;

}

.hidden1img:hover{

transform:scale(1.5,1.5)rotate(30deg);

opacity:0.8;

}

.hidden1img:nth-child(2):hover{

transform:scale(1.5,1.5)rotate(-30deg);

opacity:0.1;

}

.hidden1img:nth-child(3):hover{/*

transform-origin:30%30%;*/

transform:scale(1.25,1.25)rotate(-5deg);

opacity:0.5;

//透明度*/

}

.hidden2div{

margin-top:20px;

width:100%;

height:30%;

}

.hidden2divimg{

margin-top:20px;

margin-left:20px;

float:left;

width:70%;

height:100px;

transition:all3s;

}

.hidden2divimg:hover{

transform:scale(2,2);

opacity:0.5;

}

.hidden2divp{

margin-top:70px;

width:20%;

float:right;

color:#0CDCF5;

}

</style></head><body>

<divclass="father"><!--

<divclass="son">

<divclass="hidden1">

<imgsrc="照片1.jpg"alt="">

<imgsrc="照片2.jpg"alt="">

<imgsrc="照片3.jpg"alt="">

</div>

<divclass="hidden2">

</div>

<ul>

</ul>

<divclass="soner">

<ul>

<li>就读院系 : 信息工程学院</li>

</ul>

<divclass="soner2">

</div>

</div></body></html>（5）.留言板留言板。代码：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Document</title>

<style>

margin:0;

padding:0;

}

body{

background-image:linear-gradient(#FFB7DD0%,#FFC8B4100%);

height:100vh;

}

h2{

width:500px;

height:100px;

line-height:100px;

text-align:center;

font-size:60px;

font-family:"楷体";

margin:10pxauto;

}

textarea{

padding:20px;

position:relative;

top:20px;

left:30px;

width:570px;

height:276px;

font-siz

人人文库> 全部分类> 教育资料 > 毕业论文

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

前端页面设计总结

文档简介

温馨提示

最新文档

评论

前端页面设计总结

文档简介

温馨提示

最新文档

评论

相关文档