HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 范玉玲 第5-7章 CSS特效、响应式设计与Bootstrap、网站建设流程

第5章CSS特效《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents5.1滤镜5.2过渡5.3动画5.4转换5.45.5项目滤镜5.15.1滤镜CSS3的滤镜（filter）属性提供了模糊和改变元素颜色的功能，常用于调整图像的渲染、背景或边框显示效果。多个滤镜之间用空格隔开。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1滤镜filter的属性属性值描述属性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate饱和度contrast对比度hue-rotate色相旋转blur模糊invert反色drop-shadow阴影urlurl函数接收一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}举例（filter-grayscale）灰度grayscale()grayscale()用于将图像转换为灰度图像。grayscale()参数值为0～1的小数，也支持0%～100%百分比的形式。如果没有任何参数值，默认将以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}举例（filter-blur）模糊blur()blur()用于给图像设置高斯模糊。参数值设置为高斯函数的标准差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}举例（filter-brightness）brightness()用于调整图像的亮度，默认值为100%或者1。如果其值超过100%，就意味着图片拥有更高的亮度。如果值是0%，图像会全黑。值是100%，则图像无变化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}举例（filter-contrast）调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。超过100％的值将提供更具对比度的结果。若没有设置值，默认是1。对比度contrast()drop-shadow()用于给图像设置一个阴影效果。<offset-x><offset-y>（必选）：<offset-x>可设置水平方向的距离，负值会使阴影出现在元素的左边；<offset-y>可设置垂直方向的距离，负值会使阴影出现在元素的上方。如果两个值都是0,则阴影出现在元素正后方。<blur-radius>（可选）：值越大，越模糊，则阴影会变得更大更淡。不允许负值，若未设置，默认值为0（阴影的边界很锐利）。<spread-radius>（可选）：正值会使阴影扩张或变大，负值会使阴影缩小。若未设置，默认值为0（阴影会与元素一样大小）。<color>（可选）：若未设置该属性，颜色值将根据浏览器的默认设置来进行显示。举例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}阴影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);举例（drop-shadow）阴影drop-shadow()这个函数有点类似于box-shadow属性。box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。Tipdrop-shadow和box-shadow相似，都是实现投影效果,它们有什么区别呢？box-shadow阴影可以任意叠加，drop-shadow不能阴影叠加，但是它是真正意义上的投影！而box-shadow只是盒阴影而已。举例（box-shadow3）（box-shadow4）（区别1）（区别2）阴影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}举例（filter-hue-rotate）hue-rotate()设置图像应用色相旋转。取值为0deg，则图像无变化。若值未设置，默认值为0deg。该值没有最大值，超过360deg时相当于又绕一圈。色相旋转hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}举例（filter-invert）invert反色会把图片变成底片的感觉值为100%是完全反转值为0%则图像无变化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}举例（filter-opacity）透明度opacity()opacity()用于定义透明度，默认值为1。值为0%则图像完全透明，值为100%则图像不透明。该函数与已有的opacity属性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有浏览器都支持opacity属性，IE8及更早的版本支持替代的filter属性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以为兼容可写为：透明度opacity()举例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}举例（filter-saturate）定义图像饱和度。值为0%是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，表示具有更高的饱和度。默认值为1。饱和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}举例（filter-sepia）将图像转换为深褐色。参数值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。默认值为0.褐色sepia()filter可以整合多个滤镜，滤镜之间可使用空格分隔开。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}举例（filter）符合函数filter()顺序是非常重要的(例如使用grayscale()后再使用sepia()将产生一个完整的灰度图片)。Tip过渡5.2transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的CSS属性的名称。transition-duration定义过渡效果花费的时间。transition-timing-function规定过渡效果的时间曲线。transition-delay规定过渡效果何时开始。CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1、指定要添加效果的CSS属性。2、指定效果的持续时间。Transition过渡把鼠标指针放到div元素上，其高度会从100px逐渐变为300px。举例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition过渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠标指针放到div元素上，其宽度会从100px逐渐变为300px。Transition过渡举例（transition）transition-property

属性用于指定应用过渡效果的CSS属性的名称。基本语法格式transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。transition-property举例(transition-property)transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-duration:time;transition-duration举例(transition-duration)transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。基本语法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);举例(transition-timing-function)transition-timing-functiontransition-timing-function属性的取值属性值描述linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。transition-timing-functiontransition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-delay:time;正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。transition-delaytransition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。基本语法格式transition：propertydurationtiming-functiondelay;使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

例如：transition:border-radius5sease-in-out2s;transition无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。transition随堂练习（2）过渡举例1举例21、实现从左侧图片到右侧图片的过渡变化，过渡效果延时1s发生。2、上面例子只有一个过渡效果，如何同时有多个过渡效果应该怎么处理呢？下面例子同时采用过渡效果改变width、height、opacity的样式。动画5.3Animation动画@keyframes规定动画。animation所有动画属性的简写属性，除了animation-play-state属性。animation-name规定@keyframes动画的名称。animation-duration规定动画完成一个周期所花费的秒或毫秒。animation相关的属性CSS3的属性中有若干能够实现动画效果，通过设置其子属性，可以创造如移动、淡入淡出、改变颜色的效果。其子属性及功能描述如表所示：举例Animation动画animation-timing-function规定动画的速度曲线。animation-delay规定动画何时开始。animation-iteration-count规定动画被播放的次数。animation-direction规定动画是否在下一周期逆向地播放。animation-play-state规定动画是否正在运行或暂停。animation-fill-mode规定对象动画时间之外的状态。animation相关的属性举例属性值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。合法的值：0-100%from（与0%相同）to（与100%相同）css-styles必需。一个或多个合法的CSS样式属性。@keyframes规则基本语法格式@keyframes

animationname{keyframes-selector{css-styles;}}举例使div元素匀速向下移动：举例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。@keyframes规则案例演示为@keyframes动画规定名称值描述keyframename规定需要绑定到选择器的keyframe的名称。none规定无动画效果（可用于覆盖来自级联的动画）。animation-name基本语法格式animation-name:keyframename|none;定义动画完成一个周期所需要的时间，以秒或毫秒计。说明：必须明确规定animation-duration属性，否则时长为0，就不会播放动画。举例（animation-duration）值描述time规定完成动画所花费的时间。默认值是0，意味着没有动画效果。animation-duration基本语法格式animation-duration:time;animation-timing-function规定动画的速度曲线。速度曲线定义动画在每一动画周期中执行的节奏。速度曲线用于使变化更为平滑。举例（

animation-timing-function）值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier（贝塞尔曲线）函数中自己的值。可能的值是从0到1的数值。animation-timing-function基本语法格式animation-timing-function:value;随堂练习（3）动画对比一下不同速度曲线的效果。演示示例：速度曲线animation-delay属性定义动画何时开始。举例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允许负值，-2s使动画马上开始，但跳过前2秒进入动画。基本语法格式animation-delay:time;animation-iteration-count属性定义动画的播放次数值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。animation-iteration-count基本语法格式animation-iteration-count:n|infinite;animation-direction属性定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。注释：如果把动画设置为只播放一次，则该属性没有效果。举例（

animation-direction）animation-direction基本语法格式animation-direction:normal|alternate;animation-play-state属性定义动画的状态。举例（

animation-play-state）Running表示运动Paused表示暂停animation-play-state基本语法格式animation-play-state:running|paused;举例（animation-fill-mode）animation-fill-mode属性定义动画结束后的状态，none无forwards动画结束（to里面的所有样式）时的状态backwards动画开始（from里面的所有样式）时的状态both动画开始或者结束时的状态。animation-fill-mode基本语法格式animation-fill-mode:none|forwards|backwards|both;animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。注意：使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。完成animation练习animation基本语法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;随堂练习（4）动画实现动画，方块从左上角开始左→右→下→左，顺时针方向移动。同时背景色不断变化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：动画转换5.4转换（transform）属性用于元素的2D或3D转换，这个属性允许用户对元素进行旋转、缩放、平移、倾斜等。这些效果在CSS3之前都需要依赖Flash或JavaScript才能完成。现在，使用纯CSS3就可以实现这些变形效果，而无须加载额外的文件，这样极大地提高了网页开发者的工作效率，提高了页面的执行速度。转换transform属性允许对元素应用2D转换，常见2D转换：2D转换平移倾斜缩放旋转transform属性的默认值为none，适用于内联元素和块元素r，表示不进行变形。transform：none|transform-functionstansform-functions用于设置变形函数，可以是一个或多个变形函数列表。基本语法格式2D转换2D转换函数名描述参数说明rotate(angel)旋转元素angel是度数值，代表旋转角度skew(x-angel,y-angel)倾斜元素angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)沿着y轴倾斜元素2D转换的常用函数2D转换函数名描述参数说明scale(x,y)缩放元素，改变元素的高度和宽度代表缩放比例，取值包括正数、负数和小数scaleX(x)改变元素的宽度scaleY(y)改变元素的高度2D转换的常用函数2D转换2D转换的常用函数函数名描述参数说明translate(x,y)移动元素对象，基于x和y坐标重新定位元素元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数translateX(x)沿着x轴移动元素translateY(y)沿着y轴移动元素matrix(n,n,n,n,n,n)2D转换矩阵使用六个值的表示变形，所有变形的本质都是由矩阵完成的举例使用translate()函数能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数，分别用于定义X轴和Y轴的坐标。x-value是元素在水平方向上向右移动的距离；y-value是元素在垂直方向上向下移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。平移基本语法格式transform:translate(x-value,y-value);

transform:translate(200px,100px);-ms-transform:translate(200px,100px);/*IE9*/-moz-transform:translate(200px,100px);/*Firefox*/-webkit-transform:translate(200px,100px);/*Safari和Chrome*/-o-transform:translate(200px,100px);/*Opera*/举例平移举例scale()函数用于缩放元素。该函数包含两个参数，分别用来定义宽度和高度的缩放比例。x-axis和y-axis参数值可以是正数或负数。正数值表示基于指定的宽度和高度缩放元素；负数值是先翻转元素，再缩放元素（如文字被翻转）缩放基本语法格式transform:scale(x-axis,y-axis);transform:scale(0.9,-2);-ms-transform:scale(0.9,-2);/*IE9*/-moz-transform:scale(0.9,-2);/*Firefox*/-webkit-transform:scale(0.9,-2);/*Safari和Chrome*/-o-transform:scale(0.9,-2);/*Opera*/举例缩放虚框是div的原始大小，利用scale()函数将div的长宽缩放为长0.9倍、宽2倍，-2实现div在Y轴翻转，转换为灰色的div。为了便于比较，设置灰色的div外边距为100px。如图所示，新的div变为宽度180px、高度200px的翻转样式举例skew()函数能够让元素倾斜显示。该函数包含两个参数，分别用来定义X轴和Y轴坐标倾斜的角度。skew()函数可以将一个对象围绕着X轴和X轴按照一定的角度倾斜。参数x-angle表示相对于X轴倾斜的角度值；参数y-angle表示相对于Y轴倾斜的角度值。如果省略了第二个参数，则取默认值0。倾斜基本语法格式transform:skew(x-angle,y-angle);举例rotate()函数能够旋转指定的元素对象，主要在二维空间内进行操作参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针旋转；否则，按照逆时针旋转旋转基本语法格式transform:rotate(angle);编程实现2D转换，鼠标放在方块上，方块旋转一圈并缩小为原来的一半。演示示例：2D转换随堂练习（5）2D转换<style>div{width:150px;height:150px;background-color:#eee;transition:all1s;}div:hover{transform:rotate(360deg)scale(0.5)}</style>设置盒子顺时针旋转360度，缩小一半的效果。STEP01定义<img>标签新建demo05.html文件，编写HTML代码。<imgsrc="./images/fengche.png">动手实践-风车引入本地图片<style>img{width:150px}@keyframesrotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

img:hover

{animation:

rotate

0.5s

linear

infinite}</style>定义<img>标签的样式在demo05.html文件中，编写CSS代码。STEP02定义rotate动画让图片从0到100%顺时针旋转360度动手实践-风车

先定一个小目标！熟悉3D转换，能够定义3D旋转、3D缩放、3D转换元素的透视视图等3D转换3D变形是指某个元素围绕指定的坐标轴旋转，如：3D转换绕x轴旋转绕y轴旋转绕z轴旋转3D转换函数名描述参数说明rotate3d(x,y,z,angel)定义3D旋转前三个值用于判断需要旋转的轴，旋转轴的值设置为1，否则为0，angel代表元素旋转的角度rotateX(angel)沿着x轴3D旋转rotateY(angel)沿着y轴3D旋转rotateZ(angel)沿着z轴3D旋转3D转换的常用函数3D转换函数名描述参数说明scale3d(x,y,z)定义3D缩放代表缩放比例，取值包括正数、负数和小数scaleX(x)沿着x轴缩放scaleY(y)沿着y轴缩放scaleZ(z)沿着z轴缩放3D转换的常用函数3D转换函数名描述参数说明translate3d(x,y,z)定义3D转化元素移动的数值translateX(x)仅用于x轴的值translateY(y)仅用于y轴的值translateY(z)仅用于z轴的值3D转换的常用函数3D转换函数名描述参数说明matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)3D转换矩阵使用16个值的4x4矩阵，所有变形的本质都是由矩阵完成的perspective(n)定义3D转换元素的透视视图一个代表透视深度的数值3D转换的常用函数第6章响应式设计与BootstrapWeb前端技术学习目标/Target了解Bootstrap的概念掌握Bootstrap的下载和环境安装掌握使用媒体查询进行响应式设计的方法学习目标/Target掌握Bootstrap表单、按钮和其它组件的使用熟悉Bootstrap辅助样式的使用掌握Bootstrap布局容器的使用章节概述/Summary在本章将会使用一个工具来让响应式变得容易实现，它就是Bootstrap。Bootstrap为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案，提高了前端开发的工作效率。本章将针对如何使用Bootstrap进行响应式Web设计进行详细讲解。目录/Contents030402Bootstrap框架概述Bootstrap的下载和环境安装媒体查询01响应式设计概述目录/Contents0607Bootstrap样式Bootstrap常用组件08【项目】轮播图/PC端登录05Bootstrap布局容器响应式设计概述6.1开发者在搭建网站时，需要兼顾电脑端和移动端用户。台式机或笔记本电脑的显示器宽度大于或等于1024px。处理方案：制作一个宽度固定为960px的页面。弊端：移动设备得到的是按比例缩小的屏幕，通过放大、缩小和左右滚动才能完全浏览页面。常用的响应式布局框架：Bootstrap，foundation,MaterialDesignforBootstrap(MDB)…15个优秀的响应式CSS框架-腾讯云开发者社区-腾讯云()必要性响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。定义视口，即viewport，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等区域，也就是网页实际显示的区域。问题：设备不同，如台式机、平板电脑、手机方案：1024px对应桌面768px对应pad480px对应手机问题：屏幕尺寸多种多样方案：需要确定一个区间值，设计师需要寻找一个临界点—即当视觉效果开始不符合人们的审美或影响了内容获取时对应的值，这个临界点才是响应式设计中的断点。定义视口可以通过一个名称为viewport的元（meta）标签来进行控制，其基本规则如下：其中，视口设置中几个常用关键词的含义如下：width:控制viewport的大小，可以指定一个值或字符串“device-width”。device-width为设备的实际宽度。height:和width相对应，指定高度。initial-scale:初始缩放比例。<metaname="viewport"content="width=device-width,initial-scale=1">视口响应式网站要针对各种不同屏幕尺寸的设备进行测试，大多数测试可以通过改变浏览器窗口的大小来完成。也可以通过第三方插件和浏览器扩展功能将浏览器窗口或视口设定为指定像素来测试。下图所示网页为例，当浏览器宽度大于768像素时，网页中菜单项完整显示，图片呈四列并排显示。设计案例演示示例：设计案例当浏览器宽度小于768像素时，菜单项被隐藏，显示菜单图标。左图所示，网页布局中图片呈两列并排显示。右图为模拟手机端测试结果。设计案例媒体查询6.2CSS3引入了媒体查询。媒体查询打破了独立样式表，通过一些条件查询语句来确定目标样式，从而控制同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式，使浏览者在不同的设备下都能得到理想的体验。目前媒体查询已经被浏览器广泛支持。媒体查询1.媒介查询的一般结构：媒体查询以@media开头，利用and|not|only这些逻辑关键字把媒介类型和条件表达式串联起来形成布尔表达式，判断是否满足当前浏览器的运行环境。如果满足，则上面的styles部分的样式就会起作用，进而改变页面元素的样式，否则，页面效果不产生任何变化。@mediamediatypeand|not|only(mediafeature){ CSS-Code;}媒体查询2.环境参数媒体类型只能识别显示设备的类型，还需要针对运行设备监测环境参数，比如长宽或分辨率等，下面列举了一些常用的参数：max-width:定义输出设备中的页面最大可见区域宽度min-width:定义输出设备中的页面最小可见区域宽度orientation:设备的方向，portrait和landscape分别表示竖直和水平resolution:设备的分辨率，以dpi(DotsPerInch)或者dpcm(DotsPerCentimeter)表示媒体查询3.条件表达式条件表达式用来判断设备环境参数，从而确定相应的显示方法，例如：表示当屏幕设备宽度小于960px时，屏幕设备的背景色将被设为红色，其中and关键字用来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。@mediascreenand(max-width:960px){ body{background-color:red;}}媒体查询将下面示例的这段代码插入到css文件的后面，会使页面背景色在改变浏览器窗口大小时发生改变。

@mediascreenand(max-width:960px){ body{background-color:red;} } @mediascreenand(max-width:768px){ body{background-color:orange;} } @mediascreenand(max-width:550px){ body{background-color:yellow;} } @mediascreenand(max-width:320px){ body{background-color:green;} }媒体查询举例（media-background-color.html）浏览该示例时，调整浏览器窗口宽度，页面背景颜色就会根据当前视口尺寸变化而变化。浏览器最大化时，如果宽度超过960px，背景为浏览器默认色，一般为白色；尝试更改视口宽度为768px到960px之间，背景变为红色；缩小视口宽度范围550px到768px之间，背景为桔色；缩小视口宽度范围550px到320px之间，背景为黄色，继续缩小视口宽度范围320px以内，背景为绿色，如下图所示：视口小于550px时背景黄色视口小于320px时背景绿色举例（media-background-color.html）媒体查询4.逻辑关键字（1）andand将多个媒体属性连接成一条媒体查询，只有当每个属性都为真时，结果才为真，等同逻辑运算符中的“且”条件。（2）notnot用来对一条媒体查询的结果进行取反，等同逻辑运算符中的“非”条件。上面代码针对非手持且彩色设备应用系列样式。@medianothandheldand(color){…}媒体查询（3）onlyonly仅在媒体查询匹配成功的情况下被用于应用一个样式

当视口宽在320px~350px范围时，应用系列样式。

（4）逗号分隔列表逻辑媒体查询中使用逗号分隔效果等同于or逻辑操作符。当任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。@mediaonlyscreenand(min-width:320px)and(max-width:350px){…}媒体查询例如，如果想在最小宽度为320px或是横屏的手持设备上应用样式，代码如下：其中，handheldand(orientation:landscape)横屏手持设备，min-width:320px表示最小宽度值。如果是一个800像素宽的屏幕设备，媒体语句将会返回真，如果是500像素宽的横屏手持设备，媒体查询返回也会为真。@media(min-width:320px),handheldand(orientation:landscape){…}在媒体查询中如果没有明确指定MediaType，那么其默认为all媒体查询5.常用引用方式作为CSS的media属性，其引用方式分为内嵌方式和外联方式。（1）内嵌方式内嵌方式是将媒介查询的样式和通用样式写在一起，比如我们要在宽度超过320px的情况下为链接加上下划线，如下面代码所示。注意：媒介查询需要声明在普通样式后面，否则声明将不会起作用。a{text-decoration:none;}@mediascreenand(min-width:320px){a{text-decoration:underline;}}媒体查询（2）外联方式CSS属性外联方式使用link标记，带有媒介查询的外联方式也不例外，如下面代码所示。如果使用这种方式，那么在media-handheld.css中，我们就可以直接声明CSS样式了：外联引入方式是源码和属性值分开写，与内嵌方式相比，代码更加简洁清晰。<linkhref="media-handheld.css"media="onlyscreenand(min-width:320px)"/>a{text-decoration:underline;}媒体查询尝试利用媒体查询，结合本次动手实验的素材，搭配合适的样式属性，设计出如下组图片所示的简易响应式网页。难点分析：正确使用媒体查询参数与表达式。灵活运用浮动进行网页布局设计。随堂练习（1）唐诗八首屏幕宽度在640px以内的页面效果屏幕宽度在960px以上的页面效果屏幕宽度在640px~960之间的页面效果演示示例：唐诗八首Bootstrap框架概述6.3Bootstrap来历：它是由Twitter公司的设计师开发的一个前端开源框架，它于2011年8月在GitHub上发布。Bootstrap框架：它是基于HTML、CSS和JavaScript等前端技术实现的，它预定义了一套CSS样式。Bootstrap框架应用：我们只需提供固定的HTML结构，并添加Bootstrap中提供的class名称，即可达到指定的效果。课件中示例使用的是Bootstrap的4.6.x版本，目前最新版是5.3.0。6.3.1什么是BootstrapBootstrap框架中提供的内容如下。基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。CSS：Bootstrap自带全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的栅格系统。布局组件：创建图像、下拉菜单、导航、警告框、弹出框的组件等等。图标库：开源的图标库，格式为SVG，能够轻松快捷地进行缩放，并可以通过CSS设置样式。JavaScript插件：例如，模态框（Model）插件、下拉菜单插件、滚动监听插件等。定制：开发人员可以自由定制Bootstrap的组件、Sass变量和jQuery插件来得到一套自定义的版本，提高了开发的灵活性。6.3.1什么是BootstrapBootstrap的优势6.3.2Bootstrap的优势移动设备优先：移动设备优先的样式贯穿于整个库。浏览器支持：主流浏览器都支持Bootstrap。学习成本低，容易上手：具备HTML和CSS和JavaScript的基础知识。响应式设计：Bootstrap框架的栅格系统，能够自适应于台式机、平板电脑和手机的屏幕大小。良好的代码规范：Bootstrap为开发人员创建接口提供了一个简洁统一的解决方案，减少了测试的工作量，使开发人员站在巨人的肩膀上，不重复造轮子。组件：Bootstrap包含了功能强大的内置组件。Bootstrap的下载和环境安装6.46.4.1Bootstrap的下载方式访问Bootstrap的官方网站或者中文网站，单击“Download”按钮，进入下载页面。Bootstrap官网首页进入官网Bootstrap中文网V4版本首页6.4.2下载Bootstrap预编译文件Bootstrap中文网方式一：下载预编译文件单击下载6.4.2下载Bootstrap预编译文件软件包中的内容解压后6.4.2下载Bootstrap预编译文件在HTML中引入预编译的Bootstrap的核心CSS和JavaScript文件。<!--引入Bootstrap核心CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"><!--JavaScript文件是可选的。从以下两种建议中选择一个即可！--><!--选项1：jQuery和Bootstrap集成包（集成了Popper）--><scriptsrc="js/jquery.slim.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script><!--选项2：Popper和Bootstrap的JS插件各自独立--><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/popper.min.js"></script><scriptsrc="js/bootstrap.min.js"></script>因为Bootstrap的一些插件需要用到JQuery的支持，因此我们也需要包含JQuery的相关内容。CDN的全称是ContentDeliveryNetwork，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。Bootstrap中文网联合国内CDN服务商共同为Bootstrap专门构建了免费的CDN加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootstrapCDN还为大量的前端开源工具库提供了CDN加速服务。直接在网页中加入对CDN的引用即可。6.4.3使用CDN加载Bootstrap方式二：使用CDN6.4.3使用CDN加载Bootstrap方式二：使用CDN<!--Bootstrap4核心CSS文件--><linkrel="stylesheet"href="/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"crossorigin="anonymous"><!--Bootstrap4核心JavaScript文件--><scriptsrc="/npm/jquery@3.5.1/dist/jquery.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04"crossorigin="anonymous"></script>在使用CDN加载引用文件时，通常选择带有min的文件，这是因为带有min的JavaScript和CSS文件是经过压缩之后的文件，体积比较小。6.4.3使用CDN加载Bootstrap小提示6.4.4建立第一个Bootstrap页面1.添加HTML5DOCTYPEBootstrap要求使用HTML5文件类型，所以需要添加HTML5DOCTYPE声明。如果在Bootstrap创建的网页开头不使用HTML5的文档类型（DOCTYPE），可能会面临一些浏览器显示不一致的问题，或者一些特定情境下的不一致，导致代码不能通过W3C标准的验证。<!DOCTYPEhtml><html>……</html>6.4.4建立第一个Bootstrap页面2.移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之间添加viewportmeta标签，如下所示。其中，width属性控制设备的宽度。当网站被带有不同屏幕分辨率的设备浏览，那么把它设置为device-width可以确保它能正确呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放。<metaname="viewport"content="width=device-width,initial-scale=1">3.在页面中引入编译好的CSS和JavaScript文件<head><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于弹窗、提示、下拉菜单--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已编译的插件--></head><body></body><scriptsrc="js/bootstrap.bundle.min.js"></script>6.4.4建立第一个Bootstrap页面6.4.4建立第一个Bootstrap页面4.容器类Bootstrap需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。例如：<divclass="container">...</div>演示示例：第一个Bootstrap页面改变浏览器窗口大小，我们会发现页面显示内容随窗口缩放发生了变化，以适应不同浏览器视口尺寸。6.4.4建立第一个Bootstrap页面

<!DOCTYPEhtml><html><head><title>第一个Bootstrap页面</title><metacharset="utf-8">

<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--引入Bootstrap核心CSS文件--><scriptsrc="js/jquery.min.js"></script><!--Bootstrap的JavaScript插件需要引入jQuery--><scriptsrc="js/popper.min.js"></script><!--用于弹窗、提示、下拉菜单--><scriptsrc="js/bootstrap.min.js"></script><!--包括所有已编译的插件--></head><body>演示示例：第一个Bootstrap页面6.4.4建立第一个Bootstrap页面<divclass="jumbotrontext-center"><h1>我的第一个Bootstrap页面</h1><p>改变浏览器大小查看效果!</p></div><divclass="container"><divclass="row"><divclass="col-sm-4"><h3>第一列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第二列</h3><p>bootstrap</p></div><divclass="col-sm-4"><h3>第三列</h3><p>bootstrap</p></div></div></div></body></html>演示示例：第一个Bootstrap页面如何提高页面的加载速度：在HTML代码的末尾处引入JavaScript文件。Bootstrap的JavaScript插件依赖于jQuery，因此在加载这些插件前需要先行去加载jQuery。JavaScript文件的加载顺序依次为jquery-3.5.1.slim.min.js、bootstrap.bundle.min.js。其中，jquery-3.5.1.slim.min.js是Bootstrap4官网使用的简化版的jQuery文件，相比普通版本缺少了Ajax和特效模块。6.4.4在HTML中引入Bootstrap小提示Bootstrap布局容器6.56.5.1初识布局容器布局容器：是Bootstrap中最基本的布局元素，在使用默认网格系统时，布局容器是必需的。作用：它用于容纳、填充一些内容，以及有时需要使内容居中。布局容器包含：.container类和.container-fluid类。在前面讲解的内容中，媒体查询需要使用@media关键字检测设备的宽度变化。在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来检测不同的设备的宽度。6.5.1初识布局容器.container类和.container-fluid类布局容器区别：这两种容器类最大的不同之处在于宽度的设定。.container类可以根据屏幕宽度的不同，利用媒体查询设定固定的宽度，当浏览器窗口大小改变时，页面效果也会随之发生改变。.container-fluid类在不同设备下始终保持宽度为100%，如果一个元素需要占据全部视口时可以使用.container-fluid类。1它在每个响应断点处设置了一个max-width最大宽度.container容器2它在每个响应断点处设置布局容器的宽度为100%.container-fluid容器STEP016.5.1初识布局容器.container类和.container-fluid类在不同设备宽度下页面元素的显示效果新建demo01.html文件，编写HTML代码。<!DOCTYPE

html><html><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0,shrink-to-fit=no">

<link

rel="stylesheet“

href="css/bootstrap.min.css">

<title>布局容器</title></head><body>

<div

class="container-fluid

bg-dark

text-light

mb-1">.container-fluid设置布局容器</div>

<div

class="container

bg-dark

text-light">.container设置布局容器</div></body></html>布局容器STEP02运行程序在浏览器中查看demo01.html文件运行效果。6.5.1初识布局容器演示示例：布局容器

先定一个小目标！了解栅格系统，能够说出栅格系统的作用，能够列举栅格系统的类前缀6.5.2栅格系统6.5.2栅格系统栅格系统：是一个基于12列的布局，它具有的5种响应尺寸分别对应不同的屏幕大小。栅格系统作用：通过一系列的行（row）与列（column）的组合来创建页面布局。建议：开发者可以将内容放入这些创建好的布局中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。响应式栅格系统例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。栅格系统基本使用步骤栅格系统基本使用步骤：Bootstrap栅格系统为不同屏幕宽度定义了不同的类，使用非常方便，直接为元素添加类名即可。行使用样式

.row，列使用样式

.col-*-*，可用于快速创建网格布局。每一行（row）必须包含在布局容器.container类或.container-fluid类中，这样方便为其自动设置外边距（margin）和内边距（padding）。通过行可以创建水平方向的列组，并且只有列（column）可以作为行（row）的直接子元素。例如，可以使用3个.col-xs-4来创建3个等宽的列。内容只能放置于列内，列大于12时，将会另起一行排列。6.5.3栅格基本使用网格系统通过指定横跨的12个可用的列来创建，例如：要创建三个相等的列，则可使用三个.col-*-4。我们也可以根据自己的需要，定义列数，如下所示：1111111111114444866126.5.3栅格基本使用6.5.2栅格系统超小屏幕(<576px)小屏幕(≥576px)中等屏幕(≥768px)大屏幕(≥992px)超大屏幕(≥1200px).container最大容器宽度自动（100%）540px720px960px1140px类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-栅格系统的类前缀栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。通过类前缀设置每列的宽度6.5.3栅格基本使用col-栅格的数量(设置超小设备);col-sm-栅格的数量(设置平板);col-md-栅格的数量(设置桌面显示器);col-lg-栅格的数量(设置大桌面显示器);col-xl-栅格的数量(设置超大桌面显示器);由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。如何利用上面的类来控制列的宽度以及在不同设备上的显示呢？我们来看先创建一行（<d