# UI-assignment
**Repository Path**: weidows-projects/UI-assignment
## Basic Information
- **Project Name**: UI-assignment
- **Description**: UI课设,GitHub仓库: https://github.com/Weidows-projects/UI-assignment
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://weidows-projects.github.io/UI-assignment/src/main/webapp
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-10
- **Last Updated**: 2023-04-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 如何使用
通过 Maven 构建的 webapp 项目
通过 IDEA/Eclipse 打开可直接通过 tomcat 编译部署
使用到一些框架和库: Bootstrap,JQuery,APlayer

# 标准
-
* 级计算机科学与技术专业《互联网前端 UI》课程设计要求
***
- [x] 1、文本的内容
(1)段落
(2)加粗、倾斜
(3)span 标签设置文本颜色、字体、字号
(4)格式化输出一首诗
- [x] 2、列表的内容
(1)有序列表
(2)无序列表
(3)标题标签的应用
- [x] 3、图片的应用
(1)显示图片及设置大小。图片名称要支持中文。
(2)图片作为页面背景
(3)图片超链接
(4)图片滚动效果(可有可无)
- [x] 4、超链接
(1)外部网页链接,弹出一个新窗口。例如:链接到百度、新浪、农大官网。
(2)本网站内部页面链接,例如:链接到本网站的其它页面。
(3)下载压缩包。压缩包名称可以支持中文
- [x] 5、锚点链接
(1)返回顶部
(2)调到底部
(3)调到中间
- [x] 6、表格的应用
(1)添加文本内容
(2)行、列合并单元格
(3)设置单元格的对齐方式
- [x] 7、带校验功能的注册页面,(P57-59)并且模拟注册成功。
(1)设置 action 属性为 get
用 户 名: 获取焦点和失去焦点事件
密 码: 获取焦点和失去焦点事件
密码确认: 获取焦点和失去焦点事件
邮 箱:
提交 重置
- [x] 8、背景音乐,例如:P119-122。
(1)可以选择"停止"、"播放"、"下一首"、"上一首"切歌等功能。
(2)可以选择循环播放和非循环播放。
注意:音频也不要过大,mp3 歌曲即可
- [x] 9、HTML5 页面小视频的播放。P324-332。
注意:避免项目过大,视频文件不要太大,最多播放 1 分钟。
- [x] 10、导航栏,本网页页面的导航链接
(1)表格无边框线
- [x] 11、CSS 样式的应用。
(1)引入外部的 CSS 文件。
(2)标签名选择器、类选择器和 ID 选择器都要用到
(3)伪元素选择器 L V H A
(4)CSS 超链接。P95-96。
(5)关联选择器、组合选择器(可有可无)
- [x] 12、CSS+DIV 进行主页面(index.html)布局
主页面可以使用框架进行布局
- [x] 13、JavaScript 的应用
(1)引入外部的 js 文件
(2)在页面的某一个 div 区域内显示电子时钟,例如:P17-19。
(3)在页面的某一个 div 区域内显示电子日历,例如:P27-30。
- [x] 14、带校验功能的问卷调查,(P73-78)并且模拟提交成功。
(1)单选按钮
(2)复选框
(3)单选、多选下拉列表。P237
- [x] 15、包含一个可以玩耍拼图页面游戏,例如:P105-110。 或 贪吃蛇小游戏,P185-207。
游戏不限拼图或贪吃蛇,只要是 JavaScript 的页面小游戏即可,
- [x] 16、DOM 操作节点
(1)在无序列表末尾追加子节点
(2)在无序列表指定节点前插入子节点
(3)鼠标双击无序列表某一节点,删除该节点
(4)“按钮”绑定克隆某一节点操作(可有可无)
- [x] 17、弹出新窗口案例
本功能仅限 IE 浏览器
- [x] 18、图片的随机移动案例
- [x] 19、全选/全不选/反选 的前台效果
- [x] 20、列表项的左右选择案例
- [x] 21、省市联动案例
- [x] 22、图片轮播效果
某个页面需有图片轮播的功能
- [x] 23、页脚内容
(1)Copyright
(2)友情链接
(3)联系方式
- [x] 24、使用 onlond()事件。
(1)在 body 标签上加载 onload 事件,alert()方法弹出课设小组所有成员班级姓名。
例如:alert("3 班张三 & 4 班李四");
- [x] 25、系统发布与访问
(1)制作的网站发布到 Tomcat 服务器上,所有功能需要能够正常访问
(2)访问操作说明文档,docx 或 txt 文档
便于评判设计作品,文档中要简单说明页面操作过程,例如,先点击 xx 链接,再点击 xxx。。。。
还要有访问的网址链接。例如:http://localhost:8080/项目名/主页面.html
“项目名”和“主页面”不要使用中文
还要说明使用哪种浏览器进行访问,比如 IE、Chrome、Firefox。不支持苹果浏览器 Safari 。
- [x] 26、作品提交形式
(1)最终提交的系统为:发布到 Tomcat 服务器上的项目文件夹压缩包
(2)为避免遗漏提交的作品,以班级为单位提交,不接受个人发送的文件
- [x] 27、附加分
掌握了和本课程相关的更多的深入知识,比如 Ajax、JQuery,框架结构 Sping、Struct2、SpingMVC、Mybatis
也可以应用到本设计中,会有 5 分的加分。
- [x] 28、个人留存作品
课设作品评判会在暑假期间,且评判时间会很长。
在评阅作品时,为防止大家拷贝错误版本内容给班长,或相关内容出错打不开,我会二次索要作品。
需要大家在本地计算机留存自己提交的作品。
```
-————————————————————————
|注意: |
| (1)雷同者不及格。 |
| (2)稍加修改现有网站的不及格。 |
| (3)只有一个注册页面、或游戏页面的不及格。|
| (4)提交往届作品的,不及格。 |
|-----------------------------------------------|
|强调: |
| (1)最多2个同学一组完成课设。 |
| (2)网页涵盖所要求知识点即可,不必刻意 |
| 追求完美。但也不要太不像话,一团乱麻。|
| (3)课设作品由班长收齐,2021年6月18日前, |
| 即16周周五,以班级为单位拷贝给我, |
| 过期按旷考处理。 |
-————————————————————————
```