UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

拓展学习视频资源 HTML5开发

发布时间:2020-10-16 15:49   发布人:袁安翠   浏览次数:1632

【 拓展学习任务视频及效果图 】

项目名

任务

视频文件

案例效果

HTML5的页面元素

任务1 HTML5 的基本语法

1、HTML5的基本语法1qvod.jpg

2、HTML5的基本语法2qvod.jpg


image.png


任务2 HTML5页面元素及属性

1、页面布局1qvod.jpg

2、页面布局2qvod.jpg

3、导航栏的制作qvod.jpg

4、Artical文本块qvod.jpg

5、分组元素qvod.jpg

6、其他元素及属性qvod.jpg

image.png

任务3 HTML5的表单设计

1、表单自动完成功能1qvod.jpg

2、表单自动完成功能2qvod.jpg

3、表单input元素新属性1qvod.jpg

4、表单input元素新属性2qvod.jpg

5、表单input元素新属性3qvod.jpg

6、表单input元素新属性4qvod.jpg

image.png

CSS3技术

任务1 CSS3基本语法

1、CSS3定义服务器字体1qvod.jpg

2、CSS3定义服务器字体2qvod.jpg

3、CSS3文本外观属性1qvod.jpg

4、CSS3文本外观属性2qvod.jpg

5、CSS3属性选择器1qvod.jpg

6、CSS3属性选择器2qvod.jpg

7、CSS3关系与伪对象选择器1qvod.jpg

8、CSS3关系与伪对象选择器2qvod.jpg

9、CSS3结构伪类选择器-child系列1qvod.jpg

10、CSS3结构伪类选择器-child系列2qvod.jpg

11、CSS3结构伪类选择器-tyep系列1qvod.jpg

12、CSS3结构伪类选择器-tyep系列2qvod.jpg

13、CSS3 UI元素状态伪类选择器qvod.jpg

14、CSS3案例表格的隔行变色qvod.jpg

image.png

任务2 CSS3高级应用

1、图片边框属性1qvod.jpg

2、图片边框属性2qvod.jpg

3、图片边框属性3qvod.jpg

4、圆角边框1qvod.jpg

5、圆角边框2qvod.jpg

6、盒子阴影属性1qvod.jpg

7、盒子阴影属性2qvod.jpg

8、盒子倒影qvod.jpg

9、不透明度设置qvod.jpg

10、背景图像大小的设置qvod.jpg

11、背景图像定位与裁切qvod.jpg

12、多重背景效果qvod.jpg

13、线性渐变1qvod.jpg

14、线性渐变2qvod.jpg

15、径向渐变qvod.jpg

16、重复渐变1qvod.jpg

17、重复渐变2qvod.jpg

image.png

HTML5 

    canvas

任务1 canvas基本语法

1、canvas基本语法1qvod.jpg

2、Canvas基本语法2qvod.jpg


image.png


任务2 canvas坐标与颜色的定义

1、不同颜色线宽的平行线的绘制qvod.jpg

2、镂空正方形的绘制1qvod.jpg

3、镂空正方形的绘制2qvod.jpg


image.png


任务3 canvas绘制图形、图像与文字

1、圆形的绘制qvod.jpg

2、矩形的绘制qvod.jpg

3、画布中心绘制文字1qvod.jpg

4、画布中心绘制文字2qvod.jpg

5、画布中心绘制文字3qvod.jpg

6、画布中心绘制文字4qvod.jpg

7、图片的绘制qvod.jpg

8、帧动画的绘制1qvod.jpg

9、帧动画的绘制2qvod.jpg

10、帧动画的绘制3qvod.jpg

image.png

文件与拖放

任务1 拖放概述

1、拖放概述1qvod.jpg

2、拖放概述2qvod.jpg

3、拖放概述3qvod.jpg

image.png


任务2 拖放元素

1、拖放元素1qvod.jpg

2、拖放元素2qvod.jpg

3、拖放元素3qvod.jpg


image.png


任务3 文件

1、本地文件拖放1qvod.jpg

2、本地文件拖放2qvod.jpg

3、本地文件拖放3qvod.jpg

image.png


本地存储

任务1 Web Storage

1、Web Storage存取实现1qvod.jpg

2、Web Storage存取实现2qvod.jpg

3、Web Storage不同存储区别qvod.jpg

4、Web Storage永久保存案例1qvod.jpg

5、Web Storage永久保存案例2qvod.jpg

image.png

任务2 Web SQL数据库

1、数据库的创建1qvod.jpg

2、数据库的创建2qvod.jpg

3、数据库中表的创建qvod.jpg

4、表中数据的增删改查1qvod.jpg

5、表中数据的增删改查2qvod.jpg

image.png