青春有我

掌握基本的HTML5、CSS3及JavaScript

具备一定的针对具体市场需求的前端开发能力

操作系统 Window 10+

文本编辑器 Vs Code

谷歌浏览器 Chrome

命名规范、结构合理

结构、样式、逻辑三分离

初始化样式、主样式单独创建

说明：两个h5文件：引导文件index.html、主页main.html

<div>

弹性盒子 flex

BOM对象 history

DOM对象、事件侦听

帧动画 keyframes及动画事件监听

<header>

背景图片 background-image

伪类 :hover

过渡动画 transition

<nav> <a>

弹性盒子 flex 或 网格 grid 或 浮动 float

阿里字体图标 iconfont

帧动画 keyframes

<table>

阿里字体图标 iconfont

伪元素 ::before ::after

<article>

分栏 Colums

伪元素首字 ::first-letter

<figure>

弹性盒子 flex 或 网格 grid

伪类 :hover

变换缩放 transform

<form> <input> <textarea> <label> <button>

伪类 :hover

过渡动画 transition

伪类 :focus

定位relative、absolute

功能

布局

设计

<footer> <img>

固定定位 fixed

弹性盒子 flex

个人信息：学号、姓名

独立完成，禁止抄袭

点击下载 实验报告；提交时更新为自己的实际信息；完成后，导出为pdf，以学号+姓名的格式命名，如23001069张树彬.pdf

报告中要体现关键代码和效果截图；代码格式同正文区分开；截图统一宽度，高度随内容；更多格式请参考格式美化

完整项目和实验报告打包压缩后，以学号+姓名的格式命名，如23001069张树彬.rar，提交到学习通；压缩类型不限

抄袭、未按要求开发、提交视为无效作业，不得分