HTML5+CSS3+JavaScript Web前端开发案例教程课件：响应式滑块图文轮播.pptxVIP

响应式滑块图文轮播

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：响应式滑块图文轮播核心功能：图文布局样式轮播特效响应式布局

案例介绍滑块图文轮播效果

案例介绍响应式滑块图文效果

02技术准备

技术准备CSS媒体查询：CSS的媒体类型中提供了@media属性，这个属性可以在不同屏幕下设置不同的样式，通常被称为媒体查询，简单来说，就是响应式。通过设定@media属性的参数来实现在不同的浏览器可视尺寸下的展示效果。

技术准备@media属性示例代码：@mediamediatypeand|not|only(mediafeature){CSSCode...}@media属性不同于其他的CSS属性，其写法有点类似于JavaScript的函数。mediatype用来描述当前浏览器所在设备的类型，比如是计算机显示器、手机、电视等。

技术准备mediatype的媒体类型媒体类型兼容性说明all所有浏览器用于所有媒体设备类型auralOpera用于语音和音乐合成器brailleOpera用于触觉反馈设备handheldChrome,Safari,Opera用于小型或手持设备print所有浏览器用于打印机projectionOpera用于投影图像，如幻灯片screen所有浏览器用于计算机显示器ttyOpera用于使用固定间距字符格的设备。如电传打字机和终端tvOpera用于电视类设备embossedOpera用于凸点字符（盲文）印刷设备

技术准备在配置媒体类型时，会用到关键字，例如上面示例代码中的and就是关键字。关键字就是用来描述响应条件的描述，具体作用如下所示：and，是一个连接词，表示某种媒体类型下的尺寸；not，用来排除某种指定的媒体类型；only，用来指定某种特定的媒体类型。

技术准备关键词后面的括号内，用来指定分辨率，示例代码如下所示：@mediaonlyscreenand(max-width:500px){}上面的示例代码中的括号内声明的分辨率，就是当前浏览器的可视区域小于500px时，使用{}内的规则。

技术准备具体设置媒体查询规则的示例代码如下所示：@mediascreenand(max-width:500px){html,body{background:red;}}上面示例代码的意思就是当浏览器的可视区域宽度小于500px时，设置页面背景颜色为红色。

技术准备如果有多个尺寸规则，可以使用关键词and连接，示例代码如下所示：@mediaonlyscreenand(min-width:600px)and(max-width:800px){html,body{background:red;}}上面示例代码的意思是当浏览器可视区域宽度大于600px并且小于800px时，设置页面背景颜色为红色。

03案例实现

案例实现文件结构：