一路有你
2023-12-02- 实验题目
- .注册和登录
- .参照下图，完成个人网站注册和登录的设计与开发
- .单击登录Login，切换到登录Login界面；单击注册Register，切换到注册Register界面
- .表单输入框类型分别是text、password和email；获取焦点且值有效时，提示图标icon从中间移动到右侧
- .单击确认按钮enter，表单数据以get方式被提交到百度
- .登录界面下方的QQ、WeChat和Cell，鼠标悬停时，颜色、大小改变以提示用户
- .带下划线为超链接，鼠标悬停时，颜色改变以提示用户
- .图标icon是下载的阿里字体图标样式，本地使用
- .顶部logo固定定位在页面右上角；底部版权信息固定定位在页面底部、水平居中
- .底部请使用个人信息：头像、学号、姓名
-
- 实验目的
-
掌握基本的HTML5、CSS3及JavaScript具备一定的针对具体市场需求的前端开发能力
- 实验环境
-
操作系统 Window 10+文本编辑器 Vs Code谷歌浏览器 Chrome
- 评分标准
- 项目结构
-
命名规范、结构合理结构、样式、逻辑三分离初始化样式、主样式单独创建
- 页面
-
弹性盒子 flex背景图片 background-image
- 顶部
-
<a> <h1>固定定位 fixed
- 注册
-
<h2> <form> <input> <textarea> <label> <button> <a>伪类 :hover :focus :valid定位 relative、absolute过渡动画 transition阿里字体图标 iconfont变换 transformDOM对象、事件侦听
- 登录
-
<h2> <form> <input> <textarea> <label> <button> <a>伪类 :hover :focus :valid定位 relative、absolute过渡动画 transition阿里字体图标 iconfont变换 transformDOM对象、事件侦听
- 底部
-
<footer> <img>固定定位 fixed弹性盒子 flex
- 整体效果
-
功能布局设计
- 实验要求
-
独立完成，禁止抄袭点击下载 实验报告；提交时更新为自己的实际信息；完成后，导出为pdf，以学号+姓名的格式命名，如23001069张树彬.pdf报告中要体现关键代码和效果截图；代码格式同正文区分开；截图统一宽度，高度随内容；更多格式请参考格式美化完整项目和实验报告打包压缩后，以学号+姓名的格式命名，如23001069张树彬.rar，提交到学习通；压缩类型不限抄袭、未按要求开发、提交视为无效作业，不得分