web前端技术-掌握前端核心,从静态到交互实战
web前端技术-掌握前端核心,从静态到交互实战

web前端技术-掌握前端核心,从静态到交互实战

普通游客 无权查看资源
有效期: 永久有效
更新日期: 2025-07-14

赞助会员 · 全站资源免费享

一次付费,终身受益,超5000位用户的选择

本课程系统讲解Web前端核心技术,涵盖HTML5、CSS3及页面交互与动画。课程从网页基础结构入手,逐步深入样式美化、布局定位、表单交互及动态效果实现,最终通过实战项目完成企业官网仿制,并配备1+X考证模拟题,帮助学习者掌握从静态页面到交互动画的全流程开发技能。

视频课程目录:
1. 课程指南
2. HTML5静态页面
3. CSS3样式页面
4. 版式布局页面
5. 交互页面
6. 动画页面
7. 实战:仿官网
8. HTML基础
9. 文本控制
10. 列表
11. 图片属性
12. 超级链接
13. 页面元素与属性
14. CSS盒子模型
15. 浮动与定位
16. 项目实战
17. 1+X考证实操




├─{01}--课程指南—磨刀不误砍柴功
│ #1.1#--图文.pdf
│ #1.2#--图文.pdf
│ #1.3#--图文.pdf

├─{02}--项目一HTML5静态页面—网页初体验
│ #2.1#--图文.pdf
│ #2.2.1#--图文.pdf
│ #2.2.2#--图文.pdf
│ #2.3.1#--图文.pdf
│ #2.3.2#--图文.pdf
│ #2.4.1#--图文.pdf
│ #2.4.2#--图文.pdf
│ #2.5#--图文.pdf
│ #2.6#--图文.pdf
│ (2.2.1)--1学习任务单.doc
│ (2.2.2)--初识HTML.ppt
│ (2.2.3)--案例集.doc
│ (2.3.1)--2学习任务单.doc
│ (2.3.2)--文本控制标记.ppt
│ (2.3.3)--1-2-1.html
│ (2.3.4)--2-3诗词欣赏.html
│ (2.3.5)--2-3字体样式.html
│ (2.4.1)--图像标记学习任务单.doc
│ (2.4.2)--图像标记.ppt
│ (2.4.3)--2-4.zip
│ (2.4.4)--2-4.zip
│ (2.5.1)--4超级链接任务单.doc
│ (2.5.2)--4超级链接.ppt
│ (2.5.3)--2-5锚点的使用.html
│ (2.5.4)--2-5超级链接.html
│ (2.6.1)--5结构元素任务单.doc
│ (2.6.2)--5结构元素.ppt
│ (2.6.3)--2-6.zip
│ (2.7)--项目一HTML搭建页面.doc
│ [2.2.1]--4-初识网页_49_820.mp4
│ [2.2.2]--5-HTML发展历程1.1.1-2.mp4
│ [2.2.3]--8-创建站点.mp4
│ [2.2.4]--8-第一个网页.mp4
│ [2.4]--2.图像标记.mp4

├─{03}--项目二CSS3样式页面—给页面化个妆
│ #3.1#--图文.pdf
│ (3.9)--项目二CSS美化页面.doc

├─{04}--项目三版式布局页面——页面可以千姿百态
│ #4.1#--图文.pdf
│ (4.6)--项目三盒子布局页面.doc

├─{05}--项目四交互页面—与页面对话
│ #5.1#--图文.pdf
│ (5.5)--项目四表单.doc

├─{06}--项目五动画页面—网页动起来
│ #6.1#--图文.pdf
│ (6.5)--项目五动画效果活跃页面.doc

├─{07}--实战演练仿五舟科技有限公司官网
│ #7.1#--图文.pdf
│ #7.2#--图文.pdf
│ [7.2]--案例效果.mp4

├─{08}--初识HTML
│ │ #8.1#--图文.pdf
│ │ (8.1.1)--3-初识HTML5-1.ppt
│ │ (8.1.2)--1学习任务单.doc
│ │ (8.1.3)--2学习任务单.doc
│ │ (8.1.4)--自测操作联系.doc
│ │ [8.3]--8-创建站点.mp4
│ │ [8.4]--8-第一个网页.mp4
│ │
│ └─{01}--初识HTML
│ │ (8.1.1)--1.主要教学内容安排(2).doc
│ │
│ └─{02}--何为网页
│ #8.1.2.2#--图文.pdf
│ [8.1.2.1]--4-初识网页_49_820.mp4
│ [8.1.2.2.1]--5-HTML发展历程1.1.1-2.mp4
│ [8.1.2.2.2]--6-浏览器介绍.mp4

├─{09}--文本控制格式
│ │ #9.1#--图文.pdf
│ │ #9.2#--图文.pdf
│ │ #9.3#--图文.pdf
│ │ #9.4#--图文.pdf
│ │ [9.1]--4HTML文本的控制标记.mp4
│ │ [9.2]--5font标记.mp4
│ │ [9.3]--6hr标记.mp4
│ │ [9.4]--7特殊字符标记(拓展).mp4
│ │
│ ├─{01}--4HTML文本的控制标记
│ │ (9.1.1)--案例4.doc
│ │
│ ├─{02}--5Font标记
│ │ (9.2.1)--案例5.doc
│ │
│ ├─{03}--6hr标记
│ │ (9.3.1)--案例6.doc
│ │
│ └─{04}--7特殊字符标记(拓展)
│ (9.4.1)--案例7.doc

├─{10}--列表课前预习
│ #10.3#--图文.pdf
│ #10.4#--图文.pdf
│ #10.5#--图文.pdf
│ (10.1)--4学习任务单.doc
│ [10.3]--ul.mp4
│ [10.4]--ol.mp4
│ [10.5]--dl.mp4
│ [10.7]--嵌套.mp4

├─{11}--图片属性——课前预习
│ #11.3#--图文.pdf
│ #11.4#--图文.pdf
│ #11.5#--图文.pdf
│ #11.7#--图文.pdf
│ #11.8#--图文.pdf
│ (11.1)--5学习任务单.doc
│ (11.7)--控制文本和图像(1).doc
│ [11.3]--1图像标记.mp4
│ [11.4]--2图像标记_大小设置.mp4
│ [11.5]--3图像标记_边距属性.mp4

├─{12}--图片属性——上课内容
│ #12.1#--图文.pdf
│ #12.2#--图文.pdf
│ #12.3#--图文.pdf
│ (12.4.1)--案例01.doc
│ (12.4.2)--案例02.doc
│ (12.5)--页面跳转.zip
│ (12.6)--电影效果-案例做完点给点案例.zip
│ [12.1]--绝对与相对路径(1).mp4
│ [12.2]--添加图片.mp4
│ [12.3]--设置图片属性.mp4

├─{13}--超级链接——课前预习
│ #13.3#--图文.pdf
│ #13.4#--图文.pdf
│ (13.1)--6学习任务单.doc
│ (13.2)--超级链接.ppt
│ (13.5)--预习素材及效果.zip
│ [13.3]--超级链接.mp4
│ [13.4]--锚点链接.mp4

├─{14}--页面元素及属性一
│ #14.1#--图文.pdf
│ #14.3#--图文.pdf
│ #14.5#--图文.pdf
│ #14.7#--图文.pdf
│ #14.9#--图文.pdf
│ (14.2.1)--案例2-2header元素的使用.doc
│ (14.2.2)--案例2-2header元素的使用.html
│ (14.4.1)--案例2-3nav元素的使用.doc
│ (14.4.2)--案例2-3nav元素的使用.html
│ (14.6)--article元素案例.html
│ (14.8)--section元素.html
│ [14.1]--header.mp4
│ [14.3]--nav.mp4
│ [14.5]--article.mp4
│ [14.7]--section.mp4
│ [14.9]--footer.mp4

├─{15}--页面元素及属性二
│ #15.1#--图文.pdf
│ #15.10#--图文.pdf
│ #15.3#--图文.pdf
│ #15.6#--图文.pdf
│ #15.8#--图文.pdf
│ (15.2)--figure.doc
│ (15.4)--hgroup.doc
│ (15.5)--hgroup_2.doc
│ (15.7)--details.doc
│ (15.9)--progress.doc
│ [15.10]--meter元素.mp4
│ [15.1]--figure和figcaption元素.mp4
│ [15.3]--hgroup元素.mp4
│ [15.6]--details和summary元素.mp4
│ [15.8]--progress元素.mp4

├─{16}--页面元素及属性三
│ #16.1#--图文.pdf
│ #16.2#--图文.pdf
│ #16.3#--图文.pdf
│ #16.4#--图文.pdf
│ #16.5#--图文.pdf
│ #16.6#--图文.pdf
│ [16.1]--time元素.mp4
│ [16.2]--mark元素.mp4
│ [16.3]--cite元素.mp4
│ [16.4]--draggable属性.mp4
│ [16.5]--spellcheck属性.mp4
│ [16.6]--contenteditabe属性.mp4

├─{17}--综合案例
│ #17.1#--图文.pdf
│ (17.2)--综合——电影影评.doc
│ (17.3)--电影效果图片.zip
│ (17.4)--心灵小屋.zip
│ (17.5)--HTML5页面元素及属性学习大纲.doc
│ [17.1]--阶段案例----制作电影影评网.mp4

├─{18}--CSS盒子模型
│ │ #18.3#--图文.pdf
│ │ #18.5#--图文.pdf
│ │ (18.1)--盒子模型+边框属性.doc
│ │ (18.2)--边框属性+背景属性.doc
│ │ (18.3)--背景属性2.doc
│ │ (18.4)--背景属性3导学案.doc
│ │ (18.5.1)--style05.css
│ │ (18.5.2)--example26.html
│ │ (18.5.3)--1new_file.html
│ │
│ ├─{01}--盒子模型概述+边框、边距属性
│ │ #18.1.1#--图文.pdf
│ │ #18.1.2#--图文.pdf
│ │ #18.1.3#--图文.pdf
│ │ #18.1.4#--图文.pdf
│ │ #18.1.5#--图文.pdf
│ │ #18.1.6#--图文.pdf
│ │ [18.1.1]--1认识盒子模型.mp4
│ │ [18.1.2]--2DIV标记.mp4
│ │ [18.1.3]--3盒子的宽与高.mp4
│ │ [18.1.4]--4边框属性.mp4
│ │ [18.1.5]--5边框属性——圆角.mp4
│ │ [18.1.6]--边距属性.mp4
│ │
│ ├─{02}--边框属性+背景属性
│ │ #18.2.3#--图文.pdf
│ │ #18.2.4#--图文.pdf
│ │ #18.2.5#--图文.pdf
│ │ [18.2.1]--box-shadow属性.mp4
│ │ [18.2.2]--box-sizing属性.mp4
│ │ [18.2.3]--设置背景颜色与图像.mp4
│ │ [18.2.4]--背景与图片不透明度的设置.mp4
│ │ [18.2.5]--设置背景图像的平铺与位置.mp4
│ │
│ ├─{03}--背景属性2
│ │ #18.3.1#--图文.pdf
│ │ #18.3.2#--图文.pdf
│ │ #18.3.3#--图文.pdf
│ │ #18.3.4#--图文.pdf
│ │ (18.3.5)--第五章images.rar
│ │ [18.3.1]--设置背景图像固定方式与大小.mp4
│ │ [18.3.2]--设置背景图像的显示区域与裁剪区域.mp4
│ │ [18.3.3]--设置多重背景图像.mp4
│ │ [18.3.4]--背景复合属性.mp4
│ │
│ └─{04}--CSS3渐变属性
│ │ #18.4.1#--图文.pdf
│ │ #18.4.2#--图文.pdf
│ │ #18.4.3#--图文.pdf
│ │ [18.4.1]--线性渐变.mp4
│ │ [18.4.2]--径向渐变.mp4
│ │ [18.4.3]--重复渐变.mp4
│ │
│ └─{03}--重复渐变
│ (18.4.3.1.1)--练习5-4(1).doc
│ (18.4.3.1.2)--练习5-5(1).doc
│ (18.4.3.1.3)--练习5-3(1).doc
│ (18.4.3.1.4)--练习5-2(1).doc
│ (18.4.3.1.5)--案例5-1(1).doc
│ (18.4.3.2)--综合案例images.zip

├─{19}--浮动与定位
│ │ (19.1)--浮动导学案.doc
│ │ (19.2)--定位导学案.doc
│ │
│ ├─{01}--浮动导学案
│ │ #19.1.1#--图文.pdf
│ │ #19.1.2#--图文.pdf
│ │ #19.1.3#--图文.pdf
│ │ (19.1.4.1)--example07.html
│ │ (19.1.4.2)--example06.html
│ │ (19.1.4.3)--example05.html
│ │ (19.1.4.4)--example04.html
│ │ (19.1.4.5)--example03.html
│ │ (19.1.4.6)--example02.html
│ │ (19.1.4.7)--example01.html
│ │ (19.1.5.1)--案例1——浮动练习.doc
│ │ (19.1.5.2)--综合案例images.rar
│ │ [19.1.1]--元素的浮动属性float.mp4
│ │ [19.1.2]--清除浮动.mp4
│ │ [19.1.3]--overflow属性.mp4
│ │
│ └─{02}--定位导学案
│ #19.2.1#--图文.pdf
│ #19.2.2#--图文.pdf
│ #19.2.3#--图文.pdf
│ #19.2.4#--图文.pdf
│ #19.2.5#--图文.pdf
│ #19.2.6#--图文.pdf
│ #19.2.7#--图文.pdf
│ #19.2.8#--图文.pdf
│ (19.2.9.1)--example08.html
│ (19.2.9.2)--example12.html
│ (19.2.9.3)--example11.html
│ (19.2.9.4)--example10.html
│ (19.2.9.5)--example09.html
│ [19.2.1]--元素的定位属性.mp4
│ [19.2.2]--静态定位与固定定位.mp4
│ [19.2.3]--相对定位relative.mp4
│ [19.2.4]--绝对定位absolute.mp4
│ [19.2.5]--z-index层叠等级属性.mp4
│ [19.2.6]--元素的类型.mp4
│ [19.2.7]--span标记.mp4
│ [19.2.8]--元素的转换.mp4

├─{20}--项目一简单静态页面
│ └─{01}--HTML5概述
├─{21}--项目二CSS样式页面
│ #21.1#--图文.pdf
│ #21.2#--图文.pdf
│ #21.3#--图文.pdf
│ (21.1.1)--CSS3基础.ppt
│ (21.1.10)--3-2.zip
│ (21.1.11)--3-3.zip
│ (21.1.12)--案例3(1).doc
│ (21.1.2)--基础选择器22.ppt
│ (21.1.3)--基础选择器3.ppt
│ (21.1.4)--3-1CSS3入门及引入方式.doc
│ (21.1.5)--3-2css基础选择器1学习任务单2.doc
│ (21.1.6)--3-3css基础选择器2学习任务单.doc
│ (21.1.7)--3-4学习任务单4——文本样式属性.doc
│ (21.1.8)--3-5学习任务单5——文本外观属性.doc
│ (21.1.9)--3-6学习任务单6——CSS高级特性.doc
│ (21.2.1)--基础选择器44.ppt
│ (21.2.2)--关系选择器学习任务单.doc
│ (21.2.3)--伪类选择器1学习任务单.doc
│ (21.2.4)--结构化伪类选择器2学习任务单.doc
│ (21.2.5)--2关系选择器之兄弟选择器案例.doc
│ (21.2.6)--3设置文章段落样式.doc
│ (21.2.7)--第四章【动手实践】综合案例.doc
│ (21.3.1)--阶段案例效果图.zip
│ (21.3.2)--images.zip
│ [21.1.1]--CSS样式规则.mp4
│ [21.1.2]--标记、类选择器.mp4
│ [21.1.3]--标签指定选择器.mp4
│ [21.1.4]--后代选择器.mp4
│ [21.1.5]--@font-face属性.mp4
│ [21.2.1]--only-child选择器.mp4
│ [21.2.2]--nth-child(n)和nth-last-child(n).mp4
│ [21.2.3]--nth-of-type(n)和nth-last-of-type(.mp4
│ [21.2.4]--before选择器.mp4
│ [21.2.5]--链接伪类.mp4
│ [21.3]--阶段案例----制作网页设计软.mp4

├─{22}--项目三版式布局页面
│ #22.1.1#--图文.pdf
│ #22.1.2#--图文.pdf
│ #22.1.3#--图文.pdf
│ #22.1.4#--图文.pdf
│ #22.1.5#--图文.pdf
│ #22.4#--图文.pdf
│ (22.1.1)--1认识盒子模型——1.doc
│ (22.1.2)--2盒子的边框与边距——2.doc
│ (22.1.3)--盒子模型1.ppt
│ (22.1.4)--案例5-1.doc
│ (22.1.5)--练习5-2.doc
│ (22.1.6)--练习5-3.doc
│ (22.1.7)--练习5-4.doc
│ (22.1.8)--练习5-5.doc
│ (22.2.1)--浮动与定位.ppt
│ (22.2.2)--拓展案例.zip
│ [22.1]--盒子模型(1).mp4

├─{23}--项目七网站设计制作
│ #23.1#--图文.pdf
│ #23.2#--图文.pdf
│ #23.3#--图文.pdf
│ #23.4#--图文.pdf

└─{24}--1+X考证实操样题
(24.1.1)--60001.zip
(24.1.2)--60002.zip
(24.1.3)--60003.zip
(24.1.4)--60004.zip


以上为简介部分内容,详细请成为会员后查看!


你可能想看:
网站运营多久了,会突然找不到吗?

首先站长持续更新很多年了,投入了大量时间以及资金,也是唯一生活收入来源,域名永远不会更换,有任何问题可以先加我QQ:89797497咨询,承诺保证每天更新从不间断。诚心经营,用时间说话。

本站提供的学习资源能否直接商用?

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

购买会员后,我不想学习了可以退款吗?

学习资源属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、请您在购买获取之前确认好是您所需要的资源。如其它疑问联系客服QQ:89797497

课程都是最新的吗?后期还会不会更新?

课程都是站长花大量金钱以及投稿收集得来,课程都是全站最新发布的,一手更新货源,如有后期作者更新也会第一时间更新发布。请持续关注本站。

成为会员后会二次收费吗?

一次开通即成终身VIP会员不再以任何形式收取二次费用。

导航在这里!

所有功能都在底部导航栏哦~

全部分类

选择您感兴趣的分类,浏览相关资源

搜索资源

输入关键词,查找您感兴趣的内容

最近搜索

个人中心

查看和管理您的个人信息

新用户注册
验证码
已有账号? 立即登录
用户登录
验证码
没有账号? 立即注册

近期查看内容

  • 暂无最近阅读记录

资源下载

以下是您购买的资料链接

web前端技术-掌握前端核心,从静态到交互实战

链接已验证 · 有效期永久
网盘链接
使用指南
1

保存文件:方法一

点击打开按钮 → 在新页面保存文件 → 根据提示在浏览器中完成登录或注册操作 → 最终按浏览器提示打开或下载网盘APP。

2

保存文件:方法二

请您先点击复制按钮,之后打开网盘APP,系统会自动弹出窗口,点击窗口中的"保存"按钮即可存入您的网盘。

3

使用资源

文件保存成功后,您就可以轻松管理了:点击文件即可在线畅看,或者随心所欲地下载到您的设备上。

其它问题
链接失效怎么办?

如果遇到链接失效,请联系邮箱89797497@qq.com,我们会尽快更新链接并回复。

下载速度太慢怎么办?

网盘非会员下载速度可能受限,建议尝试使用官方提速功能或选择非高峰时段下载。

资源可以商用吗?

本资源合集收集于网络,均不可商用。