Web前端技术项目教程(HTML5+CSS3)

Web知识储备篇
项目1 HTML5基础 3
任务1.1　掌握网页的文档结构 4
1.1.1　HTML5中的常用标签 4
1.1.2　HTML5的编写方法及代码的书写格式 4
动手实践——实现一个简单的HTML页面 5
任务1.2　设计网页文档 6
1.2.1　网页图像的设置 6
1.2.2　网页表格的设置 7
1.2.3　网页表单的设置 7
1.2.4　网页列表的设置 8
1.2.5　网页多媒体的设置 11
1.2.6　网页超链接的设置 11
动手实践——创建一个产品展示页面 11
小结 14
测试题 14
项目2 CSS3基础 16
任务2.1　CSS3语法概述 17
2.1.1　CSS3的语法结构 17
2.1.2　CSS3的使用方法 17
2.1.3　CSS3的基础选择器 20
任务2.2　网页中字体、段落的美化 27
2.2.1　网页中的字体样式 27
2.2.2　网页中的段落样式 28
动手实践——新闻页面的实现 31
任务2.3　网页中背景与边框的美化 34
2.3.1　网页中背景的美化 34
2.3.2　网页中边框的美化 50
动手实践——简单信息展示网页的实现 53
小结 60
测试题 60

项目3 CSS3+DIV页面结构布局 62
任务3.1　CSS3+DIV 63
3.1.1　块元素与行内元素的应用 63
3.1.2　盒子模型及运用 66
3.1.3　浮动与定位 68
动手实践——导购菜单的制作 79
任务3.2　导航菜单的制作 84
3.2.1　垂直导航菜单的制作 84
3.2.2　水平导航菜单的制作 85
动手实践——模拟导航栏的制作 86
小结 88
测试题 88
项目4 CSS3新增动画特效 91
任务4.1　变形效果 92
4.1.1　平移 92
4.1.2　缩放 94
4.1.3　倾斜 96
4.1.4　旋转 98
动手实践——网页中立体效果的实现 100
任务4.2　过渡效果 105
4.2.1　transition­property属性 105
4.2.2　transition­duration属性 106
4.2.3　transition­timing­function属性 107
4.2.4　transition­delay属性 110
4.2.5　transition属性 111
动手实践——悬浮相册的实现 111
任务4.3　animation动画效果 116
4.3.1　关键帧 116
4.3.2　animation动画属性 119
动手实践——图片墙3D翻转效果的实现 122
小结 126
测试题 127
Web案例提高篇
项目5 气泡悬浮效果的实现 131
任务5.1　界面设计分析 132
任务5.2　基本框架的实现 132
项目6 横幅广告效果的实现 137
任务6.1　设计分析 137
任务6.2　页面的实现 138
Web项目实战篇
项目7 综合信息类网站首页的实现 143
任务7.1　网站首页整体布局的实现 143
任务7.2　页面头部、banner及导航的具体实现 147
任务7.3　图片浏览样式与*新动态栏的实现 150
任务7.4　走进浙江、浙江历史等信息栏的实现 154
任务7.5　快速通道及页脚信息的实现 167
参考文献 172