Web前端技术HTML5+CSS3+响应式设计 课件 第8-10章 css3新增属性、-响应式web设计原理、综合案例

Web前端技术（HTML5+CSS3+响应式设计）第8章CSS3的新增属性问题的导入CSS3是CSS2的升级版本，也是一个新标准，它增加了很多强大的新功能，比如说圆角、阴影、动画、变形等，通过这些属性的设置，可以减少图片的使用，在不使用javaScript情况下，也能实现交互的效果。导入问题教学内容渐变gradient和过渡transition边框圆角border-radius盒子阴影box-shadow变形transfrom分列布局columns动画animations8.1分列布局1、Column-count语法：column-count：列数；

2、Column-width：Column-width：每列宽度，

Columns：复合属性，可以设置宽度和列数。3.column-gap：<length>|normal

设置或检索对象的列与列之间的间隙

如：column-gap:normal;column-gap:40px;4.column-rule：[column-rule-width]||[column-rule-style]||[column-rule-color]设置或检索对象的列与列之间的边框。复合属性。相当于border属性5.column-span：none|all

设置或检索对象元素是否横跨所有列。

说明：edge、chrome50、ie10以上都支持多列属性。InternetExplorer9以及更早的版本不支持多列属性。部分版本需要加指定浏览器的前缀：chrome、safari、opear为-webkit-，firefox为-moz-。8.2文字阴影text-shadow给文字设置阴影，减少图片的使用语法格式：text-shadow:X轴偏移量Y轴偏移量

阴影模糊半径

阴影颜色；1、X轴偏移量，必选项，设置水平阴影的大小，正值阴影向右投影，负值向左投影。2、Y轴偏移量，必选项，垂直方向阴影的大小，正值阴影向下投影，负值向上投影。3、阴影模糊半径，可选项，阴影的模糊距离，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。4、阴影颜色，可选项，阴影的颜色，如果缺省，则浏览器会取默认色，但各浏览器默认色不一样，不建议缺省。5、可以叠加多个阴影，用逗号分隔，以增加文字的立体的效果8.3box-shadow盒阴影box-shadow:投影方式X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色；投影方式：可选项，它有2个取值：outset：默认值，它的投影方式是外阴影；Inset：它的投影方式为内阴影。X轴偏移量，必选项，是指阴影水平偏移量，其值可以是正负值Y轴偏移量，必选项，是指阴影的垂直偏移量，其值也可以是正负值阴影模糊半径，可选项，但其值只能是为正值，为0时，阴影不具有模糊效果阴影扩展半径，可选项，其值可以是正负值，如果值为正，阴影扩大，负值，则缩小；阴影颜色，可选，如果不设定任何颜色时，浏览器会取默认色，建议不要省略此参数。可以叠加多个阴影，用逗号分隔，以增加阴影的效果。CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。CSS3的圆角边框使用border-radius

属性来实现，这是一个复合属性，基本语法如下border-radius:1-4length|%/1-4length|%;8.4CSS3圆角边框

border-radiusLength：半径单位，不可为负值，单位可以是px、em、rem或百分比。如果“/”前后的值都存在，那么“/”前面的值表示水平半径，“/”后面值表示垂直半径。如果没有“/”，则表示水平和垂直半径相等。如果给定4对值，则分别表示top-left、top-right、bottom-right、bottom-left的4个角的半径如果给定3对值。则第1个值为top-left，第2个值为top-right，bottom-left，第3个值为bottom-right如果给定2对值。则第1个值为top-left和bottom-right，第2个值为top-right，bottom-left如果只给出一个值，则4个角的半径都相同。border-radiusborder-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：其他写法border-top-left-radius:<length>

<length>//左上角border-top-right-radius:<length>

<length>//右上角border-bottom-right-radius:<length>

<length>//右下角border-bottom-left-radius:<length>

<length>//左下角border-radius8.5渐变Gradient渐变色指在两个或多个颜色之间平稳的过渡的效果，CSS3的渐变分为linear-gradient（线性渐变）和radial-gradient（径向渐变），使用的是background或background-images属性，不能用background-color属性。1、线性渐变，指以线性角度控制渐变。语法格式：linear-gradient([<angle>],<color-stop>[,<color-stop>]……)说明：color：必选项，是指渐变的颜色，至少要2种以上的颜色。stop：可选性，指渐变开始的位置，缺省则均匀渐变。angle：可选性，指的是渐变的线性角度，取值有两种:一种是角度（单位为deg）;另外一种是使用关键字，linear-gradient（1）颜色均匀间隔的渐变（2）颜色不均匀分布的渐变（3）重复的线性渐变radial-gradient径向渐变，指的是颜色从内到外进行的圆形或椭圆渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。语法格式如下background:radial-gradient(position,shapesize,color1-stop,color2-stop…)position：可选项，用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样，如缺省，默认为中心点。shape：可选项，渐变的形状。取值为值circle或ellipse，circle表示圆形，ellipse表示椭圆形。默认值是ellipse。size：可选项，渐变的尺寸大小。color：必选项，定义渐变的颜色，至少有2种以上的颜色。（1）颜色均匀间隔的径向渐变 div{ width:150px; height:100px; background:radial-gradient(red,yellow,#ccc); }（2）颜色不均匀分布的径向渐变div{ width:100px; height:100px; background:radial-gradient(circle,red5%,yellow40%,#ccc70%); }radial-gradientCSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。8.6CSS3过渡transitions基本语法如下：transition:[property][duration][timing-function][delay];InternetExplorer10、Firefox、Opera和Chrome都支持transition属性，InternetExplorer9以及更早版本的浏览器不支持transition属性。（1）property：必选项，给定要使用过渡的CSS属性名称，取值为：none：无，没有属性使用该效果all：所有css属性都使用过渡效果property：具体过渡效果的css属性名：如width、color等（2）duration：必选项，给定过渡效果所花费时间，单位毫秒，默认是0，意味着没有效果。（3）timing-function：可选性，定义过渡效果的速度曲线。取值为：Linear：规定以相同速度开始至结束的过渡效果ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in：

规定以慢速开始的过渡效果ease-out 规定以慢速结束的过渡效果ease-in-out：规定以慢速开始和结束的过渡效果（4）delay：可选性，给定过渡开始之前需要等待的时间，单位毫秒，默认是0。transitionstransform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D转换。transform属性的基本语法如下所示：transform：none|transform-functions;旋转倾斜缩放移动8.7CSS3变形transform属性

描述参数说明rotate(angel)旋转元素。angel是度数值，代表旋转角度。skew(x-angel,y-angel)倾斜元素。angel是度数值，代表倾斜角度。skewX(angel)沿着x轴倾斜元素。skewY(angel)沿着y轴倾斜元素。scale(x，y)缩放元素，改变元素的高度和宽度。代表缩放比例，取值包括正数、负数和小数。scaleX(x)改变元素的宽度。scaleY(y)改变元素的高度。translate(x,y)移动元素对象，基于x和y坐标重新定位元素。元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数。translateX(x)沿着x轴移动元素。translateY(y)沿着y轴移动元素。

transform函数一个完整的CSSanimations由两部分构成：一组定义的动画关键帧调用动画@keyframes规则Animation8.8动画animations定义动画在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。@keyframes规则的语法格式如下所示：@keyframes

animationname{

keyframes-selector{css-styles;}}animationname：表示当前动画的名称，必选项。keyframes-selector：关键帧选择器，描述关键帧的位置值，取值范围从0%~100%，也可以是关键字from或者to。其中from等同于0%，表示动画的开始，to等同于100%。动画创建好后，使用animation属性调用动画。它的基本语法如下所示：animation:[name][duration][timing-function][delay][iteration-count][direction][fill-modeplay-state];InternetExplorer10、Firefox16.0、chrome43.0、safari9.0以上版本都支持@keyframes

规则和animation属性。InternetExplorer9，以及更早的版本，不支持@keyframe

规则或animation属性。调用动画animationsAnimation属性属性

描述name@keyframes中定义的动画名称，取值none，则无动画效果，必选项。duration动画完成一个周期所花费时间，单位毫秒，默认是0，必选项timing-function规定动画的速度曲线，取值同transition–timing-function的值，默认是"ease"，可选。delay规定动画开始前的延迟，单位毫秒，可选，默认是0。iteration-count规定动画被播放的次数，取值为n，默认是1，infinite为无限播放，可选direction规定动画播放方向，默认是"normal"，可选。reverse倒序播放,alternate交替播放alternate-reverse反向交替播放play-state规定动画是否正在运行或暂停，默认是"running"，paused动画暂停播放，可选fill-mode是指给定动画播放前后应用元素的样式。可选。none动画执行前后不改变任何样式forwards保持目标动画最后一帧的样式backwards保持目标动画第一帧的样式both动画将会执行forwards和backwards执行的动作

Animation属性8.9案例分析照片墙分析照片墙特效内容为：照片随意的摆放在页面的不同位置，并且都有不同角度的倾斜和相互遮挡，当鼠标移动到某一张照片上时，此照片缓慢的由倾斜状态转变为端正状态，并且放大一定比例显示在最上面，鼠标移走后，又恢复为原状态。用到的知识点：1、box-shadow：给元素的边框添加阴影的效果2.

position：给元素定位，主要用到绝对定位3.

z-index:设置元素的上下层显示4.

transition：设置元素由样式1转变为样式2的过程所需时间5.

transform：使元素变形的属性，其配合rotate(旋转角度)、scale(改变大小)、skew(扭曲元素)等参数一起使用小结掌握css3新增属性的语法格式掌握它们的使用方法综合运用css属性设计效果先模仿，勤练习，再创新。Web前端技术（HTML5+CSS3+响应式设计）第9章

响应式web设计原理问题的导入前面我们学习的网页设计主要是针对pc端，随着移动互联的发展，移动互联网成为了Internet的重要组成部分。如何让网页适应不同的终端设备，在不同的终端上显示相同的效果，这就是响应式设计要解决的问题。导入问题学习目标9.1理解视口的概念9.2掌握CSS3媒体查询9.3掌握弹性盒布局9.4掌握网格布局手机屏幕分辨率不同，宽度高度就不同，同一张图片在不同的手机上显示的位置和大小，在视觉存在差异，我们需要在不同设备上进行适配，使得相同的网页在不同屏幕上显示的效果一致，这就是视口要解决的问题。9.1.1视口的概念在PC端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致移动端则较为复杂，它涉及到三个视口：布局视口（LayoutViewport）、视觉视口（VisualViewport）和理想视口（IdealViewport）。。9.1.1视口的概念移动端浏览器厂商必须保证即使在窄屏幕下网页的页面也可以很好展示，他们将视口的宽度设计得比屏幕宽度宽出很多。这样在移动端，视口与移动端浏览器屏幕宽度就不再关联，而是完全独立的了。我们称它为布局视口，在这种情况下，一般通过手动缩放网页，来查看网页的内容。布局视口（layoutviewport）视觉视口（visualviewport）视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口，布局视口还是保持在原来的宽度。图中红色的箭头代表视觉视口。理想视口（idealviewport）布局视口的默认宽度并不是一个理想的宽度。对设备而言是最理想的布局视口尺寸就是设备宽度，用户无需进行缩放。定义理想视口是浏览器的工作：<metaname=“viewport”content=“width=device-width”>该语句通知浏览器布局视口的宽度应该和理想视口宽度一致<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximm-scale=1.0">9.1.2如何设置视口

属性名取值描述widthdevice-width定义视口的宽度为设备的宽度initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩小最小比例，可省略maximum-scale[0.0-10.0]定义放大最大比例，可省略user-scalableyes/no定义是否允许用户手动缩放页面，默认值yes9.1.3图像自适应在响应式设计中，图像要随着屏幕的缩放而自动缩放.img{display:inline-block;height:auto;max-width:100%;}9.1.3文字自适应在css3中引进了一个新的相对单位rem，它的相对只是HTML根元素。所有浏览器的默认字体都是16px，所有未经调整的浏览器都符合:16px=1em=1rem。那么10px=0.625em=0.625em。为了简化font-size的换算，在html选择器中声明font-size=62.5%，这就使rem值变为16px*62.5%=10px,即10px=1rem,也就是说只需要将原来的px数值除以10，就可以换算成rem。在CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。可以针对不用的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，特别是针对响应式web设计。媒体查询语句由媒体类型和条件表达式组成。9.2媒体查询语法格式：@mediamediatypeand|not|only(mediafeature){Csscode}说明：1、媒体类型(media-type)：all——所有设备screen——用于电脑屏幕，平板电脑，智能手机等。print——用于打印机和打印预览。speech——应用于屏幕阅读器等发声设备网页设计一般只针对screen。9.2媒体查询2、媒体特征规则(media-feature-rule)max-width（最大宽度）、min-width（最小宽度）、max-height（最大高度）、min-height（最小高度）。3、not、only和and关键字的含义not：对整个媒体查询的含义取反。only：仅在整个查询匹配时才会生效。and：用于将多个媒体查询组合成一条媒体查询，它们都是可选的。但是，如果使用not或only，则还必须指定媒体类型。当浏览器尺寸小于960px时候的代码@mediascreenand(max-width:960px){body{background:red;}}当浏览器尺寸大于960px时候的代码：@mediascreenand(min-width:960px){body{background:orange;}}9.2媒体查询混合使用上面的用法：@mediascreenand(min-width:960px)and(max-width:1200px){body{background:yellow;}}上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS媒体查询9.2.3汉堡菜单的制作随着移动平台浏览量的增长越来越多，网站为了适应移动平台的浏览体验，大部分响应式网页都喜欢采用汉堡包菜单这种形式来展示网站的导航。详见代码demo9-4.html9.3弹性盒布局

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的项目进行排列、对齐和分配空白空间。即便容器中项目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的项目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的项目也会被动态地调整。9.3.1什么是弹性布局把display属性的值为flex或inline-flex则容器为弹性容器。弹性盒模型由弹性容器(Flexcontainer)、弹性子元素(Flexitem)和轴三部分组成.弹性容器内子元素为弹性子元素。弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。9.3.2弹性布局9.3.2弹性容器flex-directionflex-wrapflex-flowjustify-contentalign-items1.flex-direction：设置容器内元素的排列方向，语法格式：flex-direction:row|row-reverse|column|column-reverse说明：row：盒子内的元素按X轴方向顺序排列，默认值。row-reverse：盒子内的元素按X轴方向逆序排列。column：盒子内的元素按Y轴方向顺序排列。column-reverse：盒子内的元素按Y轴方向逆序排列。9.3.2弹性容器属性2.flex-wrap，用于设置弹性盒子的子元素换行方式。语法格式：flex-wrap:nowrap|wrap|wrap-reverse说明：nowrap(default):不换行，默认值。wrap:换行，第一行在上方wrap-reverse:换行，反转排列。Flex-wrapflex-flow属性是flex-direction和flex-wrap属性的复合属性。flex-flow:flex-directionflex-wrap|initial|inherit;默认值： rownowrapFlex-flow

语法格式：justify-contentjustify-content：定义项目在X轴方向上的对齐方式。语法格式：justify-content:flex-start|flex-end|center|space-between|

space-around;说明：flex-start(default):左对齐flex-end:右对齐center:居中space-between:两端对齐，项目之间的间隔都相等

space-around:每个项目两侧的间隔相等，但项目之间的间隔是项目与边框的间隔的两倍。align-items5.align-items：定义项目在Y轴方向上的对齐方式。语法格式：align-items:flex-start|flex-end|center|baseline|stretch;说明：stretch(default):如果项目未设置高度或高度为auto,则将占满整个容器的高度flex-start:上对齐flex-end:下对齐center:垂直居中对齐baseline:项目的第一行文字的baseline(基线)对齐9.3.3弹性元素orderflex-growflex-shrinkflex-basisflexalign-self1.order：定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负。语法如下：item{order:<integer>;}order属性值相等的项目按照书写顺序排列。orderflex-grow

2.flex-grow定义项目的放大倍数，不能为负，语法如下：item{flex-grow:<number>;}number默认为0。即使容器存在剩余空间，项目也不放大。如果所有项目的flex-grow都为1，则它们将等分剩余空间。如果一个项目的flex-grow为2,其他项目的flex-grow都为1，则前者占据的剩余空间是后者的2倍flex-shrink定义项目的缩小比例，不能为负。语法如下：item{flex-shrink:<number>;}默认值为1。即如果空间不足，项目将缩小。如果所有项目的flex-shrink都为1，则当空间不足时它们都将等比例缩小。如果一个项目的flex-shrink为0，其他项目的flex-shrink都为1，则当空间不足时前者不缩小，后者缩小。flex-basis定义了项目在主轴方向的初始大小。语法如下：item{flex-basis:<length>|auto;}Length：它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间.auto：默认值，项目的本来大小flex属性是flex-grow（扩展比率），flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。默认值为01auto。后两个属性可选.flexalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}auto(默认值)：即与父元素的align-items一致。其他取值与align-items属性完全一致。align-self9.4网格布局网格布局是一种新型的二维布局模型，它将容器划分成了“行”和“列”，由行和列组成单元格，然后将元素放在单元格里，从而达到了布局的目的。当一个HTML元素将display属性设置为grid或inline-grid后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素，也称项目。容器内划分网格的线，称为"网格线"（gridline），水平网格线称为行（row），垂直网格线称为列（column）。正常情况下，正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线9.4.1什么是网格布局9.4.2网格的容器1.grid-template-columns属性：定义网格容器的列数和每列的宽宽，值以空格分隔，可以是固定值，百分比、关键字或者函数固定列宽，百分比列宽关键字auto，渲染引擎会自动根据浏览器窗口计算每列的宽度关键字fr：网格布局引入的新长度单位，1fr单位代表网格容器中可用空间的一等份关键字auto-fill：自动填充，适用于列宽固定，而屏幕宽度不固定的情况函数repeat(n，值)：n表示要重复的次数，第2个参数表示要重复的值或某种模式函数minmax(值1，值2)：定义列宽不小于值1，不大于值2。3.设置网格线间隔的属性grid-row-gap：设置行与行的间隔，属性值一般为像素grid-column-gap：设置列与列的间隔，属性值一般为像素grid-gap：是grid-column-gap和grid-row-gap的合并简写形式，语法格式为：grid-gap:<grid-row-gap><grid-column-gap>;9.4.2网格的容器2.grid-template-rows属性：设置网格的每一行的行高，单位一般为像素9.4.3网格元素1.grid-column属性定义了网格元素列的开始和结束位置grid-column-start：属性定义网格元素列的开始位置grid-column-end：属性定义网格元素列的结束位置grid-column是以上2个属性的简写属性，可以用列号来设置，也可以使用关键字"span"来定义元素将跨越的列数9.4.3网格元素2.grid-row定义了网格元素行的开始和结束位置。grid-row-start网格元素开始的行线grid-row-end网格元素结束的行线注意：grid-row是以上2个属性的简写。可以用行号来设置网格元素，也可以使用关键字"span"来定义元素将跨越的行数。3.grid-area属性是

grid-row-start,grid-column-start,grid-row-end以及grid-column-end属性的简写。例如修改demo9-10.html中的代码如下.one{grid-area:1/1/4/2;}，设置元素one从第1根行线和第1列线开始，到第4根行线和第2列线结束.two{grid-area:1/4/span4/span2;}设置元素two从第1行开始，跨越4行，从第4列开始跨越2列.grid-area属性可以对网格元素进行命名，命名的网格元素可以通过容器的grid-template-areas属性来引用，先命名后引用。9.4.3网格元素9.5.响应式案例9.5.响应式案例1、.header类为导航，设置媒体查询小于等于640px，变为汉堡菜单。2、.banner为广告区域，放置广告背景图和广告信息等，在小于等于640px时，改变广告信息区域大小和字体大小、边距等，以适应屏幕的宽度3、.welcome类为店铺欢迎语。4、.con类为内容区域，设置为弹性盒容器，其中有4个div，为弹性元素，在pc端按横轴方向顺序排序，使用媒体查询，在浏览器窗口小于等于768px时，变成2列排列，小于等于640px时，变成1列排列。5、.footer为页脚。本章小结掌握视口的概念掌握媒体查询掌握弹性布局通过视口的设置使得页面能适应不同终端的屏幕；使用弹性盒布局或网格布局能实现页面由多列变化成一