Web前端开发案例教程（HTML5+CSS3）全套PPT课件.pptx

;第1章WEB前端开发概述;1.1认识WEB前端开发;;1.2WEB相关概念;;;;;;;;;;1.3HTML5概述;;;;;;;;;;;;;感谢您的观看！;第2章HTML5基础;2.1案例：简单学校网站;综合利用HTML5标记，制作简单学校网站。要求如下：

（1）从主页可以链接到其他页面，从其他页面可以返回到主页。

（2）在主页中创建友情链接，链接到百度和新浪网。

（3）新闻页面中，新闻条目采用列表项表示。

（4）专业介绍页面中，创建“到页头”和“到页尾”的锚点链接。

;32;2.2知识准备;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;空链接;空链接;;;;;;;;;感谢您的观看！;第3章HTML5新增页面元素;案例实现;综合利用HTML5新增页面元素，创建旅游部落网页。要求如下：

（1）用HTML5新增页面元素定义页面。

（2）其它国内游精品路线用下拉方式展示，

单击标题可以展示或折叠详细内容。;;3.2知识准备;82;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;3.3案例实现;;;116;感谢您的观看！;第4章CSS3基础;4.1案例：学院新闻详情页面;;;;;;;;;;;;;;;;;;;;通配符选择器;;141;142;;;;;;;;;color;color;color;color;color;color;color;color;color;color;;;;;;;;;;第5章CSS3高级选择器;知识准备;结合高级选择器，利用HTML5和CSS3，实现景点介绍页面。单击图1中的某个景点时，显示如图2的效果。要求使用高级选择器，提高代码效率。;5.2知识准备;174;;;;;;;;;;CSS3常用的结构化伪类选择器有:

root选择器、:not选择器、:empty选择器、

:target选择器、:only-child选择器、

:first-child选择器、:last-child选择器、

:nth-child（n）选择器、:nth-last-child（n）选择器、

:nth-of-type（n）选择器、:nth-last-of-type（n）选择器。;;;;;;;;;伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。常用的伪元素选择器有:before选择器和:after选择器。在必威体育精装版的CSS3标准中，伪元素选择器的格式改为双冒号，这两个元素可以写为::before、::after，但只兼容IE9以上的现代浏览器。如果为了往下兼容，可以使用单冒号格式。;;;;5.3案例实现;;199;感谢您的观看！;第6章CSS3盒子模型;6.1案例：学院简介页面制作;;制作学院简介页面。将学院简介内容放入定义的盒子中，并设置盒子模型的相关属性。要求如下：

（1）页面??景为祥云图案（bodybg.jpg）。

（2）盒子实际的宽度为900像素、高度自动适应文字内容、内边距为20像素、边框为1像素、灰色（#ccc）、实线，盒子的背景为白色，盒子在浏览器中水平居中显示。

（3）正文标题采用二级标题、标题行高度为40像素、文字颜色为黑色、在浏览器中居中显示。

（4）段落文字采用宋体、大小14像素、文字颜色为深灰色（#666）、行高25px、首行缩进2个字符、段落的下外边距为20像素。;6.2知识准备;;;;;;;;内边距属性;内边距属性;内边距属性;内边距属性;内边距属性;;;;;;;;;;;;;;;;;;;;;第7章列表与超链接;知识准备;;7.2知识准备;;;;;;;;7.3案例实现;;;;;254;感谢您的观看！;第8章表格与表单;表格相关知识;;8.2表格相关知识;;;;;;;;;8.5表单相关知识;;;;;;;;;;;;;;;;;;;;;289;感谢您的观看！;第9章HTML5+CSS3布局网页;知识准备;9.1案例：学院网站主页布局;根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学院网站的主页进行布局。布局浏览效果如图所示。;9.2知识准备;;;;设置浮动属性后，盒子水平排列。浮动元素不再占用原文档流的位置，它会对页面中其他元素的排版产生影响。;;;;303;;;306;307;308;309;;;;;;;;317;;;;321;322;;;;326;327;;;;;;;;;;;;;;9.3案例实现;;;344;345;感谢您的观看！;第10章CSS3动画;动画属性;10.1过渡属性;;;10