diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/20211116Html+CSS3+04/text-else.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/20211116Html+CSS3+04/text-else.html" new file mode 100644 index 0000000000000000000000000000000000000000..79e956c2b4f5e0e334d9d7591050f3f3164a5049 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/20211116Html+CSS3+04/text-else.html" @@ -0,0 +1,79 @@ + + + + + + + Document + + + +

text else attr

+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/02-canvas.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/02-canvas.md" new file mode 100644 index 0000000000000000000000000000000000000000..ef83b36baf7f14fae17fbbb9895d4ebed9b7878b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/02-canvas.md" @@ -0,0 +1,432 @@ +# Canvas + +## 课前回顾 + +上节课,我们学习了H5的新的语义标签,和多媒体标签。同学们需要慢慢更改自己写HTML代码的习惯,尽量写出具有合理语义结构的代码。 + +## 本节目标 + +- 了解Canvas是什么 +- 能够在画布上绘制基本图形 +- 能够实现简单的动画效果 + +## 1. 概述 + +``元素用语生成图像。它本身就像一个画布, JavaScript 通过操作它的 API,在上面生成图像。它的底层是一个个像素,基本上``是一个可以用 JavaScript 操作的位图(bitmap)。 + +使用 Canvas API 之前,需要在网页里面新建一个``元素。 + +```html + + 您的浏览器不支持 Canvas + +``` + +如果浏览器不支持这个 API,就会显示``标签中间的文字:“您的浏览器不支持 Canvas”。 + +每个``元素都有一个对应的`CanvasRenderingContext2D`对象。Canvas API 就定义在这个对象上面。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +``` + +> 我们会发现,canvas相关属性和方法在VSCode里面并没有给我们提示。这样不方便我们学习。 +> +> **解决方法** +> +> ```js +> /** @type {HTMLCanvasElement} */ +> // 一定要放在下面这个语句前面 +> var canvas = document.getElementById('myCanvas'); +> ``` + +上面代码中,``元素节点对象的`getContext()`方法,返回的就是`CanvasRenderingContext2D`对象。 + +注意,Canvas API 需要`getContext`方法指定参数`2d`,表示该``节点生成 2D 的平面图像。如果参数是`webgl`,就表示用于生成 3D 的立体图案,这部分属于 WebGL API。 + +## 2. 绘制图形 + +Canvas 画布提供了一个作图的平面空间,该空间的每个点都有自己的坐标。原点`(0, 0)`位于图像左上角,`x`轴的正向是原点向右,`y`轴的正向是原点向下。 + +### 2.1 路径 + +以下方法和属性用来绘制路径。 + +```js +let canvas = document.getElementById('myCanvas'); +let ctx = canvas.getContext('2d'); +``` + +- `ctx.beginPath()`:开始绘制路径。 +- `ctx.closePath()`:关闭路径,它会试图从当前路径的终点连一条路径到起点,让整个路径闭合起来。如果图形已经封闭,或者只有一个点,那么此方法不会产生任何效果。 +- `ctx.moveTo(x, y)`:设置路径的起点,即将一个新路径的起始点移动到`(x, y)`坐标。 +- `ctx.lineTo(x, y)`:使用直线从当前点连接到`(x, y)`坐标。 +- `ctx.fill()`:在路径内部填充颜色(默认为黑色)。 +- `ctx.stroke()`:路径线条着色(默认为黑色)。 +- `ctx.fillStyle`:指定路径填充的颜色和样式(默认为黑色)。 +- `ctx.strokeStyle`:指定路径线条的颜色和样式(默认为黑色)。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +console.log(ctx); +// 开始绘制路径 +ctx.beginPath(); +// 将初始位置设定到(100, 100)位置 +ctx.moveTo(100, 100); +// 连线到(200, 200)的位置 +ctx.lineTo(200, 200); +// 再连线到(100,200)的位置 +ctx.lineTo(100, 200); +``` + +上面代码只是确定了路径的形状,画布上还看不出来,因为没有颜色。所以还需要着色。 + +```js +ctx.fill(); +// 或者 +ctx.stroke(); +``` + +上面代码中,这两个方法都可以使得路径可见。`fill()`在路径内部填充颜色,使之变成一个实心的图形;`stroke()`只对路径线条着色。 + +可以使用`fillStyle`和`stokeStyle`属性指定其他颜色。 + +```js +ctx.fillStyle = 'red'; // 属性设置需要放在方法执行前面,不然无法生效。 +ctx.fill(); + +// 或者 +ctx.strokeStyle = 'red'; +ctx.stroke(); +``` + +### 2.2 线型 + +以下的方法和属性控制线条的视觉特征。 + +- `ctx.lineWidth`:指定线条的宽度,默认为`1.0`。 +- `ctx.lineCap`:指定线条末端的样式,有三个可能的值: + - `butt`:默认值,末端为矩形。 + - `round`:末端为圆形。 + - `square`:末端为突出的矩形,矩形宽度不变,高度为线条宽度的一半。 +- `ctx.lineJoin`:指定线段交点的样式,有三个可能的值: + - `round`:交点为扇形。 + - `bevel`:交点为三角形底边。 + - `miter`:默认值,交点为菱形。 +- `ctx.miterLimit`:指定交点菱形的长度,默认为`10`。该属性只在`lineJoin`属性的值等于`miter`时有效。 +- `ctx.getLineDash()`:返回一个数组,表示虚线里面线段和间距的长度。 +- `ctx.setLineDash()`:数组,用于指定虚线里面线段和间距的长度。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(100, 100); +ctx.lineTo(200, 200); +ctx.lineTo(100, 200); + +ctx.lineWidth = 3; +ctx.lineCap = 'round'; // 线条末端设置为圆角 +ctx.lineJoin = 'round'; // 线条交接点设置为圆角 +ctx.setLineDash([15, 5]); // 设置为虚线 +ctx.stroke(); +``` + +### 2.3 矩形 + +以下方法用来绘制矩形。 + +- `ctx.rect()`:绘制矩形路径。 +- `ctx.fillRect()`:填充一个矩形。 +- `ctx.strokeRect()`:绘制矩形边框。 +- `ctx.clearRect()`:指定矩形区域的像素都变成透明。 + +上面四个方法个格式都一样,都接受四个参数,分别是矩形左上角的横坐标和纵坐标,矩形的宽和高。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.rect(10, 10, 100, 100); // 绘制路径 +ctx.fill(); // 着色,实心矩形 +// 空心矩形 +ctx.rect(110, 10, 100, 100); +ctx.stroke(); // 线条着色,空心矩形 +``` + +`fillRect()`用来向一个矩形区域填充颜色: + +```js +ctx.fillStyle = 'green'; +ctx.fillRect(110, 110, 100, 100); // 一步到位,绘制路径并填色了 +``` + +`strokeRect()`用来绘制一个矩形区域的边框。 + +```js +ctx.strokeStyle = 'blue'; +ctx.strokeRect(110, 10, 100, 100); // 一步到位,绘制路径并填色了 +``` + +`clearRect()`用于擦除指定矩形区域的像素颜色,等同于把早先的绘制效果都去除。 + +```js +ctx.fillRect(10, 10, 100, 100); // 绘制一个实心矩形 +ctx.clearRect(15, 15, 90, 90); // 擦除一个矩形 +``` + +我们可以看到`clearRect()`会将参数设定的区域的内容擦除。 + +### 2.4 弧线 + +以下方法用于绘制弧形。 + +- `ctx.arc()`:通过指定圆心和半径绘制弧形。 +- `ctx.arcTo()`:通过制定两根切线和半径绘制弧形。 + +**`arc()`语法:** + +``` +ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); +``` + +![](images/arc.gif) + +- `x, y` :是圆心的坐标 +- `radius`:是半径 +- `startAngle` 和`endAngle`则是扇形的起始角度和终止角度(以弧度表示) +- `anticlockwise`:表示做图时,应该逆时针画(true)还是顺时针画(false),这个参数用来控制扇形的方法(比如上半圆还是下半圆) + +绘制一个实心圆:半径为50, 起始角度为0, 终止角角度为2 * PI的完整的圆。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +// 开始绘制 +ctx.beginPath(); // 绘制弧线,需要调用beginPath()方法 +ctx.arc(60, 60, 50, 0, Math.PI*2, true); +ctx.fill(); +``` + +绘制一个空心圆: + +```js +ctx.beginPath(); +ctx.arc(100, 20, 50, 0, Math.PI * 2, false); +ctx.stroke(); +``` + +利用`closePath()`方法,可以绘制一个缺了一块的圆。 + +```js +ctx.beginPath(); +ctx.arc(100, 20, 50, 0, Math.PI * 1.7, false); +ctx.closePath(); // 关闭绘制,会将绘制终点和起点用线连接起来。 +ctx.stroke(); +``` + +**`arcTo()`**用来绘制圆弧,需要给出两个点的坐标,当前点与第一个点形成一条直线,第一个点与第二个点形成另一条直线,然后画出与这两根直线相切的弧线。 + +**语法** + +``` +ctx.arcTo(x1, y1, x2, y2, radius); +``` + +- (x1, y1):第一个点的坐标 +- (x2, y2):第二个点的坐标 +- radius:半径 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(20, 20); // 创建开始点 +ctx.arcTo(100, 20, 100, 100, 25); // 根据给出的两个点坐标,绘制弧线 +ctx.lineTo(100, 100); // 弧线绘制完成后,当前点在弧线与第二条线的切点上。再画一条线,将这两点连起来。 +ctx.stroke(); +``` + +### 2.5 文本 + +以下方法和属性用于绘制文本。 + +- `ctx.fillText()`:在指定位置绘制实心字符。 +- `ctx.strokeText()`:在指定位置绘制空心字符。 +- `ctx.font`:指定字型大小和字体,默认值为`10px sans-serif`。 +- `ctx.textAlign`:文本的对齐方式,默认值为`start`。 + +#### 2.5.1 `fillText()` + +`fillText()`用来绘制实心字符。 + +``` +ctx.fillText(text, x, y [, maxWidth]) +``` + +该方法接受4个参数: + +- `text`:所要填充的字符串。 +- `x`,`y`:文字起点的坐标,单位像素。 +- `maxWidth`:文本的最大像素宽度。该参数可选,如果省略,则表示宽度没有限制。如果文本实际长度超过这个参数设置的值,那么浏览器将尝试用较小的字体填充。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +ctx.fillText('Hello world', 50, 50); +``` + +上面代码在`(50, 50)`位置写入字符串`Hello world`。 + +**注意:**`fillText()`方法不支持文本断行,所有文本一定出现在一行内。如果要生成多行文本,只能调用多次`fillText()`方法。 + +#### 2.5.2 `strokeText()` + +`strokeText()`方法用来添加空心字符,它的参数与`fillText()`一致。 + +```js +ctx.strokeText('Hello world', 50, 50); +``` + +#### 2.5.3 `font` + +上面两种方法绘制的文本,默认都是`10px`大小、`sans-serif`字体。`font`属性可以改变字体设置。该属性的值是一个字符串,使用CSS的`font`属性即可。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = 'Bold 20px Arial'; +ctx.fillText('Hello world', 50, 50); +``` + +#### 2.5.4 `textAlign` + +`textAlign`属性用来指定文本的对齐方式。它可以取以下几个值。 + +- `left`:左对齐 +- `right`:右对齐 +- `center`:居中 +- `start`:默认值,起点对齐(从左到右的文本为左对齐,从右到左的文本为右对齐) +- `end`:结尾对齐(从左到右的文本为右对齐,从右到左的文本为左对齐) + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = 'Bold 20px Arial'; +ctx.textAlign = 'center'; +ctx.fillText('Hello world', 50, 50); +``` + +### 2.6 渐变色和图像填充 + +以下方法用于设置渐变色效果和图像填充效果。 + +- `ctx.createLinearGradient()`:定义线性渐变样式。 +- `ctx.createRadialGradient()`:定义辐射渐变样式。 + +#### 2.6.1 `createLinearGradient()` + +`createLinearGradient()`方法按照给定直线,生成线性渐变的样式。 + +``` +ctx.createLinearGradient(x0, y0, x1, y1); +``` + +- `x0, y0`:设定起点的坐标 +- `x1, y1`:设定终点的坐标 + +通过不同的坐标值,可以生成从上至下,从左到右的渐变等等。 + +该方法的返回值是一个`CanvasGradient`对象,该对象只有一个`addColorStop()`方向,用来指定渐变点的颜色。`addColorStop()`方法接受两个参数,第一个参数是0到1之间的一个位置量,0表示起点,1表示终点,第二个参数是一个字符串,表示CSS颜色。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var gradient = ctx.createLinearGradient(0, 0, 200, 0); +gradient.addColorStop(0, 'green'); +gradient.addColorStop(1, 'white'); +ctx.fillStyle = gradient; // 将渐变样式赋值给fillStyle属性 +ctx.fillRect(10, 10, 200, 100); // 填充矩形区域 +``` + +#### 2.6.2 `createRadialGradient()` + +此方法定义一个辐射渐变,需要指定两个圆。 + +``` +ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) +``` + +- `x0, y0, r0`:辐射起始的圆的圆心坐标和半径 +- `x1, y1, r1`:辐射终止的圆的圆心坐标和半径 + +该方法的返回值也是一个`CanvasGradient`对象。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); +gradient.addColorStop(0, 'white'); +gradient.addColorStop(1, 'green'); +ctx.fillStyle = gradient; +ctx.fillRect(0, 0, 200, 200); +``` + +## 3. 动画效果 + +通过改变坐标,很容易在画布 Canvas 元素上产生动画效果。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var posX = 20; +var posY = 100; + +setInterval(function () { + ctx.fillStyle = 'black'; + ctx.fillRect(0, 0, canvas.width, canvas.height); // 将画布背景色设置为黑色 + + posX += 1; + posY += 0.25; + + ctx.beginPath(); + ctx.fillStyle = 'white'; + + ctx.arc(posX, posY, 10, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fill(); +}, 30); +``` + +上面代码会产生一个小圆点,每隔30毫秒就向右下方移动的效果。 + +`setInterval()`函数的一开始,将画布重新渲染黑色底色,是为了抹去是上一步的小圆点。 + +上面例子通过设置圆心坐标,可以产生各种运动轨迹。下面是先上升后下降的例子。 + +```js +var vx = 10; +var vy = -10; +var gravity = 1; +setInterval(function() { + postX += vx; + postY += vy; + vy += gravity; + // ... +}, 30) +``` + +## 练习 + +同学课下自己练习雪花飘落的效果。这个效果网上可以看到很多参考答案,希望大家参考别人的代码,自己来实现这个效果。 + +> 实践出真章,只有多练,才能能好的理解canvas的方法和属性的作用和效果。一开始学习模仿别人是很正常的事情,通过别人的代码,理解别人的设计思路。这就是经验。 diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/images/arc.gif" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/images/arc.gif" new file mode 100644 index 0000000000000000000000000000000000000000..4b3e7ee9fbf17abd9d6448e9d77b7f48f2af984b Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/courseware/images/arc.gif" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/action.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/action.html" new file mode 100644 index 0000000000000000000000000000000000000000..de161bf7d36ebb27463c66ed09b738f133351c42 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/action.html" @@ -0,0 +1,40 @@ + + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arc.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arc.html" new file mode 100644 index 0000000000000000000000000000000000000000..2d5b360b7a57a3f462bfc7ead5e9aed901a1c4fb --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arc.html" @@ -0,0 +1,46 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arcTo.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arcTo.html" new file mode 100644 index 0000000000000000000000000000000000000000..5d36609a2651b41b4066c021c7a6776bc988c60b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/arcTo.html" @@ -0,0 +1,41 @@ + + + + + + + + Document + + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..e5e2ba81555fc02615226a151cbbfc1a3a56486e --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/demo01.html" @@ -0,0 +1,28 @@ + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/line.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/line.html" new file mode 100644 index 0000000000000000000000000000000000000000..a6e5d2c1054c3815a2286860123279fbcc153a20 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/line.html" @@ -0,0 +1,55 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/linearGradient.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/linearGradient.html" new file mode 100644 index 0000000000000000000000000000000000000000..7ebc87ad653a390b183c2701a63dc9017a7f6e3c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/linearGradient.html" @@ -0,0 +1,42 @@ + + + + + + + + Document + + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/rect.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/rect.html" new file mode 100644 index 0000000000000000000000000000000000000000..b837ef320f624964846feb8bd6326aace1e0e5c6 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/rect.html" @@ -0,0 +1,44 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/text.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/text.html" new file mode 100644 index 0000000000000000000000000000000000000000..b6f0eaf81cb1b2067e4ff33218e0fb37ca3218ec --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/H5+CSS3_02/example/text.html" @@ -0,0 +1,38 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..b562cffb5b20c7e2491f45c448912f866c4af0aa --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" @@ -0,0 +1,286 @@ +# CSS 选择器和盒模型 + +## 本节目的 + +1. 掌握 CSS 盒子模型 +2. 掌握 CSS 选择器的使用 + +CSS3 是最新的 CSS 的标准。它完全向后兼容,即它兼容之前标准的属性。 + +为了更加方便大家学习CSS相关的内容,我们将CSS 拆分为“模块”。本课程涉及如下模块的学习,这些模块里面既包含了CSS3之前的属性,和CSS3新增的属性。 + +- 选择器 +- 盒模型 +- 背景和边框 +- 文字特效 +- 2D/3D转换 +- 过渡 +- 动画 +- 布局 +- 媒体查询 + +## CSS 究竟是怎样工作的? + +当浏览器展示一个文件的时候,它必须兼顾文件的内容和文件的样式信息,下面我们会了解到它处理文件的标准的流程。下面的步骤是浏览加载网页的简化版本,而且不同的浏览器在处理文件的时候会有不同的方式,但是下面的步骤基本都会出现。 + +1. 浏览器载入HTML文件。 +2. 将HTML文件转化为一个 DOM。 +3. 接下来,浏览器会拉去该HTML相关的大部分资源,比如图片、视频和CSS样式。JavaScript 则会稍后进行处理。 +4. 浏览器拉取到 CSS 之后会进行解析,根据选择器的不同类型(比如element、id、class等等)把他们分类。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如标签选择器,类选择器,id选择器等)应用在对应的DOM的节点上,并添加节点依赖的样式。这个步骤称为渲染树。 +5. 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。 +6. 网页展示在屏幕上(这一步被称为着色)。 + +![](images/03-loadcss.png) + +## 1. 选择器 + +### 1.1 基本选择器 + +| 选择器 | 名称 | 版本 | 描述 | +| ------ | ---------- | ---- | ----------------------------- | +| * | 通配选择器 | CSS2 | 匹配所有元素 | +| E | 标签选择器 | CSS1 | 匹配页面上对应的标签元素 | +| #id | id选择器 | CSS1 | 通过标签的id属性值匹配元素 | +| .class | 类选择器 | CSS1 | 通过标签的class属性值匹配元素 | + +### 1.2 关系选择器 + +| 选择器 | 名称 | 版本 | 描述 | +| ------ | ---------- | ---- | -------------------------------- | +| E F | 后代选择器 | CSS1 | 匹配E标签内的所有匹配的F元素。 | +| E>F | 子代选择器 | CSS2 | 选择父元素是 E 的所有 F 元素。 | +| E+F | 相邻选择器 | CSS2 | 选择紧跟 E 元素的首个 F 元素。 | +| E~F | 兄弟选择器 | CSS3 | 选择前面有 E 元素的每个 F 元素。 | + +### 1.3 属性选择器 + +| 选择器 | 版本 | 描述 | +| ------------- | ---- | ------------------------------------------------ | +| [att] | CSS2 | 选择带有 att 属性的所有元素 | +| [att=value] | CSS2 | 选择带有 att="value" 属性的所有元素 | +| [att~=value] | CSS2 | 选择 att 属性包含单词 "value" 的所有元素。 | +| [att\|=value] | CSS2 | 选择 att 属性值以 "value" 开头的所有元素。 | +| [att^=value] | CSS3 | 选择其 att 属性值以 "value" 开头的所有元素。 | +| [att$=value] | CSS3 | 选择其 att 属性以 "value" 结尾的所有元素。 | +| [att*=value] | CSS3 | 选择其 att 属性值中包含 "value" 子串的所有元素。 | + +### 1.4 伪类选择器 + +CSS 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下、点击完成等,通过伪类可以为元素的状态修改样式。 + +伪类选择器主要可以分为:动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。 + +#### 1.4.1 动态伪类选择器 + +| 选择器 | 版本 | 描述 | +| -------- | ------ | ---------------------------------------------------- | +| :link | CSS1 | 用于链接元素,匹配定义为超链接并且未被访问过的元素。 | +| :visited | CSS1 | 用于链接元素,匹配定义为超链接并且已被访问过的元素。 | +| :active | CSS1/2 | 匹配被激活的元素。常用于链接和按钮。 | +| :hover | CSS1/2 | 用户鼠标停留在元素上的元素。 | +| :focus | CSS1/2 | 匹配获取到焦点的元素。 | + +a标签有4中伪类(即对应四种状态),如下: + +- :link:超链接未点击之前 +- :visited:链接访问过 +- :hover:鼠标放到标签上的时候 +- :active:激活,鼠标点击标签,但是不松手时。 + +a标签的这四种伪类选择器存在着一定的顺序,各个样式之间的顺序很有讲究,一旦出现排列错误就很有可能形成覆盖,导致其中某个样式无法显示。 + +a标签的这四种伪类选择器的顺序为:a:link ,a:visited,a:hover ,a:active。记忆规则 **LoVe/HAte** ,也就是爱/恨。也可以是其他记忆规则。 + +#### 1.4.2 UI元素状态伪类选择器 + +| 选择器 | 版本 | 描述 | +| --------- | ---- | ---------------------------------------- | +| :checked | CSS3 | 选择每个被选中的复选按钮或单选按钮元素。 | +| :enabled | CSS3 | 匹配所有启用的表单元素 | +| :disabled | CSS3 | 匹配所有禁用的表单元素 | + +UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作。 + +#### 1.4.3 结构伪类选择器 + +| 选择器 | 版本 | 描述 | +| -------------------- | ---- | ------------------------------------------------------------ | +| :fist-child | CSS3 | 选择作为其父的首个子元素的每个元素。 | +| :last-child | CSS3 | 选择作为其父的最后一个子元素的每个元素。 | +| :root | CSS3 | 选择元素的根元素。在HTML文档中,根元素始终是html。 | +| :nth-child(n) | CSS3 | 选择作为其父的第n个子元素的每个元素。 | +| :nth-last-child(n) | CSS3 | 选择作为父的倒数第n个子元素的每个元素,从最后一个子元素计数。 | +| :first-of-type | CSS3 | 选择作为其父的首个指定类型的元素。 | +| :last-of-type | CSS3 | 选择作为其父的最后一个指定类型的元素。 | +| :only-of-type | CSS3 | 匹配父元素的所有子元素中唯一的那个子元素。 | +| :nth-of-type(n) | CSS3 | 选择父元素内具有指定类型的第n个元素 | +| :nth-last-of-type(n) | CSS3 | 选择父元素内具有指定类型的倒数第n个元素 | +| :empty | CSS3 | 选择没有子元素的元素,而且该元素也不包含任何文本节点 | + +**`:nth-child(n)`选择器:** + +这个选择器的原理:首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从`1`开始排序。 + +**参数值情况** + +1. 情况一:可以是整数(1, 2, 3)、关键字(even, odd)。索引是从1开始的。 + +2. 情况二:可以是表达式(an+b)(n=0,1,2,3)。 + - `0n+3`:匹配第三个元素 + - `1n+0`:匹配`n`匹配每一个元素,n 为0时,第0个元素不存在,没有效果。 + - `a`和`b`都必须是整数。而且`an`必须写在`b`前面,不能写生`b+an`的形式。 + +**`:nth-of-type(n)`选择器:** + +这个选择器的原理:首先找到所有当前具有相同特性的兄弟元素,然后按照位置先后顺序从`1`开始排序。 + +**参数值情况**:同`:nth-child`一样。 + +#### 1.4.4 否定伪类选择器 + +`:not()`:用来匹配不符合一组选择器的元素。 + +> **注意**: +> +> - `:not()`伪类不能被嵌套,这意味着 `:not(:not(...))` 是无效的。 +> - 由于伪元素不是简单的选择器,他们不能被当作 `:not()` 中的参数,形如 `:not(p::before)` 这样的选择器将不会工作。 + +### 1.5 伪元素 + +伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。 + +伪元素必须紧跟在语句中的简单选择器/基础选择器之后。 + +**注意:**按照规范,应该使用双冒号(`::`)而不是单个冒号(`:`),以便区分伪类和伪元素。但是,由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。 + +| 选择器 | 版本 | 描述 | +| ----------------------------- | ---------- | ------------------------------------------------------------ | +| ::first-letter(:first-letter) | CSS3(CSS1) | 匹配块级元素的第一行的第一个字母。 | +| ::first-line(:first-line) | CSS3(CSS1) | 匹配块级元素的第一行的内容。 | +| ::before(:before) | CSS3(CSS2) | 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 [`content`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content) 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 | +| ::after(:after) | CSS3(CSS2) | 用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合[`content`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content)属性来为该元素添加装饰内容。这个元素默认是行内元素。 | +| ::selection | CSS3 | 应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分) | + +#### 1.5.1 **content属性**: + +CSS 的 `content` 属性用于在元素的`::before`和`::after`伪元素中插入内容。 + +**值**: + +- **`none`**:不会产生伪类元素 +- **`normal`**:`::before`和`::after`伪类元素中会被视为`none` +- **``**:文本内容 +- **``**:指定一个外部资源(比如图片) +- **`attr(x)`**:将元素的X属性以字符串形式返回。如果该元素没有X属性,则返回一个空字符串。 +- **``**:计数器。可以指定两种不同的函数:`counter()`和`counters()` +- **`open-quote` | `close-quote`**:添加引号。 + +## 2. CSS 盒子模型 + +当对一个文档进行布局的时候,浏览器会渲染引擎会根据标准之一的 **CSS 基础框盒模型(CSS basic box model)**,将所有元素表示为一个个矩形的盒子。CSS 决定这些盒子的大小,位置以及属性。 + +每个盒子由四部分组成,其效用由它们各自的边界定义。这四个边界分别是:内容边界(content),内边距边界(padding),边框边界(border),外边框边界(margin)。 + +![](images/03-box.png) + +### 2.1 内容区域 + +内容区域由内容边界限制,容纳元素的“真实”内容,例如文本、图像,或是一个视频播放器。 + +控制内容区域的属性有: + +| 属性名 | 属性值 | 说明 | +| ---------- | ---------------------------- | ---------------------------------------------------------- | +| width | auto \| length \| percentage | 设置元素的宽度。值为"auto"表示无特定宽度,取决其他属性值。 | +| height | auto \| length \| percentage | 设置元素的高度。值为"auto"表示无特定高度,取决其他属性值。 | +| min-width | length \| percentage | 设置元素的最小宽度。 | +| max-width | none \| length \| percentage | 设置元素的最大宽度。“none"为默认值,不设置最大宽度。 | +| min-height | length \| percentage | 设置元素的最小高度。 | +| max-heigth | none \| length \| percentage | 设置元素的最大高度。”none"为默认值,不设置最大高度。 | + +> 对于img元素来说,仅制定`width`属性,其`height`值将根据图片原尺寸等比例缩放。同理,仅设置`height`属性,其`width`值将根据图片原尺寸等比例缩放。 + +### 2.2 内边距区域 + +内边距区域,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。 + +控制内边距的属性有: + +| 属性名 | 属性值 | 说明 | +| -------------- | ---------------------------- | --------------------------------------- | +| padding | [length \| percentage]{1, 4} | 这是简写形式,属性值可以是1~4个的情况。 | +| padding-top | length \| percentage | 设置上内边距。 | +| padding-right | length \| percentage | 设置右内边距。 | +| padding-bottom | length \| percentage | 设置下内边距。 | +| padding-left | length \| percentage | 设置左内边距。 | + +**`padding`属性值情况:** + +```css +/* 应用于所有边 */ +padding: 10px; + +/* 上边下边 | 左边右边 */ +padding: 10px 15px; + +/* 上边, 左边右边, 下边*/ +padding: 10px 15px 20px; + +/* 上, 右, 下, 左*/ +padding: 5px 10px 10px 15px; +``` + +### 2.3 边框区域 + +边框区域扩展至内边距区域,是容纳边框的区域。边框的粗细由 `border-width`和简写的`border`属性控制。 + +假如框盒上设有背景(`background-color`或`background-image`),背景将会一直延伸至边框的外沿(默认为在边框下层延伸,边框会盖在背景上)。 + +### 2.4 外边距区域 + +外边距区域用空白区域扩展边框区域,以分开相邻的元素。 + +控制外边距的属性有: + +| 属性名 | 属性值 | 说明 | +| ------------- | --------------------------- | --------------------------------------- | +| margin | [length \|percentage]{1, 4} | 这是简写形式,属性值可以是1~4个的情况。 | +| margin-top | length \|percentage | 设置上外边距。 | +| margin-right | length \|percentage | 设置右外边距。 | +| margin-bottom | length \|percentage | 设置下外边距。 | +| margin-left | length \|percentage | 设置左外边距。 | + +**`margin`属性值情况:** + +```css +/* 应用于所有边 */ +margin: 10px; + +/* 上边下边 | 左边右边 */ +margin: 10px 15px; + +/* 上边, 左边右边, 下边*/ +margin: 10px 15px 20px; + +/* 上, 右, 下, 左*/ +margin: 5px 10px 10px 15px; +``` + +## 作业 + +绘制一个太极图效果: + +![](images/03-taiji.png) + +熟悉伪元素选择器的使用,只用一个div盒子来完成效果。 + +> **提示** +> +> ![](images/03-taiji2.png) +> +> 1. 只有一个div的盒子 +> 2. div盒子设置白色背景,左边框设置黑色背景 +> 3. 给每个div盒子设置before和after伪元素,一个放在盒子中心的上方,一个放在盒子中心的下方(使用绝对定位) +> 4. 设置伪元素的宽高,边框宽度和颜色,然后div盒子和伪元素盒子设置圆角边框(border-radius) + +大圆的半径为200px,中间小圆的半径20px; diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-box.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-box.png" new file mode 100644 index 0000000000000000000000000000000000000000..57d17ead8c4c4022cfd592b12c4cd1dd23518f6a Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-box.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-loadcss.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-loadcss.png" new file mode 100644 index 0000000000000000000000000000000000000000..271ae97914f1532eb4b040b395973cb0effc1395 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-loadcss.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji.png" new file mode 100644 index 0000000000000000000000000000000000000000..e6d63be4aad9b862eec7a761d68c9f243290ce79 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji2.png" new file mode 100644 index 0000000000000000000000000000000000000000..93ee4fdf880f6bc2ee229557249867bb2dc6ebaf Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/courseware/images/03-taiji2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..290ebf1900b3772b134f4d5461a332429425b210 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/demo01.html" @@ -0,0 +1,40 @@ + + + + + + Document + + + + 百度 + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/balloons.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/balloons.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..7d2e42c55bbde56369634f97be3c5b60ab6fad4d Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/balloons.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/star.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/star.png" new file mode 100644 index 0000000000000000000000000000000000000000..a0f5da20c9f638ec0e4d22c0d11315b59f980dbd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/star.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/tree.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/tree.png" new file mode 100644 index 0000000000000000000000000000000000000000..817c4b2a207798e6d684fa6524bc09622127bfe0 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/images/tree.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/nth-child.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/nth-child.html" new file mode 100644 index 0000000000000000000000000000000000000000..35254a202519169731e15b5e5b73b8fca5c90ad8 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/nth-child.html" @@ -0,0 +1,143 @@ + + + + + + + + Document + + + + +

span:nth-child(2n+1), 子元素中没有 + <em> 元素。 +

+

子元素中索引为 1, 3, 5, 7 的元素被选中。

+
+ Span 1! + Span 2 + Span 3! + Span 4 + Span 5! + Span 6 + Span 7! +
+ +
+ +

span:nth-child(2n+1), 子元素中包含一个 + <em> 元素。 +

+

子元素中索引为 1, 5, 7 的元素被选中。
+ 3 虽然也是计算结果,但是索引为3的这个子元素并不是<span>。 +

+
+ Span! + Span + This is an `em`. + Span + Span! + Span + Span! + Span +
+ +
+ +

span:nth-of-type(2n+1), 子元素中包含一个 + <em> 元素。 +

+

子元素中索引为 1, 4, 6, 8 的元素被选中。
+ nth-of-type,查找是在所有标签为span的子元素,然后按照先后顺序索引从1开始排序。然后找索引符合2n+1规则的元素。 +

+
+ Span! + Span + This is an `em`. + Span! + Span + Span! + Span + Span! +
+ +
+ +

span:first-child,找到作为第一个子元素的span元素

+
+
+ Span 1! + Span 2 + Span 3! +
+ +
+ This is an `em`. + Span! + Span +
+
+ +
+ +

span:first-of-type,找出兄弟元素中其类型的第一个元素

+
+
+ Span 1! + Span 2 + Span 3! +
+ +
+ This is an `em`. + Span! + Span +
+
+ +
+ +

:only-of-type,找出兄弟元素中没有和自己是相同类型的元素

+
+
I am `div` #1.
+

I am the only `p` among my siblings.

+
I am `div` #2.
+
I am `div` #3. + I am the only `i` child. + I am `em` #1. + I am `em` #2. +
+
+ +
+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-class.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-class.html" new file mode 100644 index 0000000000000000000000000000000000000000..0106b3ab42dffb7184c9d21b43ff23177694ba91 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-class.html" @@ -0,0 +1,34 @@ + + + + + + + Document + + + + + 百度 +
+ +
我是一个div
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-elements.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-elements.html" new file mode 100644 index 0000000000000000000000000000000000000000..9219db2ae6c59b029cac3cceaba540e9843c669c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/pseudo-elements.html" @@ -0,0 +1,93 @@ + + + + + + + + Document + + + + +

::first-letter,匹配块级元素第一行的第一个字母。

+

我是一个段落 + 仆以投人找洪下找罚太治慧才就是的,当后种,绪收雷帝妙头说是无非,争死婵论他他,一完日蒲孔在人志锐一看他天其,的得地蒲以磊釜文韩竟畴游,秦越皇承变促到秦你等娘仍,有因日狱承事侯不章尺,他馆的人即许尚不老生即韩,六她三不没谭惜是兴在久快禀极,他出天仑系以面办,找快病人自仁书什导,未降王服幕者商家国至可的友定,圣家地答我纯负上什瞠,贼动井往也,在有赏收人又守洪资但洪了是王,放司小洪德,孔重也杨范欲临。 +

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste eum natus laborum incidunt illum similique voluptatibus doloribus minima aliquid. Officia debitis modi eius, quaerat culpa eum ab quod, quia libero voluptates natus, odio nobis. Inventore, mollitia? Iste assumenda eos tenetur aliquid nisi modi? Nisi animi pariatur recusandae aliquid sit quia!

+ +
+ +

::first-line,匹配块级元素第一行的内容

+

我是一个段落 + 仆以投人找洪下找罚太治慧才就是的,当后种,绪收雷帝妙头说是无非,争死婵论他他,一完日蒲孔在人志锐一看他天其,的得地蒲以磊釜文韩竟畴游,秦越皇承变促到秦你等娘仍,有因日狱承事侯不章尺,他馆的人即许尚不老生即韩,六她三不没谭惜是兴在久快禀极,他出天仑系以面办,找快病人自仁书什导,未降王服幕者商家国至可的友定,圣家地答我纯负上什瞠,贼动井往也,在有赏收人又守洪资但洪了是王,放司小洪德,孔重也杨范欲临。 +

+ +
+ +

::selection,匹配文档中被用于选中的内容。

+

同松出你里谋同清斯者非拾责九快目感,非也罪非没范使设不,范极的程密拿,即量胆帝丰见,老词气衣,互谭非德便低,饮是的磊承,貂不关,惶。

+ +
+ +

::before,::after,通过content属性,设置伪元素展示的内容。

+
+ CSS: +
+    h1::before{ content: 'Chapter';}
+    p::before{ content: open-quote;}
+    p::after{ content: close-quote;}
+    a::before{ content: url(http://www.mozilla.org/favicon.ico) "Mozilla"}
+        
+

4

+

在此乐,他的金畴狱秦慨,叹应别苟十人教不洪留治廿谓越好程爻清千,洪笔使否生对,快是的韩,仄沫使畴书重竟论用恶第气光,他。

+ 主页 +
+
+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/taiji.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/taiji.html" new file mode 100644 index 0000000000000000000000000000000000000000..08f69d4d18dea20a05badeaa414ba5ed25ad1e91 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3+03/example/taiji.html" @@ -0,0 +1,48 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..821dc5ffaa706afc283f096588f7ff3b9043317f --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" @@ -0,0 +1,480 @@ +# HTML5 的新特性 + +## 本节目标 + +- 学会HTML5的新的语义元素 +- HTML5的媒体元素 + +## 1. HTML5 简介 + +HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 + +HTML5的设计目的是为了在移动设备上支持多媒体。 + +HTML5 为我们提供了一些新特性: + +- 新的语义元素,网页结构布局的时候,我们可以使用新的语义标签,而不是只有div+span标签。 +- 媒体元素,我们可以在html中直接嵌入音频和视频。 +- 新的表单控件,拓展了新的输入类型。`input`标签的`type`属性增加了其他选项,如:calendar,date,time,email,url,search等。 +- 用于绘画的`canvas`元素。 +- 对于本地离线存储的更好的支持。 + +## 2. HTML5代码介绍 + +```html + + + + + + Document + + + + + +``` + +### 2.1 `` + + 网页的第一个标签通常是``,表示文档类型,告诉浏览器如何解析网页。 + + 一般来说,只要简单声明`doctype`为`html`,浏览器就会按照 HTML 5 的规则处理网页。 + +> 有时,该标签采用完全大写的形式,以便区别于正常的 HTML 标签。因为``本质上不是标签,更像一个处理指令。 +> +> ```html +> +> ``` + +### 2.2 `` + +``标签是网页的顶层容器,即标签树结构的顶层节点,也称为根元素(root element),其他元素都是它的子元素。一个网页只能有一个``标签。 + +该标签的`lang`属性,表示网页内容默认的语言。 + +```html + +``` + +> 如果这个设置的语言和浏览器设置的语言不一致,浏览器会弹窗提示是否翻译。 + +### 2.3 `` + + ``标签是一个容器标签,用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染提供额外信息。 + + ``的子元素一般有下面七个 : + +- ``:设置网页的元数据; +- ``:连接外部样式表。 +- ``:设置网页标题。 +- `<style>`:放置内嵌的样式表。 +- `<script>`:引入脚本。 +- `<noscript>`:浏览器不支持脚本时,所要显示的内容。 +- `<base>`:设置网页内部相对 URL 的计算基准。 + +#### 2.3.1 `<meta>` + +`<meta>`标签用于设置或说明网页的元数据,必须放在`<head>`里面。一个`<meta>`标签就是一项元数据,网页可以有多个`<meta>`。`<meta>`标签约定放在`<head>`内容的最前面。 + + 不管什么样的网页,一般都可以放置以下两个`<meta>`标签。 + +```html +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Page Title + +``` + + 上面例子中,第一个``标签表示网页采用 UTF-8 格式编码,第二个``标签表示网页在手机端可以自动缩放。 + + ``标签有五个属性: + + **(1)charset 属性** + + `charset`属性,用来指定网页的编码方式 。 该属性非常重要,如果设置得不正确,浏览器可能无法正确解码,就会显示乱码。 + +```html + +``` + + 上面代码声明,网页为 UTF-8 编码。 除非确实有需要,否者`charset`属性的值一般都是`utf-8`。 + + **(2)name 属性,content 属性** + +``标签的`name`属性表示元数据的名字,`content`属性表示元数据的值。它们合在一起使用,就可以为网页指定一项元数据。 + +```html + + + + + +``` + + 元数据有很多种,大部分涉及浏览器内部工作机制,或者特定的使用场景 。 + +#### 2.3.2 `` + +`<title>`标签用于指定网页的标题,会显示在浏览器窗口的标题栏。 + +搜索引擎根据这个标签,显示每个网页的标题。它对于网页在搜索引擎的排序,有很大的影响,应该精心安排,反映网页的主题。 + +`<title>`标签的内部,不能再放置其他标签,只能放置无格式的纯文本。 + +### 2.4 `<body>` + + `<body>`标签是一个容器标签,用于放置网页的主体内容。浏览器显示的页面内容,都放置在它的内部。它是`<html>`的第二个子元素,紧跟在`<head>`后面。 + +## 3. 网页的语义结构 + +大多数网站的结构都很相似,包含页头,页脚,侧边栏,导航栏,等等。作为网页编写者,我们会给相应的`div`元素起个好理解的名字(比如`class="header"`)。但是对于浏览器而言,它无法确定每个`div`元素中包含的是什么内容。HTML5为此引入了新的语义元素。 + +语义良好的网页,天然具有良好的结构,对于开发者易读易写,容易维护,也能帮助计算机更好地处理网页内容。 + +HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。 + +下面是一个典型的语义结构的网页: + +```html +<body> + <header>页眉</header> + <main> + <article> + <h1>文章标题</h1> + <p>文章内容</p> + </article> + </main> + <footer>页尾</footer> +</body> +``` + +### 3.1 常用标签 + +#### 3.1.1 `<header>` + +`<header>`标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。 + +如果用在网页的头部,就称为“页眉”。网站导航和搜索栏通常会放在`<header>`里面。 + +```html +<header> + <h1>公司名称</h1> + <ul> + <li><a href="/home">首页</a></li> + <li><a href="/about">关于</a></li> + <li><a href="/contact">联系</a></li> + </ul> + <form target="/search"> + <input name="q" type="search" /> + <input type="submit" /> + </form> +</header> +``` + +如果`<header>`用在文章的头部,则可以把文章标题、作者等信息放进去。 + +```html +<article> + <header> + <h2>文章标题</h2> + <p>张三,发表于2010年1月1日</p> + </header> +</article> +``` + +由于`<header>`可以用在多种场景,所以一个页面可能包含多个`<header>`,但是一个具体的场景里面只能包含一个,比如网页的页眉只能有一个。另外,`<header>`里面不能包含另一个`<header>`或`<footer>`。 + +#### 3.1.2 `<footer>` + +`<footer>`标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。 + +```html +<body> + <footer> + <p>© 2021 xxx 公司</p> + </footer> +</body> +``` + +上面代码中,版权信息放在`<footer>`里面。 + +`<footer>`也可以放在文章里面。 + +```html +<article> + <header> + <h1>文章标题</h1> + </header> + <footer> + <p>© 禁止转贴</p> + </footer> +</article> +``` + +`<footer>`不能嵌套,即内部不能放置另一个`<footer>`,也不能放置`<header>`。 + +#### 3.1.3 `<main>` + +`<main>`标签表示页面的主体内容,一个页面只能有一个`<main>`。 + +```html +<body> +<header>页眉</header> +<main> + <article>文章</article> +</main> +<aside>侧边栏</aside> +<footer>页尾</footer> +</body> +``` + +注意,`<main>`是顶层标签,不能放置在`<header>`、`<footer>`、`<article>`、`<aside>`、`<nav>`等标签之中。 + +#### 3.1.4 `<article>` + +`<article>`标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(`<h1>`到`<h6>`)。 + +```html +<article> + <h2>文章标题</h2> + <p>文章内容</p> +</article> +``` + +一个网页可以包含一个或多个`<article>`,比如包含多篇文章。 + +#### 3.1.5 `<aside>` + +`<aside>`标签用来放置与网页或文章主要内容间接相关的部分。网页级别的`<aside>`,可以用来放置侧边栏,但不一定就在页面的侧边;文章级别的`<aside>`,可以用来放置补充信息、评论或注释。 + +```html +<!-- 网页级别的aside --> +<body> + <main>主体内容</main> + <aside>侧边栏</aside> +</body> +``` + +```html +<p>第一段</p> +<!-- 文章评注 --> +<aside> + <p>本段是文章的重点。</p> +</aside> +``` + +#### 3.1.6 `<section>` + +`<section>`标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节,比如`<article>`可以包含多个`<section>`。 + +```html +<article> + <h1>文章标题</h1> + <section> + <h2>第一章</h2> + <p>...</p> + </section> + <section> + <h2>第二章</h2> + <p>...</p> + </section> +</article> +``` + +#### 3.1.7 `<nav>` + +`<nav>`标签用于放置页面或文档的导航信息。 + +```html +<nav> + <ol> + <li><a href="item-a">商品 A</a></li> + <li><a href="item-b">商品 B</a></li> + <li>商品 C</li> + </ol> +</nav> +``` + +一般来说,`<nav>`往往放置在`<header>`里面,不适合放入`<footer>`。另外,一个页面可以有多个`<nav>`,比如一个用于站点导航,另一个用于文章导航。 + +`<nav>`里面通常是列表,但也可以放置其他标签。 + +#### 3.1.7 `<figure>` 和 `<figcaption>` + +`<figure>`标签可以理解为一个图像区块,将图像和相关信息封装在一起。 + +`<figcaption>`是它的可选子元素,表示图像的文本描述,通常用于放置标题,可以出现多个。 + +```html +<figure> + <img src="https://example.com/foo.jpg"> + <figcaption>示例图片</figcaption> +</figure> +``` + +除了图像,`<figure>`还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息,封装在一起的语义容器。 + +```html +<figure> + <figcaption>JavaScript 代码示例</figcaption> + <p><code>const foo = 'hello';</code></p> +</figure> +``` + +#### 3.1.8 `<details>` 和 `<summary>` + +`<details>`标签用来折叠内容,浏览器会折叠显示该标签的内容。 + +```html +<details> +这是一段解释文本。 +</details> +``` + +上面的代码在浏览器里面,会折叠起来,显示`详情`,前面有一个三角形,就像下面这样。 + + ![](images/01-img-01.png) + +展开会显示详细内容,然后再次点击,展开的文本又会重新折叠起来。 + +![](images/01-img-02.png) + +`<details>`标签的open属性,用于默认打开折叠。 + +`<summary>`标签用来定制折叠内容的标题。 + +```html +<details> + <summary>这是标题</summary> + 这是一段解释文本。 +</details> +``` + +通过 CSS 设置 `summary::marker`,可以改变标题前面的三角箭头。 + +```css +summary::marker { + content: '\2714'; + color: #696f7c; + margin-right: 5px; +} +``` + +> `::marker`是一个伪元素,伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。`content`属性值,可以是纯文本,html的属性`attr(属性名)`,`url(图片,音频,视频等资源的url)`, +> +> unicode字符集(采用4位的16进制编码,不同浏览器有差异),还可以是计算方法`counter()`。 + +### 3.2 文本标签 + +#### 3.2.1 `<strong>` 和 `<b>` + +- `<strong>`是一个行内元素,表示它包含的内容具有很强的重要性,需要引起注意。浏览器会以粗体显示内容。 + +- `<b>`与`<strong>`很相似,也表示它包含的内容需要引起注意,浏览器会加粗显示。它是 Boldface 的缩写。 + +**区别:** + +`<b>`标签没有语义,是一个纯样式的标签。`<strong>`标签有意义,有强调作用。 + +#### 3.2.2 `<em>` 和 `<i>` + +- `<em>`是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容。 + + 虽然浏览器通常会以斜体显示`<em>`,但无法保证一定如此,所以最好还是用 CSS 指定一下这个标签的样式。 + +- `<i>`标签与`<em>`相似,也表示与其他地方有所区别,浏览器会以斜体显示。它是 Italic 的缩写。 + +**区别:** + +`<i>`标签的语义不强,更接近是一个纯样式的标签,建议优先使用`<em>`标签代替它。 + +## 4. 多媒体标签 + +除了图像,网页还可以放置视频和音频。 + +### 4.1 `<video>` + +`<video>`标签是一个块级元素,用于放置视频。 如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示`<video>`内部的子元素。 + +```html +<video src="example.mp4" controls> + <p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a>。</p> +</video> +``` + +HTML 标准没有规定浏览器需要支持哪些视频格式,完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式,可以使用`<source>`标签,放置同一个视频的多种格式。 + +```html +<video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a>。</p> +</video> +``` + +上面代码中,`<source>`标签的`type`属性的值是视频文件的 MIME 类型,上例指定了两种格式的视频文件:MP4 和 WebM。如果浏览器支持 MP4,就加载 MP4 格式的视频,不再往下执行了。如果不支持 MP4,就检查是否支持 WebM,如果还是不支持,则显示提示。 + +> 视频格式相关知识点请参阅: https://www.zhihu.com/question/20997688/answer/29642529 + +#### 4.1.1 `<video>`属性 + +- `src`:视频文件的网址。 +- `controls`:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。 +- `width`:视频播放器的宽度,单位像素。 +- `height`:视频播放器的高度,单位像素。 +- `autoplay`:视频是否自动播放,该属性为布尔属性。 +- `loop`:视频是否循环播放,该属性为布尔属性。 +- `muted`:是否默认静音,该属性为布尔属性。 +- `poster`:视频播放器的封面图片的 URL。 +- `preload`:视频播放之前,是否缓冲视频文件。这个属性仅适合没有设置`autoplay`的情况。它有三个值,分别是`none`(不缓冲)、`metadata`(仅仅缓冲视频文件的元数据)、`auto`(可以缓冲整个文件)。 +- `playsinline`:iPhone 的 Safari 浏览器播放视频时,会自动全屏,该属性可以禁止这种行为。该属性为布尔属性。 + +```html +<video width="400" height="400" + autoplay loop muted + poster="poster.png"> +</video> +``` + +> 只设置`autoplay`,自动播放的效果在谷歌浏览器中不能马上生效: +> +> **处理方式:** +> +> 给`<video>`标签添加`muted`属性,设置静音,然后设置`autoplay`就能够自动播放了。 + +### 4.2 `<audio>` + +`<audio>`标签是一个块级元素,用于放置音频,用法与`<video>`标签基本一致。 + +```html +<audio controls> + <source src="foo.mp3" type="audio/mp3"> + <source src="foo.ogg" type="audio/ogg"> + <p>你的浏览器不支持 HTML5 音频,请直接下载<a href="foo.mp3">音频文件</a>。</p> +</audio> +``` + +#### 4.2.1 `<audio>`属性 + +- `src`:音频文件网址。 +- `autoplay`:是否自动播放,布尔属性。 +- `controls`:是否显示播放工具栏,布尔属性。如果不设置,浏览器不显示播放界面,通常用于背景音乐。 +- `loop`:是否循环播放,布尔属性。 +- `muted`:是否静音,布尔属性。 +- `preload`:音频文件的缓冲设置。 + +> chrome、safari、firefox都在某些版本后限制了audio自动播放(chrome是66+),必须要用户与文档产生交互,否则会报错。 +> +> chrome 自动播放策略变为:减少广告杂音对用户的影响以及节省流量,所以禁止自动播放。 + +### 4.3 `<source>` + +`<source>`标签用于`<video>`、`<audio>`的内部,用于指定一项外部资源。单标签是单独使用的,没有结束标签。 + +它有如下属性,具体示例请参见相应的容器标签。 + +- `type`:指定外部资源的 MIME 类型。 +- `src`:指定源文件,用于`<video>`和`<audio>`。 + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..16669fdec4c358dbe35a8038a42442865b2ae988 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..743b20d58701ef5f66fc2cdb903168f6a1d690cc Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/01-img-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/courgette.log" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/courgette.log" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/debug.log" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/debug.log" new file mode 100644 index 0000000000000000000000000000000000000000..8c2d2159b42785e57d22bf18a43bb3188d925341 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/courseware/images/debug.log" @@ -0,0 +1,5 @@ +[1107/153711.769:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: browser +[1107/153711.805:INFO:gpu_process_host.cc(941)] [XWEB_LOG_GPU] GPU process laucnched multi-process mode SUCCESS!!! gpu-process-pid:2984 gpu-process-sandbox:1 +[1107/153711.831:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: gpu-process +[1107/153711.960:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: utility +[1107/153911.860:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: gpu-process diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..0ca5efefb2039b87c9b5d86f417e06d15a073d2b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo01.html" @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>第一个页面 + + + + +
test
+ +
+ +
示例图片
+
+ +
+ 这是标题 + 这是一段解释文本。 +
+ +

+ 加粗的文字 + 加粗的问题 + 斜体的字 + 斜体的字2 + + h2o + H2O + + 33 +

+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..95c3fc5f36fb163baa47711454a171474acb009e --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/demo02.html" @@ -0,0 +1,13 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/horse.ogg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/horse.ogg" new file mode 100644 index 0000000000000000000000000000000000000000..a39a4e5a6a2cf0d9d39aa46e745c2e51dd0c93c5 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/horse.ogg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.mp4" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..3b46840196654031cb7d4cdd9053592b105f8df5 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.mp4" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogg" new file mode 100644 index 0000000000000000000000000000000000000000..34588aa17889dc5d49d8f70db8f5fd06ab2a8700 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogv" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogv" new file mode 100644 index 0000000000000000000000000000000000000000..b476d195864d1de50df2b6eefe82f20c00e0d80d Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/movie.ogv" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/news.mp3" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/news.mp3" new file mode 100644 index 0000000000000000000000000000000000000000..bf69c0d5cf1176093058656b9834b44eb1c77b68 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_01/example/news.mp3" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/20211118h5\344\275\234\344\270\232/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/20211118h5\344\275\234\344\270\232/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..9ee2ff291e46fddc18a9659933cffb6eb7fb47fc --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/20211118h5\344\275\234\344\270\232/demo01.html" @@ -0,0 +1,117 @@ + + + + + + + Document + + + + + +
+ rgb + ( + 108 + , + 87 + , + 106 + ) +
+ R + G + B + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..5d292dca7d68521722e8b294d12f51e955e89c53 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md" @@ -0,0 +1,386 @@ +# 值与单位 + +## 课前回顾 + +上节课我们学习了背景边框和文字特效。 + +## 本节目的 + +1. 了解CSS中的值有哪些 +2. 熟练掌握CSS中单位的使用 +3. 了解CSS的calc函数和var函数,学会使用这些方法。能够熟练掌握CSS变量的使用。 + +## 1. CSS 中的值 + +在css中,我们设置的值有:颜色值(十六进制值,rgb值,rgba值,hsl值等)、长度、角度、时间、数字、图像等、 + +常常我们在数值后面会带上一个单位。 + +### 1.1 长度 + +最常见的数字类型是长度。css中有两种类型的长度——相对长度和绝对长度。 + +#### 1.1.1 绝对长度单位 + +| 单位 | 名称 | 等价换算 | +| ---- | ---- | ------------------- | +| cm | 厘米 | 1cm = 96px/2.54 | +| mm | 毫米 | 1mm = 0.1cm | +| in | 英寸 | 1in = 2.54cm = 96px | +| pt | 点 | 1pt = 1/72 * 1in | +| px | 像素 | | + +上面的大多数单位都是用于打印的,在我们屏幕或者网页上使用的值是px。 + +#### 1.1.2 相对长度单位 + +相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。使用相对单位的好处是,经过一些仔细的规划,您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。 + +| 单位 | 相对于 | +| ---- | ------------------------------------------------------------ | +| em | 在font-size中使用是相对于父元素的字体大小,在其他属性中是相对于自身的字体大小,比如width; | +| rem | 根元素的字体大小 | +| lh | 元素的line-height | +| vw | 视窗宽度的1% | +| vh | 视窗高度的1% | +| vmin | 视窗较小尺寸的1%,如果宽度比较小,则这个值就是相对视窗宽度的1%。 | +| vmax | 视窗较大尺寸的1%; | + +**em 和 rem 的区别**: + +em 和 rem 这两个相对单位是我们最常使用的。 + +- rem是**相对根元素的字体大小**,而em是相对父元素或者自身的字体大小。 +- rem相对更加稳定。因为`font-size`属性是一个继承属性,如果自己没有设置字体大小,这个值则会收到父元素的字体大小的影响。 + +```html +
    +
  • one
  • +
  • two
  • +
  • three +
      +
    • three 1
    • +
    • three 2 +
        +
      • three 2-1
      • +
      +
    • +
    +
  • +
+
    +
  • one
  • +
  • two
  • +
  • three +
      +
    • three 1
    • +
    • three 2 +
        +
      • three 2-1
      • +
      +
    • +
    +
  • +
+ +``` + +### 1.2 百分比 + +在许多情况下,百分比与长度的处理方法是一样的。百分比的问题在于,他们总是相对于其他值设置的。例如,如果将元素的字体大小设置为百分比,那么它将是元素父元素的字体大小的百分比。如果使用百分比作为宽度值,那么它将是父元素宽度的百分比。 + +```html + +
我的宽度为200px
+
我的宽度为40%
+
+
我的宽度为200px
+
我的宽度为40%
+
+ +``` + +```css +.w200{ + width: 200px; +} +.w-p40{ + width: 40%; +} +.wrapper { + width: 600px; + padding: 15px 0; + border-color: #040489; +} +``` + +![](images/05-percent.png) + +列表的例子,将li的font-size设置为百分比,每次继承父级的字体大小,层级往下,字体会逐渐变小。 + +### 1.3 数字 + +有些值接受数字,不添加任何单位。比如font-weight,100~900的值,是不带单位的。还有就是不透明度属性(opacity),只接受0和1之间的数字。 + +```css +.box{opacity: 0.7;} +``` + +## 2. 函数 + +在CSS里面,我们有些属性值是函数,例如:`rgb()`,`url()`等。 + +接下来我们要介绍一个类似传统变成语言的函数:`calc()`。这个函数可以让我们在CSS中进行简单的计算。 + +### 2.1 calc() 定义和用法 + +`calc()`函数用语动态计算长度值。 + +- 任何长度值都可以使用`calc()`函数进行计算; +- `calc()`函数支持`+`, `-`, `*`, `/`运算; +- `calc()`函数使用标准的数学运算优先级规则; +- 举例`width: calc(100% - 100px)`,**运算符前后都需要保留一个空格。** + +**使用场景** + +1. 可以很容易为一个对象设置一个左右两边相等的外边距。 + + ```css + .box { + position: absolute; + left: 40px; + width: calc(100% - 80px); + height: 200px; + border: 1px solid; + box-sizing: border-box; + } + ``` + +2. 在页面布局上面,也很好用。 + + ![](images/05-calc.png) + +### 2.2 var() 使用CSS变量 + +CSS中原生的变量定义语法是: `--*`,变量使用语法是:`var(--*)`,其中`*`表示我们的变量名称。 + +```css +:root{ + --myColor: #369; +} +body { + background-color: var(--myColor); +} +``` + +CSS的变量命名规则: + +- 可以是数字。 +- 不能包含`$`,`[`, `^`, `(`,`%`等字符, 普通字符局限在只要是“数字`[0-9]`”“字母`[a-zA-Z]`”“下划线`_`”和“短横线`-`”这些组合,但是可以是中文,日文或者韩文等。 +- 变量的定义和使用只能是在css声明块`{}`里面。 + +```css +body { + --深蓝: #369; + background-color: var(--深蓝); +} +``` + +上面代码也是可以生效的。 + +下面的例子,可以帮助我们更好的理解变量的权重和变量应用规则。 + +```css +:root{--color: purple;} +div {--color: green;} +#alert{--color: red;} +*{color: var(--color);} +``` + +```html +

我的紫色继承于根元素

+
我的绿色来自直接设置
+
+ ID选择器权重更高,因此我是红色! +

我也是红色,占了继承的光

+
+``` + +上面这个例子我们了解到: + +1. 变量也是跟着CSS选择器走的,如果变量所在的选择器和使用变量的元素没有交集,是没有效果的。例如`#alert`定义的变量,只有`id`为`alert`的元素才能享有。 +2. 当存在多个同样名称的变量时候,变量的覆盖规则则由CSS选择器的权重决定的。 + +**`var()`方法的使用语法** + +``` +var(自定义属性名[, 默认值]); +``` + +如果我们使用的变量没有定义,则使用后面的值作为元素的属性值。 + +```css +.box { + --bgColor: #369; +} +body { + background-color: var(--bgColor, #cd0000); +} +``` + +**CSS变量不合法的缺省特性** + +请看下面的例子: + +```css +body { + --color: 20px; + background-color: #369; + background-color: var(--color, #cd00000); +} +``` + +请问,此时``的背景色是? + +``` +A: transparent B: 20px C:#369 D:#cd00000 +``` + +答案是: A:transparent + +对于CSS变量,只要语法是正确的,就算变量里面的值是个乱七八糟的内容,也是作为正常的声明解析的。如果发现变量值是不合法的,例如上面背景色显然不能是`20px`,则使用背景色的缺省值,也就是默认值代替。上面的代码等同于: + +```css +body { + --color: 20px; + background-color: #369; + background-color: transparent; +} +``` + +**CSS变量的空格尾随特性** + +```css +body { + --size: 20; + font-size: var(--size)px; +} +``` + +你认为上面例子里,body的font-size大小是多少?会是`20px`吗?答案是当前的body的font-size使用的是``元素默认的大小。 + +原因:`font-size: var(--size)px`等同于`font-size: 20 px`,**注意**,`20`后面有个空格。这个就是CSS变量的空格尾随特性,`var()`执行后,会自动跟上一个空格。 + +上面的例子可以修改,直接将单位在变量中定义: + +```css +body { + --size: 20px; + font-size: var(--size); +} +``` + +或者使用我们前面学到的`calc()`函数计算: + +```css +body { + --size: 20; + font-size: calc(var(--size) * 1px); +} +``` + +**CSS变量的相互传递特性** + +这个特性是指,我们在CSS变量定义的时候可以直接引入其他变量给自己使用,例如: + +```css +body { + --green: #4caf50; + --backgroundColor: var(--green); +} +``` + +或者更复杂的使用: + +```css +body { + --columns: 4; + --margin: calc(24px / var(--columns)); +} +``` + +对于复杂布局,CSS变量这个相互传递和直接引用特性可以简化我们的代码和实现成本,尤其和动态布局在一起的时候。 + +## 作业 + +1. 对于颜色值,我们有RGB颜色值,RGBA颜色值,HSL颜色值,HSLA颜色值。 + + 请制作一个属性值介绍页面,对应值的取值范围,请自行学习了解。界面功能如下 + + ![](images/05-homework1.png) + + 要求: + + 1. 界面应该由4个对应的模块,分别介绍这4个颜色值的参数有哪些。 + 2. 移动滑块时,对应的盒子背景色会响应的变化,显示的文字也会跟着变化。 + +2. 进阶题,优化上面的例子,背景颜色右深到浅时,文本的颜色由原来的白色变成黑色。 + + > 思路: + > + > 1. 使用css变量方式来实现。 + > + > 2. 字体颜色我们用HSL色值表示,这个值我们可以使用sRGB Luma方法计算灰度(可以看成亮度,HSL色值的L)来获得。 + > + > **算法:** + > + > ```js + > lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 + > ``` + > + > 3. 我们将计算得到的lightness看做是亮度,范围0~1,此时,和临界值threshold(我们设置为0.5)做比较: + > + > - 大于临界值时,lightness - threshold值为正数,和-999999%相乘,会得到一个巨大负数,浏览器会按照合法边界0%渲染,也就是亮度为0,于是颜色为黑色。 + > - 小于临界值时,lightness - threshold值为负数,和-999999%相乘,会得到一个巨大正数,以最大合法值100%渲染,于是颜色为白色。 + > + > 所以计算字体颜色的**公式**是: + > + > ```css + > {color: hsl(0, 0%, calc((lightness - threshold) * -99999%));} + > ``` + > + > 4. 原生DOM给元素添加CSS类方法: +- + > ```js + > 要通过下面这个方法才能获取到css的变量(stylesheet[0]代表的是借口,cssRules[0]代表的是css里的第一个样式) + > + > let html = document.styleSheets[0].cssRules[0]; + > el.style.setProperty('--myVar', 'aa'); + > // 获取属性值 + > el.style.getPropertyvalue('--myVar'); + > ``` + > + > > 1. DOM里面通过`attribute`为元素添加属性,获取属性值等。 + > > + > > ```js + > > el.getAttribute('name'); + > > el.setAttributevalue('name', 'value'); + > > ``` + > > + > > 2. DOM 里面通过 `property` 为DOM对象添加属性,设置属性值,获取属性值等 + > > + > > ```js + > > el.setProperty('name', value); + > > el.getPropertyvalue('name'); + > > ``` + > + > 案例参考界面:https://www.zhangxinxu.com/study/201811/switch-font-color-for-different-background.php + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md" new file mode 100644 index 0000000000000000000000000000000000000000..30c74a0da227656edc427e542f8861d3c2500e47 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md" @@ -0,0 +1,42 @@ +# 溢出的内容 + +## 本节目的 + +1. 明白溢出的概念,了解CSS溢出的表现。当网页布局错乱时,能够准确判断出是由于什么原因引起的。 +2. overflow属性的属性值表现学习。 + +## 1. 什么是溢出 + +溢出是在盒子无法容纳下太多的内容的时候发生的。 + +CSS中万物皆盒,因此我们可以通过给`width`和`height`赋值的方式来约束盒子的尺寸。溢出就是往盒子里塞太多东西的时候发生的,溢出时,页面上的展示就会出现问题。CSS给我们好几种工具来控制溢出。 + +![](images/05-overflow1.png) + +我们会发现,发生溢出后,CSS不会隐藏我们的内容。这个CSS的一个特点,尽量减少“数据损失”。 + +我们给盒子设置宽度和高度时,CSS假定你知道自己在做什么,而且你已经控制住了溢出的隐患。 + +## 2. overflow 属性 + +`overflow`属性是一个控制元素溢出的方式,它告诉浏览器你想怎样处理溢出。`overflow`的默认值为`visible`,这就是默认情况下,我们可以看到溢出的内容。 + +**可能的值**: + +| 值 | 描述 | +| ------- | -------------------------------------------------------- | +| visible | 默认值。内容不会被修剪,会呈现在元素框之外。 | +| hidden | 内容会被修剪,并且其余内容是不可见的。 | +| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 | +| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 | +| inherit | 规定应该从父元素继承 overflow 属性的值。 | + +`overflow`是一个简写属性,分拆独立属性语法: + +``` +overflow-*: visible | hidden | scroll | auto +overflow-* = overflow-x, overflow-y +``` + + + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-calc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-calc.png" new file mode 100644 index 0000000000000000000000000000000000000000..cab1396d77274c52a2e917a92dfbba6fd5e77558 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-calc.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-homework1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-homework1.png" new file mode 100644 index 0000000000000000000000000000000000000000..abb46bb1d1210921dbe561175b04a76ff1e44892 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-homework1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-overflow1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-overflow1.png" new file mode 100644 index 0000000000000000000000000000000000000000..375accf20bff5429889bced7f30885e06019c1d4 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-overflow1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-percent.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-percent.png" new file mode 100644 index 0000000000000000000000000000000000000000..567cbc3bc0410e71a495526716ab5e02c1c4b83c Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-percent.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-var.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-var.png" new file mode 100644 index 0000000000000000000000000000000000000000..6be720e546fa031aad6a6e8fe2a41e684c45199f Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/courseware/images/05-var.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/calc.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/calc.html" new file mode 100644 index 0000000000000000000000000000000000000000..1b3681ed264888e34513b782c6a862c396112b10 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/calc.html" @@ -0,0 +1,25 @@ + + + + + + + + Document + + + + +
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo.js" new file mode 100644 index 0000000000000000000000000000000000000000..ff034973add2401570e3b060e4eee2c09df68065 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo.js" @@ -0,0 +1,17 @@ +window.addEventListener('DOMContentLoaded', function() { + let lis = document.querySelectorAll('.wrapper li'); + let box = document.querySelector('.box'); + for (let i = 0; i < lis.length; i++) { + let item = lis[i]; + item.onclick = function() { + let value = this.dataset.value; + box.style[this.dataset.prop] = value; + let selected = document.querySelector('.current'); + if (selected) { + selected.classList.remove('current'); + } + + this.classList.add('current'); + } + } +}) \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..9fed54ead1358a8da7b8b870607eda240cbc2de2 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo01.html" @@ -0,0 +1,26 @@ + + + + + + + Document + + + +
+
我的宽度设置为200px
+
我的宽度设置为10vw
+
我的宽度设置为10em
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..0979917fe6e8969025b613182aaa49a1fa27d0c6 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo02.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + +
+ + +
+
熊猫
+

国家一级保护动物 的他不血才其上夫落与洪可认同在才留,承仁上不破音前生第于下。

+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo03.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo03.html" new file mode 100644 index 0000000000000000000000000000000000000000..de99ec396fdb91c0b29bbb740c4d87309bd97417 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/demo03.html" @@ -0,0 +1,18 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/em_rem.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/em_rem.html" new file mode 100644 index 0000000000000000000000000000000000000000..45e375d22190425cd44e0c0a32b346aa032d9b41 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/em_rem.html" @@ -0,0 +1,53 @@ + + + + + + + Document + + + +
    +
  • one
  • +
  • two
  • +
  • three +
      +
    • three 1
    • +
    • three 2 +
        +
      • three 2-1
      • +
      +
    • +
    +
  • +
+
    +
  • one
  • +
  • two
  • +
  • three +
      +
    • three 1
    • +
    • three 2 +
        +
      • three 2-1
      • +
      +
    • +
    +
  • +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/images/tree.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/images/tree.png" new file mode 100644 index 0000000000000000000000000000000000000000..817c4b2a207798e6d684fa6524bc09622127bfe0 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/images/tree.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow.html" new file mode 100644 index 0000000000000000000000000000000000000000..b40e2ccf58d84e9b2f5a729ae916e5f2f69fa0da --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow.html" @@ -0,0 +1,22 @@ + + + + + + + Document + + + +

一个溢出的现象

+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo consequuntur error tempora quae veniam quis? Exercitationem, tempora? Autem non expedita aliquid quisquam nostrum explicabo velit neque, adipisci, ad soluta laudantium sit quae consectetur ipsa eos harum dolorum iusto quia? Dolorem impedit ab ea dolores placeat debitis natus ut animi exercitationem, alias, delectus vitae quis. Possimus nesciunt non accusantium accusamus.
+

我是盒子外的内容,我是一个段落. 逃人明自的逃家起陀区衣没当春,鼓定老可洪胸韩李,兼也变叹韩。

+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow2.html" new file mode 100644 index 0000000000000000000000000000000000000000..4506cef35c43eda5fafc735665479f7e06de2539 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/overflow2.html" @@ -0,0 +1,49 @@ + + + + + + + Document + + + + +
+
    +
  • overflow: visible;
  • +
  • overflow: hidden;
  • +
  • overflow: scroll;
  • +
  • overflow: auto
  • +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam dicta illo nisi maiores quis distinctio exercitationem placeat ratione possimus accusamus accusantium provident quaerat at libero et, velit cum fugiat cupiditate minus quibusdam aliquid impedit. Modi exercitationem deserunt ullam aut earum? Mollitia vel eos nobis amet vero facere laboriosam maxime itaque? Totam, eius unde aut neque voluptates ad ullam dolores dolor quam doloremque perspiciatis maxime voluptatibus reiciendis consequuntur vero dolorem quae, est earum cum deserunt dignissimos officiis. Impedit, quidem dolore, culpa id vitae atque magnam tempora suscipit nostrum aut blanditiis nesciunt aperiam error voluptatem repellat cupiditate consectetur natus, quibusdam molestiae aspernatur. +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/percent.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/percent.html" new file mode 100644 index 0000000000000000000000000000000000000000..4fed02b20885b73cb47167f5d88e2df9dc636b54 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/percent.html" @@ -0,0 +1,35 @@ + + + + + + + Document + + + +
我的宽度为200px
+
我的宽度为40%
+
+
我的宽度为200px
+
我的宽度为40%
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/var.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/var.html" new file mode 100644 index 0000000000000000000000000000000000000000..f058e81e9304798fce9c518686ad83f54c16572a --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_05/example/var.html" @@ -0,0 +1,23 @@ + + + + + + + Document + + + +

我的紫色继承于根元素

+
我的绿色来自直接设置
+
+ ID选择器权重更高,因此我是红色! +

我也是红色,占了继承的光

+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/07-\345\270\203\345\261\200.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/07-\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..68520a8cbd301a4e84db13373f36d26b985271cc --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/07-\345\270\203\345\261\200.md" @@ -0,0 +1,357 @@ +# 布局 + +## 课前回顾 + + + +## 本节目的 + +1. 了解处理页面布局的技术有哪些 +2. 了解不同布局情况的特点。 + +## 1. CSS布局简介 + +CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口的位置。 + +常用的页面布局技术如下: + +- 正常布局流 +- `display`属性 +- 弹性盒子(flex) +- 网格(grid) +- 浮动(float) +- 定位(position) +- CSS 表格布局 +- 多列布局 + +每种技术都有它们的用途,各有优缺点,相互辅助。通过理解各个布局方法的设计理念,你能够找到构建你想要的网页需要的布局方案。 + +## 2. 正常布局流(Normal flow) + +正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。 + +正常布局流中,块元素和行内元素依据各自特点在网页上展示。 + +如果正常布局流可以满足你对页面布局要求,即不需要用CSS再额外处理布局。一个结构良好的HTML文档是非常重要的。 + +## 3. display 属性 + +在css中实现页面布局的主要方法是设定`display`属性的值。此属性允许我们更改默认的显示方式。 + +**可能的值** + +| 值 | 版本 | 描述 | +| -------------- | ---- | ------------------------------------------------------------ | +| none | CSS1 | 隐藏对象。 | +| inline | CSS1 | 将元素设置为行内元素。 | +| block | CSS1 | 将元素设置为块元素。 | +| inline-block | CSS2 | 将元素设置为行内块元素。(既有行内元素特点,也有块元素特点) | +| table | CSS2 | 将元素设置为块元素级的表格。类同于html标签``. | +| inline-table | CSS2 | 将元素设置为行内元素级的表格。 | +| table-cell | CSS2 | 将元素设置为表格单元格。同``。 | +| table-column | CSS2 | 将元素设置为表格列。同``。 | +| box | CSS3 | 将元素作为弹性伸缩盒显示。(伸缩盒的最老版本,现在基本不用) | +| inline-box | CSS3 | 将元素作为行内块级弹性伸缩盒子显示。(伸缩盒的最老版本,现在基本不用) | +| flexbox | CSS3 | 将元素作为弹性伸缩盒子显示。(伸缩盒的过渡版本,现在大部分部分浏览器不支持) | +| inline-flexbox | CSS3 | 将元素作为行内块级弹性伸缩盒子显示。(伸缩盒的过渡版本,现在不用)。 | +| flex | CSS3 | 将元素作为弹性伸缩盒显示。(伸缩盒最新版本) | +| inline-flex | CSS3 | 将元素作为行内块级弹性伸缩盒显示。(最新版本)。 | +| grid | CSS3 | 将元素变为一个网格容器,它的子元素将成为网格元素。 | +| inline-grid | CSS3 | 将元素变为一个网格容器,它的子元素将成为网格元素。 | + +对于页面布局而言,最重要的两个值是 **`flex`**和 **`grid`**。 + +## 4. 浮动 float + +浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 允许文本和内联元素环绕它。 + + 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 + +**语法** + +``` +float: none | left | right; +``` + +> float是JS的一个保留字,所以我们如果想要将float当作DOM对象的属性处理时,需要拼写为`cssFloat`. +> +> ```js +> // 错误写法 +> el.style.float = 'left'; +> // 正确写法 +> el.style.cssFloat = 'left'; +> ``` + +元素添加浮动后(float的值不是none的情况),我们可以将改元素看作是一个带有方位的`display: inline-block`的盒子。 + +### 4.1 浮动的破坏性 + +当元素设置为浮动后,它会影响它周边的元素。 + +1. 首先影响它后面的元素的排列。 +2. 如果一个父元素,内部的元素都浮动了,则父元素的高度无法被子元素撑开,即高度为0;这就是我们说的高度塌陷的一种情况。 + +### 4.2 清除浮动 + +清除浮动的目的就是解决高度塌陷的问题。 + +**方法一:**使用`clear`属性。 + +`clear`属性可以取三个值: + +- `left`:停止任何活动的左浮动 +- `right`: 停止任何活动的右浮动 +- `both`:停止任何活动的左右浮动 + + 通常我们只想设定一个 `clear: both` 停止浮动。 + + 就是直接一个`
`放到当作最后一个子标签放到父标签那儿 。这个方法兼容性强,使用方便。 + +不过这个方法有个问题,在页面上多了一个没有意义的标签,且这个标签只能使用一次。不推荐使用。 + +**方法二:**使用overflow方法 + +```css +.fix{overflow: hidden;} +``` + +这个方法有点在于代码简洁,兼容性好。 + +缺点是:`overflow: hidden`不能和position配合使用,设定定位后,超出的尺寸会被隐藏。 + +**方法三:**after方法 + +在父元素上添加一个伪元素`after`,在这个为元素中,设置`clear: both`。 + +```css +.parent::after{ + display: block; + content: ''; + clear: both; +} +``` + +**注意:请尽量不要用浮动来做布局。如果想要两个块元素放同一行展示,我们可以将这些块元素设置为`display: inline-block`。浮动被设计出来的初衷是为了让问题围绕图片展示。** + +## 5. 定位 + +`position`属性用来指定一个元素在网页上的位置,一共有5中定位方式。 + +| 属性值 | 版本 | 描述 | +| -------- | ---- | ------------------------------------------------------------ | +| static | CSS2 | 默认值,静态定位。 | +| relative | CSS2 | 相对定位。定位基点是元素的默认位置。 | +| fixed | CSS2 | 固定定位。定位的基点是浏览器窗口。 | +| absolute | CSS2 | 绝对定位。定位的基点是父元素。 | +| sticky | CSS3 | 粘性定位。像是`relative`和`flxed`的结合。(2017年浏览器才支持的) | + +### 5.1 static 属性值 + +`static`是`position`属性的默认值。如果省略`position`属性,浏览器就认为该元素是`static`定位。 + +这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。 + +**注意:**`static`定位所导致的元素位置,是浏览器自主决定的,所以这时`top`、`bottom`、`left`、`right`这四个属性无效。 + +### 5.2 relative 属性值 + +`relative`表示,相对于默认位置(即`static`时的位置)进行偏移,即定位基点是元素的默认位置。 + +它必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,用来指定偏移的方向和距离。 + +![](images/07-relative.jpg) + +```css +div { + position: relative; + top: 20px; +} +``` + +### 5.3 absolute 属性值 + +`absolute`表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。 + +它有一个重要的限制条件:定位基点(一般是父元素)不能是`static`定位,否则定位基点就会变成整个网页的根元素`html`。 + +通常我们搭配父元素设置`position: relative`定位。 + +元素设置`absolute`定位后,会脱离正常文本留,该元素所占空间为0,周边元素不受影响。 + +```css +.parent { + position: relative; +} +.son { + position: absolute; + top: 10px; + left: 10px; +} +``` + +### 5.4 fixed 属性值 + +`fixed`表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。 + +它如果搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。 + +### 5.5 sticky 属性值 + +`sticky`跟前面四个属性值都不一样,它会产生动态效果,很像`relative`和`fixed`的结合:一些时候是`relative`定位(定位基点是自身默认位置),另一些时候自动变成`fixed`定位(定位基点是视口)。 + +因此,它能够形成"动态固定"的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(`relative`定位)。 + +![](images/07-sticky01.png) + +页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(`fixed`定位)。 + +![](images/07-sticky02.png) + +等到页面重新向上滚动回到原位,工具栏也会回到默认位置。 + +`sticky`生效的前提是,必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,不能省略,否则等同于`relative`定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作`sticky`的生效门槛。 + +它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与`sticky`元素的距离达到生效门槛,`relative`定位自动切换为`fixed`定位;等到父元素完全脱离视口时(即完全不可见),`fixed`定位自动切换回`relative`定位。 + +```css +.toolbar{ + position: sticky; + top: 20px; +} +``` + +上面代码中,页面向下滚动时,`.toolbar`的元素开始脱离父元素开始脱离视口,一旦视口的顶部与`.toolbar`的距离小于`20px`(门槛值),`toolbar`就自动变为`fixed`定位,保持与视口顶部`20px`的距离。 + +### 5.6 sticky 的应用 + +#### 5.6.1 堆叠效果 + +堆叠效果指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子。 + +```html +
+
+
+
+
+``` + +```css +div { + position: sticky; + top: 0; +} +``` + +#### 5.6.2 表格的表头锁定 + +大型表格滚动的时候,表头始终固定,也可以使用`sticky`实现。 + +```css +th { + position: sticky; + top: 0; +} +``` + +需要注意的是,`sticky`必须设在``和``元素,因为这两个元素没有`relative`定位,也就无法产生`sticky`效果。 + +## 6. 多列布局 + +CSS多列布局MultiCol是一种定义多栏布局的模块,可支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flow)、列之间的间距(gap)大小,以及列的分割线(column rules)。 + +| 属性 | 版本 | 描述 | +| :---------------- | :--: | :----------------------------------------- | +| columns | CSS3 | 设置或检索对象的列数和每列的宽度。复合属性 | +| column-width | CSS3 | 设置或检索对象每列的宽度 | +| column-count | CSS3 | 设置或检索对象的列数 | +| column-gap | CSS3 | 设置或检索对象的列与列之间的间隙 | +| column-rule | CSS3 | 设置或检索对象的列与列之间的边框。复合属性 | +| column-rule-width | CSS3 | 设置或检索对象的列与列之间的边框厚度。 | +| column-rule-style | CSS3 | 设置或检索对象的列与列之间的边框样式。 | +| column-rule-color | CSS3 | 设置或检索对象的列与列之间的边框颜色。 | +| column-span | CSS3 | 设置或检索对象元素是否横跨所有列。 | +| column-fill | CSS3 | 设置或检索对象所有列的高度是否统一。 | +| break-before | CSS3 | 设置或检索对象之前是否断行。 | +| break-after | CSS3 | 设置或检索对象之后是否断行。 | +| break-inside | CSS3 | 设置或检索对象内部是否断行。 | + +我们举一个简单实例,一个带有类`container`的盒子,里面是一些标题和一些段落。这个`.container`盒子将成为我们多列展示的容器。 + +### 6.1 column-count + +```css +.container { + column-count: 3; +} +``` + +```html +
+

简单的多列例子

+

...

+

...

+
+``` + +![](images/07-mulcol.png) + +### 6.2 column-width + +```css +.container { + column-width: 200px; +} +``` + +这样子设置后,浏览器将按照你指定的宽度尽可能多的创建列;任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度,除非容器的宽度刚好可以被你指定的宽度除尽。 + +### 6.3 给多列增加样式 + +多列属性创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法,同样无法为某一特定的列设置独特的背景色、文本颜色。你有两个机会改变列的样式: + +- 使用`column-gap`改变列间间隙。 +- 使用`column-rule`在列间加入一条分割线。 + +```css +.container { + column-width: 200px; + column-gap: 20px; +} +``` + +`column-gap`属性接受任何长度单位。 + +`column-rule`与`border`类似是`column-rule-width`, `column-rule-color`和`column-rule-style`的缩写,接受同border一样的值。 + +```css +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted red; +} +``` + +值得一提的是这条分割线本身并不占用宽度。它置于用 `column-gap` 创建的间隙内。如果需要更多空间,你需要增加 `column-gap` 的值。 + +### 6.4 列与内容折断 + +多列布局的内容被拆成碎块。 当你把内容放入多列布局容器内,内容被拆成碎块放进列中。 + +有时,这种折断内容会降低阅读体验。 + +![](images/07-multicol2.png) + +我们可以通过给每个内容块设置`break-inside`属性,并将值设置为`avoid`。表明我们不想拆分里面的内容。 + +```css +.card { + break-inside: avoid; + page-break-inside: avoid; /* 这个是旧属性,兼容性更好 */ +} +``` + +## 作业: + +图片瀑布流布局,用多列的方式来布局。 \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-mulcol.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-mulcol.png" new file mode 100644 index 0000000000000000000000000000000000000000..27c8889142374d29f47a1b0adb4977f8a4e3c8e6 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-mulcol.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-multicol2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-multicol2.png" new file mode 100644 index 0000000000000000000000000000000000000000..15b4eba7a26a2785e0e2ee0c97ac5b6fccfe09d0 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-multicol2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-relative.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-relative.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..50b7a7ef1a60749b4a8e6967ede900e0111f9459 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-relative.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky01.png" new file mode 100644 index 0000000000000000000000000000000000000000..d67a362a189053616aa975ea81fd8c8164b09291 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky02.png" new file mode 100644 index 0000000000000000000000000000000000000000..f00da9c36a736bcf8186018cfa150050a67ec846 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/courseware/images/07-sticky02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..dcf8f23d197bb4071b3c548427cbdfbff9c3dd3b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.html" @@ -0,0 +1,21 @@ + + + + + + + Document + + + +
我是一个盒子
我是span + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.js" new file mode 100644 index 0000000000000000000000000000000000000000..ff034973add2401570e3b060e4eee2c09df68065 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/demo.js" @@ -0,0 +1,17 @@ +window.addEventListener('DOMContentLoaded', function() { + let lis = document.querySelectorAll('.wrapper li'); + let box = document.querySelector('.box'); + for (let i = 0; i < lis.length; i++) { + let item = lis[i]; + item.onclick = function() { + let value = this.dataset.value; + box.style[this.dataset.prop] = value; + let selected = document.querySelector('.current'); + if (selected) { + selected.classList.remove('current'); + } + + this.classList.add('current'); + } + } +}) \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float.html" new file mode 100644 index 0000000000000000000000000000000000000000..afebe1bebab3c90e6d860bb1f24ee5622e4c3c30 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float.html" @@ -0,0 +1,53 @@ + + + + + + + Document + + + + +
+
    +
  • float: none;
  • +
  • float: left;
  • +
  • float: right;
  • +
+
+
Float me
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam dicta illo nisi maiores quis distinctio exercitationem placeat ratione possimus accusamus accusantium provident quaerat at libero et, velit cum fugiat cupiditate minus quibusdam aliquid impedit. Modi exercitationem deserunt ullam aut earum? Mollitia vel eos nobis amet vero facere laboriosam maxime itaque? Totam, eius unde aut neque voluptates ad ullam dolores dolor quam doloremque perspiciatis maxime voluptatibus reiciendis consequuntur vero dolorem quae, est earum cum deserunt dignissimos officiis. +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float2.html" new file mode 100644 index 0000000000000000000000000000000000000000..04a7953b96a4eb3745c8f0740263068e7b7b1980 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/float2.html" @@ -0,0 +1,40 @@ + + + + + + + float的破坏性 + + + +
+
我是第一个浮动盒子
我是第二个浮动盒子
+
我是第三个浮动盒子
+
+
我是兄弟盒子
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol.html" new file mode 100644 index 0000000000000000000000000000000000000000..4cb1ca4f8c9ad068b40132fbaf32e65764849f0d --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol.html" @@ -0,0 +1,24 @@ + + + + + + + Document + + + +
+

简单的多列例子

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aperiam recusandae odit corporis ullam ratione sunt culpa! Fugit, deserunt doloribus. Fugit, nulla numquam! Distinctio nostrum dolor eos voluptatibus! Nesciunt accusamus nihil sit! Voluptatem doloremque temporibus ea. Expedita, debitis dicta? Consequuntur.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nostrum et eaque corrupti aliquam laudantium dolor voluptatem dolorem, ab alias officiis quidem saepe quis quam at aliquid ipsum omnis voluptates nam ad sapiente voluptate repudiandae. Autem placeat dolores minus soluta!

+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol2.html" new file mode 100644 index 0000000000000000000000000000000000000000..1e9055b639a28cdb486ff4397c7739d4668c877d --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/multicol2.html" @@ -0,0 +1,78 @@ + + + + + + + + Document + + + + +
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+
+

我是卡片标题

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at + ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.

+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/position.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/position.html" new file mode 100644 index 0000000000000000000000000000000000000000..c87994a2d7b2837aa190043618eebe538ecf3961 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/position.html" @@ -0,0 +1,24 @@ + + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky.html" new file mode 100644 index 0000000000000000000000000000000000000000..bc9c5cc9dd37c8f523972146007fa0d7378ced00 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky.html" @@ -0,0 +1,31 @@ + + + + + + + Document + + + +
+
我是粘性布局元素
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut repellat architecto cum provident corporis vitae aspernatur! Esse quis debitis omnis exercitationem! Doloribus iure molestias accusantium veniam dolorum consectetur error ipsa, nemo sint vitae ad expedita ipsam id. Consectetur harum facere enim accusantium vero repellat, temporibus sit laborum esse, nisi sunt.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore tenetur sapiente laudantium, ab molestias eum! Adipisci consequuntur cupiditate ullam quam, atque aspernatur reiciendis quod soluta error qui ab nobis, illo, autem molestias? Blanditiis quam suscipit accusantium aperiam, alias officiis, sapiente ex dolores ab esse officia consequuntur, natus tenetur quis accusamus.

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis cum tempore aperiam accusantium tenetur quisquam ab ratione obcaecati perferendis, nulla dolorem dignissimos expedita blanditiis aut cupiditate, saepe officia quod officiis, amet optio fuga inventore adipisci. Exercitationem aliquid iure ad, qui facere placeat sed, repellat quisquam blanditiis facilis atque, debitis soluta!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fugit laboriosam animi nam quia, voluptate optio voluptates, sed neque necessitatibus nesciunt. Dolore accusamus eum, nihil voluptatibus sit temporibus, quia repudiandae eaque nobis voluptate corporis soluta nisi inventore quas dicta? Perspiciatis quas nemo velit tenetur quis, animi sit. Vel, quo molestias.

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi incidunt nobis totam omnis explicabo accusamus nisi nostrum pariatur quidem similique molestiae autem repellat cumque dolore, tenetur laborum exercitationem maxime ut id harum consequuntur quia. Nisi quo delectus corporis ratione, dignissimos asperiores aliquid exercitationem maxime eaque consectetur? Vero aperiam reiciendis minima.√

+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky2.html" new file mode 100644 index 0000000000000000000000000000000000000000..f966643ae61646ff1fcb19e94fb0d018fc85bea4 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky2.html" @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky3.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky3.html" new file mode 100644 index 0000000000000000000000000000000000000000..4acb2a4a9858a54082aacf8e1d558c389c16536e --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_06/example/sticky3.html" @@ -0,0 +1,181 @@ + + + + + + + + Document + + + + +
`。 | +| table-row | CSS2 | 将元素设置为表格行。同`
`元素上面,不能设在`
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名喜欢的颜色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
小明蓝色
小红粉色
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..8030cb2b3f8e73ca04c1a40c804cb8ae4306cd59 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo01.html" @@ -0,0 +1,115 @@ + + + + + + Document + + + +
+ + + +
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..d9592d854c182477281ff929cd2912176ba24c51 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/demo02.html" @@ -0,0 +1,238 @@ + + + + + + + Document + + + + + +
+ 切换至 inline-flex + + + + + + + 增加成员 + 减少成员 + 增加内联文本 +
+
+

非内联 flex

+
+
1
+
2
+
3
+
4
+
5
+
+ 非内联 flex +
+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/flex.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/flex.html" new file mode 100644 index 0000000000000000000000000000000000000000..b5c4bac20e40b496f41523cca83ba66511138ea7 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/flex.html" @@ -0,0 +1,127 @@ + + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/js/jquery-3.6.0.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/js/jquery-3.6.0.js" new file mode 100644 index 0000000000000000000000000000000000000000..200b54e470a5d67925b91e87f4e769191a9f8c16 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/20211122h5\344\275\234\344\270\232/js/jquery-3.6.0.js" @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 || <'flex-wrap'> +``` + +当多属性同时使用的时候,使用空格分隔。 + +```css +.container { + display: flex; + flex-flow: row-reverse wrap-reverse; +} +``` + +### 3.4 justify-content + +`justify-content`属性决定了水平方向子项的对齐和分布方式。CSS 的`text-align`有个属性值为`justify`,可实现两端对齐。所以,当我们想要控制flex元素的水平对齐方式的时候,记住`justify`这个单词,`justify-content`属性也就记住了。 + +**语法** + +```css +justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; +``` + +**值**:具体对齐方式与轴的方向有关,下面假设主轴为从左到右。 + +- **flex-start**:左对齐 +- **flex-end**:右对齐 +- **center**:居中 +- **space-between**: 两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。 +- **space-around**:每个项目两侧的间隔相等。around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。 +- **space-evenly**:evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。 + +### 3.5 align-items + +`align-items`中的`items`指的就是flex子项们,`align-items`属性定义项目在交叉轴上如何对齐。默认情况下,我们的交叉轴指的是纵轴。因此`align-items`指的就是flex子项们相对于flex容器在垂直方向上的对齐方式,大家是一起顶部对齐呢,底部对齐呢,还是拉伸对齐呢,类似这样。 + +**语法** + +```css +align-items: stretch | flex-start | flex-end | center | baseline; +``` + +**值** + +- **stretch**: 默认值。flex子项拉伸。如果flex子项设置了高度,则按照设置的高度值渲染,而非拉伸。如果没有设置高度,则子项会拉伸高度和容器高度一致。 +- **flex-start**:交叉轴的起点对齐。 +- **flex-end**:交叉轴的终点对齐。 +- **center**:交叉轴的中点对齐。 +- **baseline**:项目的第一行文字的基线对齐。 + +### 3.6 align-content + +`align-content`可以看成和`justify-content`是相似且对立的属性,`justify-content`指明水平方向flex子项的对齐和分布方式,而`align-content`则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行,则`align-content`属性是没有任何效果的。 + +**语法** + +```css +align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly; +``` + +**值** + +- **stretch**:默认值。每一行flex子元素都等比例拉伸。例如,如果共两行flex子元素,则每一行拉伸高度是50%。 +- **flex-start**:与文档流方向相关。默认表现为顶部堆砌。 +- **flex-end**:与文档流方向相关。默认表现为底部堆放。 +- **center**:表现为整体垂直居中对齐。 +- **space-between**:表现为上下两行两端对齐。剩下每一行元素等分剩余空间。 +- **space-around**:每一行元素上下都享有独立不重叠的空白空间。 +- **space-evenly**:每一行元素都完全上下等分。 + +## 4. Flex 子项上的属性 + +### 4.1 order + +我们可以通过设置`order`改变某一个flex子项的排序位置。 + +**语法:** + +```css +order: ; /* 整数值,默认值是 0 */ +``` + +所有flex子项的默认`order`属性值是0,因此,如果我们想要某一个flex子项在最前面显示,可以设置比0小的整数,如`-1`就可以了。 + +### 4.2 flex-grow + +`flex-grow`属性中的grow是扩展的意思,扩展的就是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。 + +**语法** + +```css +flex-grow: ; /* 数值,可以是小数,默认值是 0 */ +``` + +`flex-grow`不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。如果`flex-grow`大于0,则flex容器剩余空间的分配就会发生,具体规则如下: + +- 所有剩余空间总量是1。 +- 如果只有一个flex子项设置了`flex-grow`属性值: + - 如果`flex-grow`值小于1,则扩展的空间就总剩余空间和这个比例的计算值。 + - 如果`flex-grow`值大于1,则独享所有剩余空间。 +- 如果有多个flex设置了`flex-grow`属性值: + - 如果`flex-grow`值总和小于1,则每个子项扩展的空间就总剩余空间和当前元素设置的`flex-grow`比例的计算值。 + - 如果`flex-grow`值总和大于1,则所有剩余空间被利用,分配比例就是`flex-grow`属性值的比例。例如所有的flex子项都设置`flex-grow:1`,则表示剩余空白间隙大家等分,如果设置的`flex-grow`比例是1:2:1,则中间的flex子项占据一半的空白间隙,剩下的前后两个元素等分。 + +### 4.3 flex-shrink + +shrink是“收缩”的意思,`flex-shrink`主要处理当flex容器空间不足时候,单个元素的收缩比例。 + +**语法** + +```css +flex-shrink: ; /* 数值,默认值是 1 */ +``` + +`flex-shrink`不支持负值,默认值是1,也就是默认所有的flex子项都会收缩。如果设置为0,则表示不收缩,保持原始的`fit-content`宽度。 + +`flex-shrink`的内核跟`flex-grow`很神似,`flex-grow`是空间足够时候如何利用空间,`flex-shrink`则是空间不足时候如何收缩腾出空间。 + +两者的规则也是类似。已知flex子项不换行,且容器空间不足,不足的空间就是“完全收缩的尺寸”: + +- 如果只有一个flex子项设置了`flex-shrink`: + - `flex-shrink`值小于1,则收缩的尺寸不完全,会有一部分内容溢出flex容器。 + - `flex-shrink`值大于等于1,则收缩完全,正好填满flex容器。 +- 如果多个flex子项设置了`flex-shrink`: + - `flex-shrink`值的总和小于1,则收缩的尺寸不完全,每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的`flex-shrink`的值。 + - `flex-shrink`值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和`flex-shrink`值的比例一样。 + +### 4.4 flex-basis + +`flex-basis`定义了在分配剩余空间之前元素的默认大小。 + +**语法** + +```css +flex-basis: | auto; /* 默认值是 auto */ +``` + +默认值是`auto`,就是自动。有设置`width`则占据空间就是`width`,没有设置就按内容宽度来。 + +如果同时设置`width`和`flex-basis`,就渲染表现来看,会忽略`width`。 + +当剩余空间不足的时候,flex子项的实际宽度并通常不是设置的`flex-basis`尺寸,因为flex布局剩余空间不足的时候默认会收缩。 + +### 4.5 flex + +`flex`属性是`flex-grow`,`flex-shrink`和`flex-basis`的缩写。 + +**语法**: + +```css +flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] +``` + +其中第2和第3个参数(`flex-shrink`和`flex-basis`)是可选的。默认值为`0 1 auto`。 + +- 默认值:`flex: 0 1 auto;` 不扩展,会缩小,无默认宽度。 +- `flex: none`等同于`flex: 0 0 auto;` 不扩展,不缩小,无默认宽度。 +- `flex: auto`等同于`flex: 1 1 auto; 会扩展,会缩小,无默认宽度。` + +### 4.6 align-self + +`align-self`指控制单独某一个flex子项的垂直对齐方式。写在flex容器上的`align-items`属性,控制的是全体子项,而这里的`self`控制的是自己。其他区别不大,语法几乎一样: + +```css +align-self: auto | flex-start | flex-end | center | baseline | stretch; +``` + +唯一区别就是`align-self`多了个`auto`(默认值),表示继承自flex容器的`align-items`属性值。其他属性值含义一模一样。 + +## 5. Flex的其他知识点 + +- 在Flex布局中,flex子元素的设置`float`,`clear`以及`vertical-align`属性都是没有用的。 +- Flexbox布局最适合应用程序的组件和小规模布局(一维布局),而Grid布局则适用于更大规模的布局(二维布局)。 + +## 作业 + +1. 绘制下面的图片: + +![](images/08-homework.jpg) + +2. 我们的课件里面介绍的属性是`display: flex`的例子。请同学们参考下列链接,制作一个属性选择效果页面。将`display: inline-flex`,`flex-direction: column`等属性值情况下的表现一起通过例子表现出来。 + + [Flexbox属性效果](https://changk99.github.io/flexbox/) + + ![](images/08-homework-02.png) + + 只需要制作这样一块内容的效果即可。样式可以自行优化。 diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..9f9866c4aefbe72182846ed653f1380a9c485396 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-02.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-02.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..f17f94cc3bd82ac2956e26964a0fe3d90e116cdd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-02.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-03.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-03.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..9c419afeeabbd0f6c6f89855cfd175f5ec9e9099 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-03.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..ec3619ba99a6a942e568988efd235ea3558f657f Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-flex-wrap-1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..8eacfecf7496e923cb23bc6e25a5f81e5666af01 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..0ce935f6588fd7286b048fe4e2f5f3f252049c09 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/courseware/images/08-homework.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/01-flex.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/01-flex.html" new file mode 100644 index 0000000000000000000000000000000000000000..afb0a07b7647e58d935452d9b85c0b1ee7895430 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/01-flex.html" @@ -0,0 +1,38 @@ + + + + + + + Document + + + +
+
我是内容1
+
我是内容2
+
我是内容3
+
我是内容4
+ 我是文本 + +
+ + 我是span1我是span2我是span3 + + 我是兄弟元素 + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/02-flex-direction.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/02-flex-direction.html" new file mode 100644 index 0000000000000000000000000000000000000000..0129eab0c01c6deca37f7ae463860d5153c3c457 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/02-flex-direction.html" @@ -0,0 +1,45 @@ + + + + + + + + Document + + + + + +
+
+
+ + + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/03-flex-wrap.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/03-flex-wrap.html" new file mode 100644 index 0000000000000000000000000000000000000000..ab25ac6142b756d9c1974b0948bc9436e82a4ae7 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/03-flex-wrap.html" @@ -0,0 +1,46 @@ + + + + + + + Document + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/04-justify-content.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/04-justify-content.html" new file mode 100644 index 0000000000000000000000000000000000000000..f99231893591bc38bf80d7972be9624273c3c936 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/04-justify-content.html" @@ -0,0 +1,70 @@ + + + + + + + Document + + + +

justify-content: flex-start;

+
+
1
+
2
+
3
+
4
+
+

justify-content: flex-end;

+
+
1
+
2
+
3
+
4
+
+

justify-content: center;

+
+
1
+
2
+
3
+
4
+
+

justify-content: space-between;

+
+
1
+
2
+
3
+
4
+
+

justify-content: space-around;

+
+
1
+
2
+
3
+
4
+
+

justify-content: space-evenly;

+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/05-align-items.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/05-align-items.html" new file mode 100644 index 0000000000000000000000000000000000000000..3e1a5b1f0c99b8b32a4b87ca797127d3fe5d6110 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/05-align-items.html" @@ -0,0 +1,87 @@ + + + + + + + Document + + + +

align-items: stretch;

+

如果项目未设置高度或设为auto。将占满整个容器的高度。

+
+
1
+
2
+
3
+
4
+
+

align-items: flex-start;

+

交叉轴的起点对齐。默认情况下顶部对齐。

+
+
1
+
2
+
3
+
4
+
+

align-items: flex-end;

+

交叉轴的终点对齐。默认情况下底部对齐。

+
+
1
+
2
+
3
+
4
+
+

align-items: center;

+

交叉轴的中点对齐,表现为垂直居中对齐。

+
+
1
+
2
+
3
+
4
+
+

align-items: baseline;

+

子项的第一行文字的基线对齐。

+
+ THIS IS WORD +
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/06-align-content.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/06-align-content.html" new file mode 100644 index 0000000000000000000000000000000000000000..d02fd3575348dc5cbb2c34c790b8f76490e46f87 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/06-align-content.html" @@ -0,0 +1,61 @@ + + + + + + + Document + + + + +

+
+ + + + + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/07-order.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/07-order.html" new file mode 100644 index 0000000000000000000000000000000000000000..1aa904c2dae328ddd026a0a650d947c29b929f0f --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/07-order.html" @@ -0,0 +1,35 @@ + + + + + + + Document + + + +
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/08-flex-grow-01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/08-flex-grow-01.html" new file mode 100644 index 0000000000000000000000000000000000000000..8bd4f4237cf200118009f779adeadd0b313413f4 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/08-flex-grow-01.html" @@ -0,0 +1,53 @@ + + + + + + + Document + + + +
+

flex容器有3个子元素, 下列选择选择后,作用与第二个flex 子项。

+
+ + + + +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/09-flex-grow-02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/09-flex-grow-02.html" new file mode 100644 index 0000000000000000000000000000000000000000..a2820af17ce964af8d70f8e5fd3712258a209de7 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/09-flex-grow-02.html" @@ -0,0 +1,54 @@ + + + + + + + Document + + + +
+

flex容器有3个子元素,默认所有子项都设置了flex-grow:0.25, 下列选择选择后,作用与第二个flex 子项。

+
+ + + + +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/10-flex-shrink.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/10-flex-shrink.html" new file mode 100644 index 0000000000000000000000000000000000000000..310ffacc16f5eded563cc3da0d2413cf8ff9424b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/10-flex-shrink.html" @@ -0,0 +1,54 @@ + + + + + + + Document + + + +
+

flex容器有4个子元素, 下列选择选择后,作用与第二个flex 子项。

+
+ + + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/11-flex-basis.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/11-flex-basis.html" new file mode 100644 index 0000000000000000000000000000000000000000..cee3a73e6bdc03f213ad7d0008784ee7a0e233af --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/11-flex-basis.html" @@ -0,0 +1,53 @@ + + + + + + + Document + + + +
+

flex容器有3个子元素, 下列选择选择后,作用与第二个flex 子项。

+
+ + + + +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/12-flex.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/12-flex.html" new file mode 100644 index 0000000000000000000000000000000000000000..449715f6143817b4c801b1931ae5506b5a6ebb37 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/12-flex.html" @@ -0,0 +1,55 @@ + + + + + + + Document + + + +
+

flex容器有3个子元素, 下列选择选择后,作用与第二个flex 子项。

+
flex: none | auto | [<'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
+
+
+
+
+ +
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/13-align-selft.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/13-align-selft.html" new file mode 100644 index 0000000000000000000000000000000000000000..10bfc84c698951e80370c74a723c205d6a42c5e7 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/13-align-selft.html" @@ -0,0 +1,58 @@ + + + + + + + Document + + + +
+

首先我们设置flex容器baseline对齐,然后点击下面的单选框,给第2个flex子项设置不同align-self属性值,观察其表现:

+
+ + + + + +
+
+ x +
1
+
2
+
3
+
4
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo.js" new file mode 100644 index 0000000000000000000000000000000000000000..cad31dd64fcdbabfe81a62698295f2530d7047aa --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo.js" @@ -0,0 +1,12 @@ +window.addEventListener('DOMContentLoaded', function() { + console.log('aa'); + let inputs = document.querySelectorAll('input[name=option]'); + let box = document.querySelector('.parent'); + Array.from(inputs).forEach((ele, i) => { + ele.onchange = function() { + let value = this.value; + let prop = this.dataset.attr; + box.style[prop] = value; + } + }) +}) diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..2cf6642a26e07d1129aa5edbe0954e064cf8e2df --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/demo01.html" @@ -0,0 +1,26 @@ + + + + + + + Document + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/01.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/01.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..c5ad0ea91863886ae5b80457e54c706128cbc9cd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/01.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/02.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/02.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..12aeef39a8da0da77c69706ffd01c64b17054b41 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/02.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/03.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/03.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..d21e8e0e784756c016cb235e2e6b37c375709c5f Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/03.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/04.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/04.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..662221cf8c0d56172253c7f07e122e09870af7be Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/04.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/05.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/05.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..fe98eab745d80047b7655028300591a22a7091ae Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/05.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/06.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/06.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..555d635a9e478f697cd33f9e6ebd720833ceaebc Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_07/example/images/06.jpeg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..cb2630b65dc858c6c6db6a06dce3c8ff715ee54e --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo01.html" @@ -0,0 +1,142 @@ + + + + + + + + Document + + + + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..97108836821b99290ec9137936d89ed5a70e9a6b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/20211123h5\344\275\234\344\270\232/demo02.html" @@ -0,0 +1,130 @@ + + + + + + + + Document + + + + +
+ 50% + 50% + 33% +
+ + 33% + +
+ 33% + 25% + 25% + 25% + 25% + 50% + 50% +
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/09-\347\275\221\346\240\274\345\270\203\345\261\200.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/09-\347\275\221\346\240\274\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..52556e00a6d0c037aee4cb62acf039f7349d7220 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/09-\347\275\221\346\240\274\345\270\203\345\261\200.md" @@ -0,0 +1,614 @@ +# Grid 网格布局 + +## 课前回顾 + +上次课我们学习了flex布局。 + +## 本节目的 + +1. 了解网格布局相关的属性,尽量多练习。 +2. 属性较多,可以结合flex学过的属性一起练习。 + +## 1. 概述 + +网格布局(Grid)是目前最强大的CSS布局方案。 + +它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大的区别。 + +- Flex 布局是轴线布局,只能指定“项目”针对轴线的位置。我们常常用来做一维布局。 +- Grid 布局则是将容器划分成“行”和“列”,产生单元格,然后指定“项目”所在的单元格,可以看作是二维布局。 + +采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。 + +容器里面水平区域被称为 **“行”(row)**,垂直区域称为 **“列”(column)**。 + +行和列的交叉区域,称为 **“单元格”(cell)**。 + +正常情况下,`n`行和`m`列会产生`n * m`个单元格。例如:3行3列会产生9个单元格。 + +划分网格的线,称为 **“网格线”(grid line)**。水平网格线划分出行,垂直网格线划分出列。 + +正常情况下,`n`行有`n + 1`根水平网格线,`m`列有`m + 1`根垂直网格线,比如三行就有四根水平网格线。 + +![](images/09-grid-line.png) + +### 1.1 属性 + +在Grid布局中,所有相关CSS属性正好分为两部分,一部分作用在grid容器上,一部分作用在grid子项上。 + +| 作用在grid容器上 | 作用在grid子项上 | +| --------------------- | ----------------- | +| grid-template-columns | grid-column-start | +| grid-template-rows | grid-column-end | +| grid-template-areas | grid-row-start | +| grid-template | grid-row-end | +| grid-column-gap | grid-column | +| grid-row-gap | grid-row | +| grid-gap | grid-area | +| justify-items | justify-self | +| align-items | align-self | +| place-items | place-self | +| jutify-content | | +| align-content | | +| place-content | | +| grid-auto-column | | +| grid-auto-rows | | +| grid-auto-flow | | +| grid | | + +Grid 布局相关CSS属性虽然很多,但是实际上都不难理解,难的是这些属性不太容易记住,需要多多实战手写才能信手拈来。 + +## 2. 作用在grid容器上的属性 + +### 2.1 display: grid + +`display: grid`指定一个容器采用网格布局。容器表现为块元素的特性。 + +`display: inline-grid`指定一个容器采用网格布局,容器表现为行内块元素的特性。 + +```css +.box1 { + display: grid; +} +.box2 { + display: inline-grid; +} +``` + +> 设为网格布局以后,容器子元素(项目)的`float`、`display: inline-block`、`display: table-cell`、`vertical-align`和`column-*`等设置都将失效。 + +### 2.2 grid-template-columns 和 grid-template-rows + +这两个CSS属性用来为容器划分行和列。`grid-template-columns`属性定义每一列的列宽,`grid-template-row`属性定义每一列的行高。 + +他们属性值的语法格式一模一样。可取的语法比较复杂。我们简化一下: + +```css +.container { + grid-tempalte-columns: ... | ...; + grid-tempalte-rows: ... | ...; +} +``` + +**值:** + +- **``**:计划分的尺寸。可以是长度值,百分比值,以及`fr`单位(网格剩余空间比例单位)。 +- **``**:网格线名称,你可以选择任意名称。 + +看一个简单的例子: + +```css +.container { + display: grid; + grid-template-columns: 100px 100px 100px; + grid-template-rows: 100px 100px 100px 100px; +} +``` + +`grid-tempalte-columns`后面有3个值,表示分为了3列,从左往右每列的尺寸都是`100px`。 + +`grid-template-rows`后面有3个值,表示分为3行,从上往下,每行的高度都是`100px`; + +我们还可以给分隔线进行命名,语法是使用`[]`包裹我们自定义的名称,可以是中文: + +```css +.container { + grid-template-columns:[第一根纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线]; + grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行4] 60px [行末]; +} +``` + +给分割线命名是为了更好的对区域进行描述,如果我们没有描述某个区域的需求,就不需要命名了。 + +#### 1. repeat 语法 + +有的时候,我们网格的划分是很规律的。重复写同样的值比较麻烦,有其是网格很多时。这个时候,我们可以使用`repeat()`函数,简化重复的值。 + +```css +.container { + display: grid; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 33.33%) +} +``` + +`repeat()`接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。 + +`repeat()`重复某种模式也是可以的。 + +```css +grid-template-columns: repeat(2, 100px 20px 80px); +``` + +上面的语句定义了6列,第一列和第四列的宽度为`100px`,第二列和第五列为`20px`,第三列和第六列为`80px`。 + +#### 2. auto-fill 关键字 + +有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用`auto-fill`关键字表示自动填充。 + +```css +.container { + display: grid; + grid-template-columns: repeat(auto-fill, 100px); +} +``` + +上面语句的意思是:每列宽度`100px`,然后自动填充,直到容器不能放置更多的列。 + +#### 3. fr 关键字 + +`fr`是单词fraction的缩写,表示分数。 + +- 简单的例子 + + ```css + .container { + grid-template-columns: 1fr 1fr 1fr; + } + ``` + + 上面语句的意思是,网格宽度三等分。每个单元格占据宽度的三分之一。效果如下: + + ![](images/09-grid-fr-01.png) + +- 如果有固定尺寸值,则划分剩余空间大小。 + + ```css + .container { + grid-template-columns: 200px 1fr 1fr 1fr; + } + ``` + + 4列,后面3列宽度是grid容器宽度减去200px后的1/3大小。效果如下: + + ![](images/09-grid-fr-02.png) + +- 如果和auto混用 + + ```css + .container { + grid-template-columns: auto 1fr 1fr 1fr; + } + ``` + + 从效果看,当有设置`fr`尺寸的时候,`auto`的尺寸表现为'行内块'特性,宽度为内容的宽度。如果没有设置`fr`尺寸的网格,则表现为拉伸。 + + ![](images/09-grid-fr-03.png) + +- 如果`fr`数值之和小于1时 + + ```css + .container { + grid-template-columns: auto 0.25fr 0.25fr 0.25fr; + } + ``` + + ![](images/09-grid-fr-04.png) + + 这里计算就相对复杂些,首先,由于第一个网格尺寸设置为`auto`,因此`fr`计算需要的剩余空间尺寸是grid容器的宽度减去“宽auto”这几个字符的宽度。所以,后面3个`0.25fr`元素的宽度是:`(容器宽度 - “宽auto”字符宽度) * 0.25`。然后剩余尺寸就是第一个网格宽度。 + +### 2.3 grid-template-areas + +网格布局允许指定“区域”(area),一个区域由单个或多个单元格组成。 + +`grid-template-areas`属性用于定义区域。 + +```css +.container { + display: grid; + grid-template-columns: 100px 100px 100px; + grid-template-rows: 100px 100px 100px; + grid-template-areas: 'a b c' + 'd e f' + 'g h i'; +} +``` + +上面代码先划分出9个单元格,然后将其定名为`a`到`i`的9个区域,分别对应这9个单元格。 + +多个单元格合并成一个区域的写法如下。 + +```css +grid-template-areas: 'a a a' + 'b b b' + 'c c c'; +``` + +下面是一个布局实例: + +```css +grid-template-areas: "header header header" + "main main sidebar" + "footer footer footer"; +``` + +上面代码中,顶部是页眉区域`header`,底部是页脚区域`footer`,中间部分则为`main`和`sidebar`。 + +> **注意:**如果我们给网格区域命了名,但是没有给网格线命名,则会自动根据网格区域名称生成网格线名称,规则是区域名称后面加`-start`和`-end`。 + +将区域命名后,在子项目中使用'grid-area'可以指定该子项占据的区域(有点类似合并单元格)。 + +- 如果某些区域不需要利用,则使用"点"(`.`)表示。 + + ```css + grid-template-areas: 'a . c' + 'd . f' + 'g . i'; + ``` + + 上面代码中,中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域。 + +### 2.4 grid-row-gap(row-gap), grid-column-gap(column-gap), grid-gap(gap) + +`grid-row-gap`属性设置行与行的间隔(行间距),`grid-column-gap`属性设置列与列的间隔(列间距)。 + +```css +.container { + grid-row-gap: 20px; + grid-column-gap: 20px; +} +``` + +![](images/09-grid-gap-01.png) + +`grid-gap`属性是`grid-column-gap`和`grid-row-gap`的合并简写形式,语法如下。 + +```css +grid-gap: ; +``` + +如果`grid-gap`省略了第二个值,浏览器认为第二个值等于第一个值。 + +> 根据最新标准,上面三个属性名的`grid-`前缀已经删除,`grid-column-gap`和`grid-row-gap`写成`column-gap`和`row-gap`,`grid-gap`写成`gap`。 + +### 2.5 justify-items,align-items + +`justify-items`指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐,语法如下: + +```css +.container { + justify-items: stretch | start | end | center; +} +``` + +**值** + +- stretch:拉伸。表现为水平填充。 +- start:表现为网格水平尺寸收缩为内容宽度,同时沿着网格线左侧对齐显示。 +- end:表现为网格水平尺寸收缩为内容大小,同时沿着网格线右侧对齐显示。 +- center:表现为网格水平尺寸收缩为内容大小,同时在当前网格区域内部水平居中对齐显示。 + +### 2.6 align-items + +`align-items`指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐,语法如下: + +```css +.container { + align-items: stretch | start | end | center; +} +``` + +**值** + +- stretch:拉伸。表现为垂直填充。 +- start:表现为网格垂直尺寸收缩为内容高度,同时沿着上网格线对齐显示。 +- end:表现为网格垂直尺寸收缩为内容高度,同时沿着下网格线对齐显示。 +- center:表现为网格垂直尺寸收缩为内容高度,同时在当前网格区域内部垂直居中对齐显示。 + +### 2.7 place-items + +`place-items`可以让`align-items`和`justify-items`属性写在单个声明中。语法如下: + +```css +.container { + place-items: ?; +} +``` + +这里顺序是`align-items`在前,`justify-items`在后。 + +### 2.8 justify-content + +`justify-content`指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效果。 + +**语法** + +```css +justify-content: stretch | start | end | center | space-between | space-around | space-evenly; +``` + +**值** + +- **stretch:**默认值。拉伸,宽度填满grid容器,拉伸效果需要网格目标尺寸设为auto时候才有效,如果定死了宽度,则无法拉伸。 +- **start:**与文档流方向相关。默认表现为左对齐。 +- **end:**逻辑CSS属性值,与文档流方向相关。默认表现为右对齐。 +- **center:**表现为居中对齐。 +- **space-between:**表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。 +- **space-around:**around是环绕的意思,意思是每个grid子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。 +- **space-evenly:**evenly是匀称、平等的意思。也就是视觉上,每个grid子项两侧空白间距完全相等。 + +### 2.9 align-content + +`align-content`可以看成和`justify-content`是相似且对立的属性,`justify-content`指明水平方向grid子项的分布方式,而`align-content`则是指明垂直方向每一行grid元素的分布方式。如果所有grid子项只有一行,则`align-content`属性是没有任何效果的。 + +**语法:** + +```css +align-content: stretch | start | end | center | space-between | space-around | space-evenly; +``` + +**值** + +- **stretch:**默认值。每一行grid子元素都等比例拉伸。例如,如果共两行grid子元素,则每一行拉伸高度是50%。拉伸效果需要网格目标尺寸设为auto时候才有效,如果定死了高度,则无法拉伸。 +- **start:**与文档流方向相关。默认表现为顶部堆砌。 +- **end:**逻辑CSS属性值,与文档流方向相关。默认表现为底部堆放。 +- **center:**表现为垂直居中对齐。 +- **space-between:**表现为上下两行两端对齐。剩下每一行元素等分剩余空间。 +- **space-around:**每一行元素上下都享有独立不重叠的空白空间。。 +- **space-evenly:**每一行元素都完全上下等分。 + +### 2.10 place-content + +`place-content`可以让`align-content`和`justify-content`属性写在一个CSS声明中,也就是俗称的缩写。语法如下: + +```css +.container { + place-content: ?; +} +``` + +这里顺序是`align-content`在前,`justify-content`在后。 + +### 2.11 grid-auto-columns, grid-auto-rows + +指定任何自动生成的网格轨道(也称为隐式网格轨道)的大小。 当网格项目多于网格中的单元格或网格项目放置在显式网格之外时,将创建隐式轨道。例如:网格只有3列,但是某个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。 + +`grid-auto-columns`属性和`grid-auto-rows`属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与`grid-template-columns`和`grid-template-rows`完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。 + +例如:网格划分好是`3 x 3`单元格。但是,现在我要将8号项目指定在第4行,9号项目指定在第5行。 + +```css +.container { + display: grid; + grid-template-columns: 100px 100px 100px; + grid-template-rows: 100px 100px 100px; + grid-auto-rows: 50px; + grid-auto-columns: 80px; +} +.item8 { + /* 将第8个盒子,放置在第2条纵线与第3条纵线中间 */ + grid-column: 2 / 3; + /* 将第8个盒子,放置在第4条行线与第5条行线中间 */ + grid-row: 4 / 5; +} +.item9 { + /* 将第9个盒子,放置在第3条纵线与第4条纵线中间 */ + grid-column: 3 / 4; + /* 将第8个盒子,放置在第5条行线与第6条行线中间 */ + grid-row: 5 / 6; +} +``` + +```html +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+``` + +![](images/09-grid-auto-01.png) + +### 2.12 grid-auto-flow + +`grid-auto-flow`属性控制没有明确指定位置的grid子项的放置方式。比方说定义了一个5*2的10格子,共有5个元素,其中2个元素指定了放在哪个格子里,还有3个则自生自灭排列。此时,这3个元素如何排列就是由`grid-auto-flow`属性控制的。 + +**语法** + +```css +.container { + grid-auto-flow: row | column | row dense | column dense +} +``` + +**值** + +- **row:**默认值,没有制定位置的网格依次水平排列优先。 +- **column:**没有指定位置的网格依次垂直排列优先。 +- **dense:**dense这个英文是稠密的意思。如果有设置,则表示自动排列启用“密集”打包算法。如果稍后出现的网格比较小,则尝试看看前面有没有合适的地方放置,使网格尽可能稠密紧凑。此属性值仅仅改变视觉顺序,会导致DOM属性和实际呈现顺序不符合,这对于可访问性是不友好的,建议谨慎使用。 + +### 2.13 grid-template, grid + +`grid-template`属性是`grid-template-columns`、`grid-template-rows`和`grid-template-areas`这三个属性的合并简写形式。 + +`grid`属性是`grid-template-rows`、`grid-template-columns`、`grid-template-areas`、 `grid-auto-rows`、`grid-auto-columns`、`grid-auto-flow`这六个属性的合并简写形式。 + +从易读易写的角度考虑,还是建议不要合并属性,所以这里就不详细介绍这两个属性了。 + +## 3. 作用在Grid子项上的属性 + +### 3.1 grid-column-start,grid-column-end, grid-row-start, grid-row-end + +项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。 + +- `grid-column-start`属性:左边框所在的垂直网格线 +- `grid-column-end`属性:右边框所在的垂直网格线 +- `grid-row-start`属性:上边框所在的水平网格线 +- `grid-row-end`属性:下边框所在的水平网格线 + +这个4个属性的取值有下列几种情况: + +- 数字,表示第几根网格线。 + + ```css + .item1 { + /* 左边框是第二根纵线 */ + grid-column-start: 2; + /* 右边框是第4根纵线 */ + grid-column-end: 4; + /* 上边框是第二根行线 */ + grid-row-start: 2; + /* 下边框是第二根行线 */ + grid-row-end: 4; + } + ``` + + 除了1号项目以外,其他项目都没有指定位置,由浏览器自动布局,这时它们的位置由容器的`grid-auto-flow`属性决定,这个属性的默认值是`row`,因此会"先行后列"进行排列。 + +- 这4个属性值,除了表示第几个网格先外,还可以是指定的网格线的名称。 + + ```css + .item1 { + grid-column-start: 第一根纵线; + grid-column-end: 纵线2; + } + ``` + +- 这4个属性值还可以使用`span`关键字,表示“跨越”。表示跨越多少个网格。 + + ```css + .item1 { + /* 1号项目的左边框距离右边框跨越2个网格。 */ + grid-column-start: span 2; + /* 下面语句等效 */ + grid-column-end: span 2; + } + ``` + +### 3.2 grid-column, grid-row + +`grid-column`属性是`grid-column-start`和`grid-column-end`的合并简写形式,`grid-row`属性是`grid-row-start`属性和`grid-row-end`的合并简写形式。 + +```css +.item { + grid-column: / ; + grid-row: / ; +} +``` + +下面是一个例子。 + +```css +.item1 { + grid-column: 1 / 3; + grid-row: 1 / 2; +} +/* 等同于 */ +.item1 { + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; +} +``` + +这两个属性之中,也可以使用`span`关键字,表示跨越多少个网格。 + +```css +.item1 { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +/* 等同于 */ +.item1 { + grid-column: 1 / span 2; + grid-row: 1 / span 2; +} +``` + +斜杠以及后面的部分可以省略,默认跨越一个网格。值表示从那个网格开始,默认跨越一个网格。 + +```css +.item1 { + grid-column: 1; + grid-row: 1; +} +``` + +### 3.3 grid-area + +`grid-area`属性指定项目放在哪一个区域。 + +```css +.item1 { + grid-area: e; +} +``` + +`e`是指在父盒子上`grid-template-area`定义的区域名。 + +`grid-area`属性还可用作`grid-row-start`、`grid-column-start`、`grid-row-end`、`grid-column-end`的合并简写形式,直接指定项目的位置。 + +```css +.item { + grid-area: / / / ; +} +``` + +例如: + +```css +.item-1 { + grid-area: 1 / 1 / 3 / 3; +} +``` + +### 3.4 justify-selft, align-selft, place-selft + +`justify-self`属性设置单元格内容的水平位置(左中右),跟`justify-items`属性的用法完全一致,但只作用于单个项目。 + +`align-self`属性设置单元格内容的垂直位置(上中下),跟`align-items`属性的用法完全一致,也是只作用于单个项目。 + +```css +.item { + justify-self: start | end | center | stretch; + align-self: start | end | center | stretch; +} +``` + +这两个属性都可以取下面四个值。 + +- start:对齐单元格的起始边缘。 +- end:对齐单元格的结束边缘。 +- center:单元格内部居中。 +- stretch:拉伸,占满单元格的整个宽度(默认值)。 + +`place-self`属性是`align-self`属性和`justify-self`属性的合并简写形式。 + +```css +place-self: ; +``` + +如果省略第二个值,`place-self`属性会认为这两个值相等。 + +## 作业 + +1. 用grid布局,实现上节课骰子的界面效果。 +2. ![](images/09-homework.png) + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..a04e5a1b420fa1b9a3d6efac47d4e10ea3972f82 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-flow.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-flow.png" new file mode 100644 index 0000000000000000000000000000000000000000..abc6d0df3ea4b40f7295370453b00853f85d5aa5 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-auto-flow.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..9802a224dcd829120b83eeccd8d4150a0cb158cd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..2e47f5f6cabf6a49ad91f9fd7c64e6b6a4059b31 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-03.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-03.png" new file mode 100644 index 0000000000000000000000000000000000000000..e7faa67de93fbe4de823b5420d0c4cafcf728786 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-03.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-04.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-04.png" new file mode 100644 index 0000000000000000000000000000000000000000..f313401f4933d99eead30909d4910476196107eb Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-fr-04.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-gap-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-gap-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..4206a8c0a44fb97e678accf605ed17daa58ec8fc Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-gap-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-line.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-line.png" new file mode 100644 index 0000000000000000000000000000000000000000..d15a4145a828b97f2c3ed3cdb879380e46daae67 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-grid-line.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-homework.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-homework.png" new file mode 100644 index 0000000000000000000000000000000000000000..c0f0fff37fc01c9a558e35669c8f2d4e5a7f1c8d Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/courseware/images/09-homework.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/01-grid.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/01-grid.html" new file mode 100644 index 0000000000000000000000000000000000000000..45da4b2129f30de14e01f0a50de44f60347a1468 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/01-grid.html" @@ -0,0 +1,37 @@ + + + + + + + Document + + + +
+
我是内容1
+
我是内容2
+
我是内容3
+
我是内容4
+ 我是文本 + +
+ + 我是span1我是span2我是span3 + + 我是兄弟元素 + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/02-grid-template.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/02-grid-template.html" new file mode 100644 index 0000000000000000000000000000000000000000..d2cbbb0f642812def09a20b3a3e8c8417b8d9a3b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/02-grid-template.html" @@ -0,0 +1,109 @@ + + + + + + + Document + + + + +

grid-template-columns 和 grid-template-rows

+
+
+

+

+                    .container {
+                        grid-template-columns: 100px 100px 100px;
+                        grid-template-rows: 80px 100px 50px;
+                    }
+                
+

+

+

+                    .container {
+                        grid-template-columns: repeat(3, 33.33%);
+                        grid-template-rows: repeat(2, 100px 20px 80px);
+                    }
+                
+

+

+

+                    .container {
+                        grid-template-columns: repeat(auto-fill, 100px);
+                    }
+                
+

+

+

+                    .container {
+                        grid-template-columns: 1fr 1fr 1fr;
+                    }
+                
+

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/03-fr.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/03-fr.html" new file mode 100644 index 0000000000000000000000000000000000000000..56d67fc6af7447d2c265100d50f33d975b0f6648 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/03-fr.html" @@ -0,0 +1,81 @@ + + + + + + + Document + + + + + + + + + Document + + + + +

fr 关键字

+

1. 简单例子

+
+        .container {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    
+
+
宽1fr
占据1/3
+
宽1fr
占据1/3
+
宽1fr
占据1/3
+
宽1fr
占据1/3
+
+

2. 如果有固定尺寸值,则划分剩余空间大小

+
+        .container {
+            grid-template-columns: 200px 1fr 1fr 1fr;
+        }
+    
+
+
宽200px
+
宽1fr
+
宽1fr
+
宽1fr
+
+

3. 和auto混用

+
+        .container {
+            grid-template-columns: auto 1fr 1fr 1fr;
+        }
+    
+
+
宽auto
+
宽1fr
+
宽1fr
+
宽1fr
+
+

3. 和auto混用, fr的值小于1

+
+        .container {
+            grid-template-columns: auto 0.25fr 0.25fr 0.25fr;
+        }
+    
+
+
宽auto
+
宽0.25fr
+
宽0.25fr
+
宽0.25fr
+
+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/04-grid-gap.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/04-grid-gap.html" new file mode 100644 index 0000000000000000000000000000000000000000..9debf3b62f3fd9df8d629791b99f93fdbebe27e4 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/04-grid-gap.html" @@ -0,0 +1,31 @@ + + + + + + + Document + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/05-justify-items.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/05-justify-items.html" new file mode 100644 index 0000000000000000000000000000000000000000..4e31163386a656b477f63016a7787a1a27b34338 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/05-justify-items.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + + + +
+

+ + + + +

+
+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/06-align-items.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/06-align-items.html" new file mode 100644 index 0000000000000000000000000000000000000000..2b46edffa835e323c11726575942927f7a602520 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/06-align-items.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + + + +
+

+ + + + +

+
+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/07-justify-content.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/07-justify-content.html" new file mode 100644 index 0000000000000000000000000000000000000000..beb1d09e1943b66d91d2c7c8e03d76e1bae6375b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/07-justify-content.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + +
+

+ + + + + + + +

+
+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/08-align-content.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/08-align-content.html" new file mode 100644 index 0000000000000000000000000000000000000000..61341ace57892621e2bd90b3e34e482d30248e31 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/08-align-content.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + +
+

+ + + + + + + +

+
+
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/09-grid-auto.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/09-grid-auto.html" new file mode 100644 index 0000000000000000000000000000000000000000..d294bf2aec289f10cf50c823be7bb03c110fb408 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/09-grid-auto.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/10-grid-auto-flow.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/10-grid-auto-flow.html" new file mode 100644 index 0000000000000000000000000000000000000000..eec5278c7cf3dd146fd974a842400ddeee0a1d35 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/10-grid-auto-flow.html" @@ -0,0 +1,46 @@ + + + + + + + Document + + + + +
+

+ + + + +

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/11-grid-item.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/11-grid-item.html" new file mode 100644 index 0000000000000000000000000000000000000000..3c20a4a4b7b86c52f224342cd10f2c44bdba3dc1 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/11-grid-item.html" @@ -0,0 +1,29 @@ + + + + + + + Document + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/12-grid-area.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/12-grid-area.html" new file mode 100644 index 0000000000000000000000000000000000000000..1a23171fab38a0736f52e84d2a9fc8afc8e4f8b5 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/12-grid-area.html" @@ -0,0 +1,35 @@ + + + + + + + Document + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/css/style.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/css/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..2672d94abfd6adb87604809b4c95fd1bb7f7185c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/css/style.css" @@ -0,0 +1,10 @@ +.container { + display: grid; +} +.item { + background-color: orange; + font-size: 2em; + text-align: center; + color: #fff; + border: 1px solid #333; +} \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/demo.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/demo.js" new file mode 100644 index 0000000000000000000000000000000000000000..4ec7a781b09880aeee5eaf66ff61ef4cde5d4514 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_08/example/demo.js" @@ -0,0 +1,11 @@ +window.addEventListener('DOMContentLoaded', function() { + let inputs = document.querySelectorAll('input[name=option]'); + let box = document.querySelector('.container'); + Array.from(inputs).forEach((ele, i) => { + ele.onchange = function() { + let value = this.value; + let prop = this.dataset.attr; + box.style[prop] = value; + } + }) +}) diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..042f8d9500015bc33d03c0f2c49cafc1105f0d30 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/demo01.html" @@ -0,0 +1,525 @@ + + + + + + + Document + + + + + +
+
+
+
+
+
12
+ + + +
1
+ + + +
2
+ + + +
3
+ + + +
4
+ + + +
5
+ + + +
9
+ + + +
7
+ + + +
8
+ + + +
9
+ + + +
10
+ + + +
11
+ + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/js/jquery-3.6.0.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/js/jquery-3.6.0.js" new file mode 100644 index 0000000000000000000000000000000000000000..200b54e470a5d67925b91e87f4e769191a9f8c16 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/20211125-css3\344\275\234\344\270\232-\346\227\266\351\222\237/js/jquery-3.6.0.js" @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 对于过渡动画值:`linear`线性过度,`ease-in`由慢到快,`ease-out`由快到慢,`ease-in-out`由慢到快在到慢。 + +举个简单的例子: + +```html +div { + width: 200px; + height: 200px; + background-color: red; + transition-property: background-color; + transition-duration: 0.2s; + transition-timing-function: linear; +} +div:hover{ + background-color: green; +} +``` + +上面的代码,实现了一个背景色过渡效果。我们也可以通过`transition`属性合并。 + +```css +div { + ... + transition: background-color 0.2s linear; +} +``` + +### 1.1 transition 属性 + +**`transition`** 属性是 `transition-property`,`transition-duration`,`transition-timing-function`和 `transition-delay`的一个简写属性。 + +- 这四个子属性只有`transition-duration`是必需值,且不能为0。其中`transition-duration`和`transition-delay`都是时间。当两个时间同时出现时,第一个`transition-duration`,第二个是`transition-delay`。只有一个时间值时,表示`transition-duration`的值,而`transition-delay`的值默认为0。 + +- 这四个属性之间用空格隔开。 + +- 当我们有多个属性发生变化是,我们可以定义多个属性的过渡效果。中间用逗号隔开。 + + ```css + div { + transition: 1s height, 1s 1s width; + } + ``` + + 上面的代码指定,width 在1s之后,再开始变化。 + + > delay的真正意义在于,它指定动画发生的顺序,使得多个不同的tansition可以连在一起,形成复杂效果。 + +### 1.2 transition 使用注意事项 + +- 目前,各大浏览器都支持无前缀的transition写法。 +- 不是所有的css属性都支持transition。完整的列表查看[这里](http://oli.jp/2010/css-animatable-properties/),以及具体的[效果](https://leaverou.github.io/animatable/)。 +- transition 需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。 + +### 1.3 tansition 的局限 + +transition 的优点在于简单易用,但是它有几个局限。 + +- transition 需要事件触发,所以没法在网页加载时自动发生。一般,过渡的触发有三种方式: + + - 伪类触发:`:hover`, `:active`, `:focus`。 + + - 媒体查询触发:`@media()` + + ```css + /* 当浏览器宽度小于1000px时,元素的宽度辩伪500px。即在.box选择器中设置过渡,即可产生效果。*/ + @media (max-width: 1000px) { + .box { + width: 500px; + } + } + ``` + + - js触发:配合js的事件,事件的处理函数里面修改元素的css属性值。 + +- transition 是一次性的,不能重复发生,除非一再触发。 + +- transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 + +## 2. 转换(transform)简介 + + `transform`的转换,并不是动态的,而是**最终时刻的状态**。它的移动,比例化,反转,旋转,和拉伸,显示在网页中,都**只是元素相对当前样式变换后的样式状态**。 + +可以对元素应用2D 或 3D 转换,从而对元素进行旋转、缩放、移动和倾斜。 + +可以使用2D或3D转换来转换元素。 + +- 2D 转换: 是元素在 X 轴和 Y 轴平面上发生变化。 +- 3D 转换:元素同时还可以在 Z 轴上发生变化。 + +> 转换属性是CSS3新增的属性,有兼容性问题。 + +### 2.1 转换属性 - tansform + +**语法** + +```css +transform: none | ; +``` + +**值** + +- none: 默认值,表示元素不进行转换。 + +- transform-function:表示一个或多个转换函数,中间以空格分开。 + + ```css + .box { + transform: rotate(90deg) scale(0.8); + } + ``` + +### 2.2 2D 转换 + +下面介绍了2D转换相关的属性值。 + +| 属性值 | 描述 | +| ---------------------- | ---------------------------------------- | +| matrix(n,n,n,n,n,n) | 定义 2D 转换,使用6个值的矩阵。 | +| translate(x, y) | 定义 2D 转换,沿着X 和Y轴移动元素。 | +| translateX(n) | 定义 2D 转换,沿着X轴移动元素。 | +| translateY(n) | 定义 2D 转换,沿着Y轴移动元素。 | +| scale(x, y) | 定义 2D 缩放转换,改变元素的宽度和高度。 | +| scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 | +| scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 | +| rotate(angle) | 定义 2D 旋转,在参数中规定角度。 | +| skew(x-angle, y-angle) | 定义 2D 倾斜转换,沿着X和Y轴。 | +| skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 | +| skewY(*angle*) | 定义 2D 倾斜转换,沿着 Y 轴。 | + +#### 2.2.1 translate() 方法 + + translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。 + +**语法** + +```css +translate(none | [] ) +``` + +**值** + +- 只有一个值时。该值是长度或者百分比的值,代表平移向量的横坐标,而向量的纵坐标会默认为0。`transalte(20px)`等价与`translate(20px , 0)`。 +- 参数是两个值构成时,第一个值表示横坐标的平移量,第二个值表示纵坐标的平移量。 +- 如果值是百分比的值,横坐标的偏移是参照元素的宽度来计算的。纵坐标的偏移是参数元素的高度来计算的。 + +```css +div { + transform: tarnslate(50px, 100px); +} +``` + +从左边元素移动50个像素,并从顶部移动100像素。 + +**应用场景**:控制元素水平垂直居中。 + +```css +.box { + position: absolute; + width: 100px; + height: 100px; + top: 50%; + left: 50%; + transform: tanslate(-50%, -50%); + background-color: orange; +} +``` + +> translateX() 和 translateY() 这两个函数表示只偏移对应坐标轴的位置。 + +#### 2.2.2 rotate() 方法 + +rotate() 方法用于旋转元素,根据原点,将元素按照给定的角度旋转。移动量由指定角度定义;如果为正值,则运动将为顺时针,如果为负值,则为逆时针 。 + +**语法** + +```css +rotate() +``` + +**值** + +- `` ,表示旋转的角度。 + +```css +.box { + transform: rotate(45deg); +} +``` + +#### 2.2.3 scale() 方法 + +​ `scale()`方法用于改变元素的尺寸。根据给定的高度和宽度来缩放尺寸。 + +**语法** + +```css +scale([, ]) +``` + +**值** + +- ``:默认值为1。取数值,可以是小数。大于1则放大,小于1则缩小。 +- 第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值。 + +```css +.box { + transform: scale(2); +} +``` + +> scaleX() 和 scaleY() ,分别表示对应坐标轴的缩放。 + +#### 2.2.4 skew() 方法 + +`skew()`方法用于让元素倾斜。以原点位置,围绕 X 轴和 Y 轴按照一定角度倾斜。它可能会改变元素的形状。 + +**语法** + +```css +skew( [, ]) +``` + +**值** + +- 第一个参数值表示X轴的倾斜的角度,第二个参数表示Y轴的倾斜的角度。 +- 如果第二个参数未提供,则默认为0。 +- 参数为负表示向反方向倾斜。 + +```css +.box { + tansform: skew(30deg, 20deg); +} +``` + +> skewX() 和 skewY() 分别对应坐标的倾斜。 + +### 2.3 转换的原点 - transform-origin + +`transform-origin`属性指定元素 **转换原点**的位置。 + +**语法** + +```css +transform-origin: [ | | left | center | right][ | | top | center | bottom ]? +``` + +**值** + +- 默认值:`50% 50%`, 效果等同于`center center`。 在元素的中心 。 +- 值可以是百分比,长度值,和关键字。其中百分比值和长度值可以为负值。 +- left:指定原点的横坐标为left +- center:指定原点的横坐标为center,第二个参数的center,指定原定的纵坐标为center +- right:指定原点的横坐标为right +- top:指定原点的纵坐标为top +- bottom:指定原点的纵坐标为bottom + + `transform-origin`属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。 + +- **一个值:** + - 必须是:长度,百分比,或者left, right, center, top, bottom 关键字中的一个。 +- **两个值:** + - 其中一个必须是长度,百分比,或left, center, right关键字中的一个 。 + - 另一个必须是长度,百分比,或top, center, bottom关键字中的一个 。 +- **三个值**: + - 前两个值和只有两个值时的用法相同。 + - 第三个值必须是长度,它始终代表Z轴的偏移量。 + +> [演示链接](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin) + +## 3. 动画(animation) + +要创建CSS3动画,需要了解`@keyframes`规则。 + +### 3.1 @keyframes + +`@keyframes`规则是创建动画,这个规则内指定一个CSS 样式和动画将逐步从目前的样式更改为新的样式。 + +```css +@keyframes myfirst { + from {background: red;} + to {background: yellow;} +} +``` + +当使用`from`,`to`时,等同于定义了`0%`到`100%`的动画过程,效果和`transition`一样。 + +但是`animation`的强大之处,就是可以定义任何时刻任何阶段的动画。 + +```css +@keyframes myfirst { + 0% {background:red; left:0px; top:0px;} + 25% {background:yellow; left:200px; top:0px;} + 50% {background:blue; left:200px; top:200px;} + 75% {background:green; left:0px; top:200px;} + 100% {background:red; left:0px; top:0px;} +} +``` + +### 3.2 使用 + +当`@keyframes`创建动画,需要将它绑定到一个选择器,否则动画不会有任何效果。 + +动画绑定至少需要设置两个值: + +- 规定动画的名称 +- 规定动画的时长 + +```css +div { + animation: myfirst 5s; +} +``` + +### 3.3 animation属性 + +动画相关的属性: + +| 属性 | 描述 | 默认值 | +| ------------------------- | ------------------------------ | ------ | +| animation | 复合属性。下列属性的简写形式。 | | +| animation-name | 对象运用的动画名称 | none | +| animation-duration | 动画持续的时间 | 0s | +| animation-timing-function | 动画的过渡类型 | ease | +| animation-delay | 动画延迟的时间 | 0s | +| animation-iteration-count | 动画循环的次数 | 1 | +| animation-direction | 动画在循环中是否反向运动 | normal | +| animation-play-state | 对象动画的状态 | none | +| anmation-fill-mode | 对象动画时间之外的状态 | none | + +- `animation`简写时,必须有两个属性值`animation-name`,`animation-duration`。属性中`animation-duration`和`animation-delay`都是时间。当两个时间同时出现时,第一个`animation-duration`,第二个是`animation-delay`。只有一个时间值时,表示`animation-duration`的值,而`animation-delay`的值默认为0。 + +- `animation-timing-function`:是控制时间的属性。可以取值`ease-in`, `ease-out`, `linear`等,这些过渡效果是连贯性的。我们还可以使用**steps()**函数,可以实现分布过渡。 + + > **steps()**函数,叫作阶跃函数。这个函数有两个参数: + > + > - 将过渡分为几段,这几段其实是在时间上分为几段去显示执行。 + > - 第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。 + > + > 通过steps函数,我们可以实现字体一个一个显示的效果。 + +- `animation-iteration-count`设置为`infinite`关键字,可以让动画无限次播放。 + +- `animation-fill-mode`:动画结束以后,会立即从结束状态跳回起始状态。如果想让动画保持在结束状态,将这个属性值设置为`forwards`。 + + 可取的值: + + - none:默认值,回到动画没开始时的状态。 + - backwards: 让动画回到第一帧的状态。 + - forwards:让动画保持在结束状态。 + - both:根据`animation-direction`轮流应用`forwards`和`backwords`规则。 + + ```css + .box { + animation: myfirst 5s forwards; + } + ``` +  行内元素特征:(1)设置宽高无效 + +          (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 + +          (3)不会自动进行换行 + 块状元素特征:(1)能够识别宽高 + +          (2)margin和padding的上下左右均对其有效 + +          (3)可以自动换行 + +          (4)多个块状元素标签写在一起,默认排列方式为从上至下 +  行内块状元素特征:(1)不自动换行 + +            (2)能够识别宽高 + +            (3)默认排列方式为从左到右 + + +## 作业 + +用纯 CSS 制作一个时钟会转动的。 + +![](images/10-clock.png) + +可以百度查查看别人是如何制作的。然后 diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-mulcol.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-mulcol.png" new file mode 100644 index 0000000000000000000000000000000000000000..cebd4565e971662aea26bf653157e8b3fb5c1b33 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-mulcol.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-multicol2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-multicol2.png" new file mode 100644 index 0000000000000000000000000000000000000000..55db2d865f693064c5858da98c6002ff0db223d8 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-multicol2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-relative.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-relative.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b7b234d0aa14954e992b67983a6acf8c266bf300 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-relative.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky01.png" new file mode 100644 index 0000000000000000000000000000000000000000..6f57b7653ece65135502efd5bc0614fca65fb49a Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky02.png" new file mode 100644 index 0000000000000000000000000000000000000000..f15b2bd51eb648ad49435fd002bd83e2a496583a Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._07-sticky02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._09-grid-line.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._09-grid-line.png" new file mode 100644 index 0000000000000000000000000000000000000000..815a07c5ab4993f3893574bf11b5f3b256305063 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._09-grid-line.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._10-rotate.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._10-rotate.png" new file mode 100644 index 0000000000000000000000000000000000000000..b78ab4c934ce0dd31287720bd67ebbc5e93294c8 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/._10-rotate.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..16669fdec4c358dbe35a8038a42442865b2ae988 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..743b20d58701ef5f66fc2cdb903168f6a1d690cc Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/01-img-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-box.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-box.png" new file mode 100644 index 0000000000000000000000000000000000000000..57d17ead8c4c4022cfd592b12c4cd1dd23518f6a Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-box.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-loadcss.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-loadcss.png" new file mode 100644 index 0000000000000000000000000000000000000000..271ae97914f1532eb4b040b395973cb0effc1395 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-loadcss.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji.png" new file mode 100644 index 0000000000000000000000000000000000000000..e6d63be4aad9b862eec7a761d68c9f243290ce79 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji2.png" new file mode 100644 index 0000000000000000000000000000000000000000..93ee4fdf880f6bc2ee229557249867bb2dc6ebaf Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/03-taiji2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/04-bg-image.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/04-bg-image.png" new file mode 100644 index 0000000000000000000000000000000000000000..ad42fc38d8672b5e5e9b50efec398c8db2e82f05 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/04-bg-image.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-calc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-calc.png" new file mode 100644 index 0000000000000000000000000000000000000000..cab1396d77274c52a2e917a92dfbba6fd5e77558 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-calc.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-homework1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-homework1.png" new file mode 100644 index 0000000000000000000000000000000000000000..abb46bb1d1210921dbe561175b04a76ff1e44892 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-homework1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-overflow1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-overflow1.png" new file mode 100644 index 0000000000000000000000000000000000000000..375accf20bff5429889bced7f30885e06019c1d4 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-overflow1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-percent.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-percent.png" new file mode 100644 index 0000000000000000000000000000000000000000..567cbc3bc0410e71a495526716ab5e02c1c4b83c Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-percent.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-var.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-var.png" new file mode 100644 index 0000000000000000000000000000000000000000..6be720e546fa031aad6a6e8fe2a41e684c45199f Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/05-var.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-mulcol.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-mulcol.png" new file mode 100644 index 0000000000000000000000000000000000000000..27c8889142374d29f47a1b0adb4977f8a4e3c8e6 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-mulcol.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-multicol2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-multicol2.png" new file mode 100644 index 0000000000000000000000000000000000000000..15b4eba7a26a2785e0e2ee0c97ac5b6fccfe09d0 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-multicol2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-relative.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-relative.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..50b7a7ef1a60749b4a8e6967ede900e0111f9459 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-relative.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky01.png" new file mode 100644 index 0000000000000000000000000000000000000000..d67a362a189053616aa975ea81fd8c8164b09291 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky02.png" new file mode 100644 index 0000000000000000000000000000000000000000..f00da9c36a736bcf8186018cfa150050a67ec846 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/07-sticky02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..9f9866c4aefbe72182846ed653f1380a9c485396 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-02.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-02.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..f17f94cc3bd82ac2956e26964a0fe3d90e116cdd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-02.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-03.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-03.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..9c419afeeabbd0f6c6f89855cfd175f5ec9e9099 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-03.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..ec3619ba99a6a942e568988efd235ea3558f657f Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-flex-wrap-1.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..8eacfecf7496e923cb23bc6e25a5f81e5666af01 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..0ce935f6588fd7286b048fe4e2f5f3f252049c09 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/08-homework.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..a04e5a1b420fa1b9a3d6efac47d4e10ea3972f82 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-flow.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-flow.png" new file mode 100644 index 0000000000000000000000000000000000000000..abc6d0df3ea4b40f7295370453b00853f85d5aa5 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-auto-flow.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..9802a224dcd829120b83eeccd8d4150a0cb158cd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..2e47f5f6cabf6a49ad91f9fd7c64e6b6a4059b31 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-02.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-03.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-03.png" new file mode 100644 index 0000000000000000000000000000000000000000..e7faa67de93fbe4de823b5420d0c4cafcf728786 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-03.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-04.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-04.png" new file mode 100644 index 0000000000000000000000000000000000000000..f313401f4933d99eead30909d4910476196107eb Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-fr-04.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-gap-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-gap-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..4206a8c0a44fb97e678accf605ed17daa58ec8fc Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-gap-01.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-line.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-line.png" new file mode 100644 index 0000000000000000000000000000000000000000..d15a4145a828b97f2c3ed3cdb879380e46daae67 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-grid-line.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-homework.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-homework.png" new file mode 100644 index 0000000000000000000000000000000000000000..c0f0fff37fc01c9a558e35669c8f2d4e5a7f1c8d Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/09-homework.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-3d.webp" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-3d.webp" new file mode 100644 index 0000000000000000000000000000000000000000..47ef717ccc2f488c6861d56b3d7f930977143c47 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-3d.webp" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-clock.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-clock.png" new file mode 100644 index 0000000000000000000000000000000000000000..ae79d6c3ca64b42b503c6fb47aae899af419b1a1 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-clock.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-rotate.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-rotate.png" new file mode 100644 index 0000000000000000000000000000000000000000..c89ff91b6d70e11d48d77e5c883736fde3917ec3 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-rotate.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-sprite-steps.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-sprite-steps.png" new file mode 100644 index 0000000000000000000000000000000000000000..789bbad93e3b75625398f646e9860d558221ecb9 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/10-sprite-steps.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/arc.gif" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/arc.gif" new file mode 100644 index 0000000000000000000000000000000000000000..4b3e7ee9fbf17abd9d6448e9d77b7f48f2af984b Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/arc.gif" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/debug.log" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/debug.log" new file mode 100644 index 0000000000000000000000000000000000000000..987995e61f34026a267674271fae63e1584a0f26 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/courseware/images/debug.log" @@ -0,0 +1,32 @@ +[1123/080146.122:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/080146.122:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/080319.591:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: gpu-process +[1123/081315.896:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/081320.946:WARNING:angle_platform_impl.cc(45)] compileToBinary(256): +C:\fakepath(74,10-46): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them +C:\fakepath(97,10-46): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them + +[1123/093504.846:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/093508.229:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/093510.268:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/093510.830:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/093545.711:WARNING:spdy_session.cc(3306)] Received HEADERS for invalid stream 741 +[1123/093546.002:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123542.583:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123545.873:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123546.074:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123546.842:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123547.713:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123548.531:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123550.673:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer +[1123/123553.613:WARNING:angle_platform_impl.cc(45)] compileToBinary(256): +C:\fakepath(75,10-46): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them +C:\fakepath(98,10-46): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them + +[1123/123557.972:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123557.981:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123559.143:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123559.505:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123559.993:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123600.003:ERROR:ssl_client_socket_impl.cc(941)] handshake failed; returned -1, SSL error code 1, net_error -100 +[1123/123628.840:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: renderer diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/01-transition-01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/01-transition-01.html" new file mode 100644 index 0000000000000000000000000000000000000000..46b12cc0eaac37038ee23c1552b94f16dafe3a84 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/01-transition-01.html" @@ -0,0 +1,26 @@ + + + + + + + Document + + + +
鼠标放上来
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/02-transition-02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/02-transition-02.html" new file mode 100644 index 0000000000000000000000000000000000000000..a30f061dde8337903cd58f1c2e24894357b64bf5 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/02-transition-02.html" @@ -0,0 +1,29 @@ + + + + + + + Document + + + +
hover
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/03-translate.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/03-translate.html" new file mode 100644 index 0000000000000000000000000000000000000000..d7dbb340a61e31bc83112787d144147f8cd9aa13 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/03-translate.html" @@ -0,0 +1,37 @@ + + + + + + + Document + + + +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/04-tanslate2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/04-tanslate2.html" new file mode 100644 index 0000000000000000000000000000000000000000..32872cb940eb1b352d41fe6185d4d56c277e42b1 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/04-tanslate2.html" @@ -0,0 +1,20 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/05-rotate.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/05-rotate.html" new file mode 100644 index 0000000000000000000000000000000000000000..5be989c2e5ad2d1a7071563f52b3faaf3b80fa33 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/05-rotate.html" @@ -0,0 +1,35 @@ + + + + + + + Document + + + +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/06-scale.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/06-scale.html" new file mode 100644 index 0000000000000000000000000000000000000000..68d310fdee3ee9e10085b6b94e5c241ca9ab8671 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/06-scale.html" @@ -0,0 +1,35 @@ + + + + + + + Document + + + +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/07-skew.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/07-skew.html" new file mode 100644 index 0000000000000000000000000000000000000000..2c5d0729146e3327012c029127b447e124756cb6 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/07-skew.html" @@ -0,0 +1,43 @@ + + + + + + + Document + + + +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/08-tansition-origin.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/08-tansition-origin.html" new file mode 100644 index 0000000000000000000000000000000000000000..71315d76fb5d2772dc85e2287851f885586e1da4 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/08-tansition-origin.html" @@ -0,0 +1,33 @@ + + + + + + + Document + + + +
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/09-animation.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/09-animation.html" new file mode 100644 index 0000000000000000000000000000000000000000..74b9a958e7b7106abfe3f1b4693935be5e61039f --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/09-animation.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/10-steps.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/10-steps.html" new file mode 100644 index 0000000000000000000000000000000000000000..ca0654f0d698418b732751f29b3129c58549b73c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/10-steps.html" @@ -0,0 +1,25 @@ + + + + + + + Document + + + + +
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/clock.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/clock.html" new file mode 100644 index 0000000000000000000000000000000000000000..9b64c8c417ad13864695e3b9eeef115ea6a719da --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/clock.html" @@ -0,0 +1,157 @@ + + + + + + + + Document + + + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/images/10-sprite-steps.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/images/10-sprite-steps.png" new file mode 100644 index 0000000000000000000000000000000000000000..789bbad93e3b75625398f646e9860d558221ecb9 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_09/example/images/10-sprite-steps.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..bece9d58a82445ad8be3b2409f1dd1903252738c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/demo02.html" @@ -0,0 +1,30 @@ + + + + + JS animation + + + +
+ + + +———————————————— +版权声明:本文为CSDN博主「文初阳」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 +原文链接:https://blog.csdn.net/writing_happy/article/details/79552932 \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1).zip" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1).zip" new file mode 100644 index 0000000000000000000000000000000000000000..92efbc5ef33b5f09aa7d5dedf8d39f2dbd94b5e3 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1).zip" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时,垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo_index.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..595027d1c99fbc1f4df6c8a28ac260720f76cbe4 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/demo_index.html" @@ -0,0 +1,395 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    返回
    +
    &#xe624;
    +
  • + +
  • + +
    写评论
    +
    &#xe667;
    +
  • + +
  • + +
    礼物
    +
    &#xe600;
    +
  • + +
  • + +
    设置
    +
    &#xe601;
    +
  • + +
  • + +
    +
    &#xe625;
    +
  • + +
  • + +
    目录
    +
    &#xe890;
    +
  • + +
  • + +
    评论
    +
    &#xe663;
    +
  • + +
  • + +
    黑夜模式
    +
    &#xe615;
    +
  • + +
  • + +
    聊天
    +
    &#xe89c;
    +
  • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式,特点是:

+
    +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • +
+
+

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

+
+

Unicode 使用步骤如下:

+

第一步:拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1638080317144') format('woff2'),
+       url('iconfont.woff?t=1638080317144') format('woff'),
+       url('iconfont.ttf?t=1638080317144') format('truetype');
+}
+
+

第二步:定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步:挑选相应图标并获取字体编码,应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 返回 +
    +
    .icon-fanhui +
    +
  • + +
  • + +
    + 写评论 +
    +
    .icon-xiepinglun +
    +
  • + +
  • + +
    + 礼物 +
    +
    .icon-liwu +
    +
  • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
  • + +
  • + +
    + 书 +
    +
    .icon-shu +
    +
  • + +
  • + +
    + 目录 +
    +
    .icon-mulu +
    +
  • + +
  • + +
    + 评论 +
    +
    .icon-pinglun +
    +
  • + +
  • + +
    + 黑夜模式 +
    +
    .icon-heiyemoshi +
    +
  • + +
  • + +
    + 聊天 +
    +
    .icon-liaotian +
    +
  • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

+

与 Unicode 使用方式相比,具有如下特点:

+
    +
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • +
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 fontclass 代码:

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    返回
    +
    #icon-fanhui
    +
  • + +
  • + +
    写评论
    +
    #icon-xiepinglun
    +
  • + +
  • + +
    礼物
    +
    #icon-liwu
    +
  • + +
  • + +
    设置
    +
    #icon-shezhi
    +
  • + +
  • + +
    +
    #icon-shu
    +
  • + +
  • + +
    目录
    +
    #icon-mulu
    +
  • + +
  • + +
    评论
    +
    #icon-pinglun
    +
  • + +
  • + +
    黑夜模式
    +
    #icon-heiyemoshi
    +
  • + +
  • + +
    聊天
    +
    #icon-liaotian
    +
  • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

+
    +
  • 支持多色图标了,不再受单色限制。
  • +
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • +
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • +
  • 浏览器渲染 SVG 的性能一般,还不如 png。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 symbol 代码:

+
<script src="./iconfont.js"></script>
+
+

第二步:加入通用 CSS 代码(引入一次就行):

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步:挑选相应图标并获取类名,应用于页面:

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..6f916c3aa7b9611fc34c08c91771e7fb3994ad2c --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.css" @@ -0,0 +1,51 @@ +@font-face { + font-family: "iconfont"; /* Project id 2970436 */ + src: url('iconfont.woff2?t=1638080317144') format('woff2'), + url('iconfont.woff?t=1638080317144') format('woff'), + url('iconfont.ttf?t=1638080317144') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-fanhui:before { + content: "\e624"; +} + +.icon-xiepinglun:before { + content: "\e667"; +} + +.icon-liwu:before { + content: "\e600"; +} + +.icon-shezhi:before { + content: "\e601"; +} + +.icon-shu:before { + content: "\e625"; +} + +.icon-mulu:before { + content: "\e890"; +} + +.icon-pinglun:before { + content: "\e663"; +} + +.icon-heiyemoshi:before { + content: "\e615"; +} + +.icon-liaotian:before { + content: "\e89c"; +} + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..d12a81599126cf77eadcd6d3820c250a093d1e70 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.js" @@ -0,0 +1 @@ +!function(t){var l,e,c,o,i,a='',n=(n=document.getElementsByTagName("script"))[n.length-1].getAttribute("data-injectcss"),h=function(t,l){l.parentNode.insertBefore(t,l)};if(n&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}function d(){i||(i=!0,c())}function s(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}l=function(){var t,l;(l=document.createElement("div")).innerHTML=a,a=null,(t=l.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",l=t,(t=document.body).firstChild?h(l,t.firstChild):t.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(c=l,o=t.document,i=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}(window); \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.json" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..66d9fe2f3ec44537c2d7a737e582d98a795efd37 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.json" @@ -0,0 +1,72 @@ +{ + "id": "2970436", + "name": "no name", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "2674472", + "name": "返回", + "font_class": "fanhui", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "7532888", + "name": "写评论", + "font_class": "xiepinglun", + "unicode": "e667", + "unicode_decimal": 58983 + }, + { + "icon_id": "1070", + "name": "礼物", + "font_class": "liwu", + "unicode": "e600", + "unicode_decimal": 58880 + }, + { + "icon_id": "162882", + "name": "设置", + "font_class": "shezhi", + "unicode": "e601", + "unicode_decimal": 58881 + }, + { + "icon_id": "648782", + "name": "书", + "font_class": "shu", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "2076262", + "name": "目录", + "font_class": "mulu", + "unicode": "e890", + "unicode_decimal": 59536 + }, + { + "icon_id": "3851368", + "name": "评论", + "font_class": "pinglun", + "unicode": "e663", + "unicode_decimal": 58979 + }, + { + "icon_id": "18424142", + "name": "黑夜模式", + "font_class": "heiyemoshi", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "22978022", + "name": "聊天", + "font_class": "liaotian", + "unicode": "e89c", + "unicode_decimal": 59548 + } + ] +} diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.ttf" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..4e715b57096331f91c98eeb0dc899b2d5fcba501 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.ttf" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff" new file mode 100644 index 0000000000000000000000000000000000000000..18b41945d68eecf9c31e9f0fa30af500bdee45e9 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff2" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff2" new file mode 100644 index 0000000000000000000000000000000000000000..97b42b9a8a4a0a4554bae24376a2e59288ffeda8 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download (1)/font_2970436_3zxm65ecqg8/iconfont.woff2" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download.zip" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download.zip" new file mode 100644 index 0000000000000000000000000000000000000000..964d2ca38839c9e247fb768fe45ec64ad5e8d069 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download.zip" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时,垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo_index.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..3d1f1d24a7958609e6cf4b61957743e7c470d39b --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/demo_index.html" @@ -0,0 +1,395 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    评论
    +
    &#xe60c;
    +
  • + +
  • + +
    写评论
    +
    &#xe667;
    +
  • + +
  • + +
    礼物
    +
    &#xe600;
    +
  • + +
  • + +
    设置
    +
    &#xe601;
    +
  • + +
  • + +
    +
    &#xe625;
    +
  • + +
  • + +
    目录
    +
    &#xe890;
    +
  • + +
  • + +
    评论
    +
    &#xe663;
    +
  • + +
  • + +
    黑夜模式
    +
    &#xe615;
    +
  • + +
  • + +
    聊天
    +
    &#xe89c;
    +
  • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式,特点是:

+
    +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • +
+
+

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

+
+

Unicode 使用步骤如下:

+

第一步:拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1638079767097') format('woff2'),
+       url('iconfont.woff?t=1638079767097') format('woff'),
+       url('iconfont.ttf?t=1638079767097') format('truetype');
+}
+
+

第二步:定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步:挑选相应图标并获取字体编码,应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 评论 +
    +
    .icon-pinglun1 +
    +
  • + +
  • + +
    + 写评论 +
    +
    .icon-xiepinglun +
    +
  • + +
  • + +
    + 礼物 +
    +
    .icon-liwu +
    +
  • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
  • + +
  • + +
    + 书 +
    +
    .icon-shu +
    +
  • + +
  • + +
    + 目录 +
    +
    .icon-mulu +
    +
  • + +
  • + +
    + 评论 +
    +
    .icon-pinglun +
    +
  • + +
  • + +
    + 黑夜模式 +
    +
    .icon-heiyemoshi +
    +
  • + +
  • + +
    + 聊天 +
    +
    .icon-liaotian +
    +
  • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

+

与 Unicode 使用方式相比,具有如下特点:

+
    +
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • +
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 fontclass 代码:

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    评论
    +
    #icon-pinglun1
    +
  • + +
  • + +
    写评论
    +
    #icon-xiepinglun
    +
  • + +
  • + +
    礼物
    +
    #icon-liwu
    +
  • + +
  • + +
    设置
    +
    #icon-shezhi
    +
  • + +
  • + +
    +
    #icon-shu
    +
  • + +
  • + +
    目录
    +
    #icon-mulu
    +
  • + +
  • + +
    评论
    +
    #icon-pinglun
    +
  • + +
  • + +
    黑夜模式
    +
    #icon-heiyemoshi
    +
  • + +
  • + +
    聊天
    +
    #icon-liaotian
    +
  • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

+
    +
  • 支持多色图标了,不再受单色限制。
  • +
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • +
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • +
  • 浏览器渲染 SVG 的性能一般,还不如 png。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 symbol 代码:

+
<script src="./iconfont.js"></script>
+
+

第二步:加入通用 CSS 代码(引入一次就行):

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步:挑选相应图标并获取类名,应用于页面:

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..87c41cf04beb08ead8e20715380ce74888ad8585 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.css" @@ -0,0 +1,51 @@ +@font-face { + font-family: "iconfont"; /* Project id 2970436 */ + src: url('iconfont.woff2?t=1638079767097') format('woff2'), + url('iconfont.woff?t=1638079767097') format('woff'), + url('iconfont.ttf?t=1638079767097') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-pinglun1:before { + content: "\e60c"; +} + +.icon-xiepinglun:before { + content: "\e667"; +} + +.icon-liwu:before { + content: "\e600"; +} + +.icon-shezhi:before { + content: "\e601"; +} + +.icon-shu:before { + content: "\e625"; +} + +.icon-mulu:before { + content: "\e890"; +} + +.icon-pinglun:before { + content: "\e663"; +} + +.icon-heiyemoshi:before { + content: "\e615"; +} + +.icon-liaotian:before { + content: "\e89c"; +} + diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..802a7294ebbe4aca046a35e8fbd32236b2b78a77 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.js" @@ -0,0 +1 @@ +!function(c){var t,l,a,e,h,i='',o=(o=document.getElementsByTagName("script"))[o.length-1].getAttribute("data-injectcss"),n=function(c,t){t.parentNode.insertBefore(c,t)};if(o&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){h||(h=!0,a())}function d(){try{e.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}s()}t=function(){var c,t;(t=document.createElement("div")).innerHTML=i,i=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",t=c,(c=document.body).firstChild?n(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(a=t,e=c.document,h=!1,d(),e.onreadystatechange=function(){"complete"==e.readyState&&(e.onreadystatechange=null,s())})}(window); \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.json" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3d53da08531ad1d1c4bf936049428f1667d0b6da --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.json" @@ -0,0 +1,72 @@ +{ + "id": "2970436", + "name": "no name", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3898926", + "name": "评论", + "font_class": "pinglun1", + "unicode": "e60c", + "unicode_decimal": 58892 + }, + { + "icon_id": "7532888", + "name": "写评论", + "font_class": "xiepinglun", + "unicode": "e667", + "unicode_decimal": 58983 + }, + { + "icon_id": "1070", + "name": "礼物", + "font_class": "liwu", + "unicode": "e600", + "unicode_decimal": 58880 + }, + { + "icon_id": "162882", + "name": "设置", + "font_class": "shezhi", + "unicode": "e601", + "unicode_decimal": 58881 + }, + { + "icon_id": "648782", + "name": "书", + "font_class": "shu", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "2076262", + "name": "目录", + "font_class": "mulu", + "unicode": "e890", + "unicode_decimal": 59536 + }, + { + "icon_id": "3851368", + "name": "评论", + "font_class": "pinglun", + "unicode": "e663", + "unicode_decimal": 58979 + }, + { + "icon_id": "18424142", + "name": "黑夜模式", + "font_class": "heiyemoshi", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "22978022", + "name": "聊天", + "font_class": "liaotian", + "unicode": "e89c", + "unicode_decimal": 59548 + } + ] +} diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.ttf" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..22d8c60a690093bf969a0ccd8c98f9dcff5ed1c8 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.ttf" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff" new file mode 100644 index 0000000000000000000000000000000000000000..dd621fb64ef91f81605634c6f867d5920d49155c Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff2" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff2" new file mode 100644 index 0000000000000000000000000000000000000000..3a99ad18c8feca07faa2a12fac21cc595ee87e1d Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/css/download/font_2970436_7csq89xa26/iconfont.woff2" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..d9c6ab56be02b004bffb829788abad81fb5ca134 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/20211126-css3\344\275\234\344\270\232-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" @@ -0,0 +1,486 @@ + + + + + + + Document + + + + + + +
+ 选择背景颜色: +
+ + + + + + + + +
+ +
+ 选择字号: +
+ 特大 + + + +
+
+
+ + + + + + +
+
+
+ +

投诉

+
+ +
+ + + +
+
+

第一章 卧 龙

+

《三国大气象师》堂燕归来/著,本章共4514字,更新后于:2017-05-06 09:49

+

初平元年,襄阳,晴空万里。

+

通往汉水的岸边望江亭的大道上,一辆辆马车络绎不绝,一名名世家子弟们

+
+
+
加入书架
+
+

鲜衣怒马,意气风发。

+

铛铛铛~

+

清脆的铜铃声响起,华**马丛车,却出现了一辆寒酸的驴车。

+

驴车上那少年,身形修长,相貌清瘦,身穿着一身青衫布衣,布衣的颜色隐

+

隐已有些发白,看得出来是洗了又洗,穿了有些年头。

+

颠簸的驴车,陈旧的布衣,穿行在周围的鲜衣怒马之中,显的颇为扎眼。

+
+ + 写章评 +
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum quo rem, hic explicabo + similique corporis + deleniti? Voluptatem, dolor doloribus! Sit voluptatum sapiente dolor perferendis minus autem cumque in + blanditiis esse. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis, culpa tenetur eveniet rem voluptate, + ipsa dicta ipsum voluptatibus molestias + sapiente, distinctio ipsam. Est, ipsum quibusdam illo eaque incidunt consequatur et. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit incidunt tempora dolor, + inventore at dolores. Ea dolore illum sunt tenetur error, + animi eligendi sint iure vel quas assumenda, qui vero?Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero veniam fugit quo voluptates numquam quia tenetur, earum consequuntur + explicabo ipsam voluptatibus delectus officiis nihil nemo. Sunt cum doloribus ex soluta!

+
+ 上一章 + 下一章 + +
+ + +
+
+
+
+ + +
+
+ +
+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/11-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/11-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..032947ed44a06cffec108d7a0615674d91ddddf2 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/11-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" @@ -0,0 +1,315 @@ +# 响应式设计 + +## 课前回顾 + +学习了过渡,转换,动画的相关的基本属性和使用效果。 + +## 本节目的 + +1. 了解响应式设计是什么? +2. 响应式处理的几种技术? + +## 1. 什么是响应式设计? + +早年设计Web时,页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕,那么就会出现多余的滚动条,过长的行和没有被合理利用的空间等问题。随着人们使用的屏幕尺寸的种类越来越多,出现了响应式网页设计的概念(*responsive web design,RWD*)RWD指的是允许Web页面适应不同屏幕宽度因素等,进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想。 + +### 1.1 旧的网站布局 + +- 创建一个“液态”站点,它会拉伸以充满整个浏览器窗口。 +- 创建已给“固定宽度”站点,它有一个以像素计算的固定宽度。 + +这两种途径常常导致它只有在设计者的屏幕上才是最佳的。液态站点导致小屏幕上展示会挤成一团,以及大屏幕上有一个很长的宽度(不好阅读)。 + +```html + +
+
+ ... +
+
+ ... +
+
+``` + +效果如下: + +![](images/10-liquid-layout.png) + +固定宽度站点的一个可能的后果是,在比站点更在的屏幕上会出现一个水平滚动条,在大屏幕上会有许多空白。 + +随着移动Web在手机上的广泛使用,很多公司的做法是为他们的网站创建一个有这不同网址的移动版本(大多是像m.example.com这样) + +### 1.2 响应式设计 + +"响应式设计"这个词是Ethan Marcotte在2010年首度提出来的,他将其描述为三种技术的混合使用。 + +1. 第一个是液态网格。 +2. 第二个是液态图像的理念。给图像设置`max-width: 100%`,使得图像可以在包含它们的盒子变得比图像原始尺寸小的时候,可以缩放,且不会超过自身的尺寸。这样子图像不会因为盒子太小,而发生溢出,也不会因为盒子太大,而将图片变大使画质变得粗糙。 +3. 第三个关键的组件就是媒体查询。媒体查询可以只使用css实现。和所有尺寸的屏幕都使用一种布局不同的是,布局是可以改变的;侧栏可以在小屏幕上重新布局,而替代用的导航栏显示出来。 + +我们需要理解很重要的一点是 **响应式Web设计不是单独的技术**,它是描述Web设计的一种方式、或者是一组最佳实践的一个词。 + +## 2. 媒体查询 @media + +响应式设计仅仅是因为媒体查询才新兴起来的。 + +通过**媒体查询**(**Media queries**),您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。 + +`@media`可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它是,需要制定一个媒体查询和一个CSS块,当且仅当该媒体查询与正在使用期内容的设备匹配时,该 CSS 块才能应用于该文档。 + +**语法** + +`@media`规则可置于您代码的顶层或位于其他任何`@条件规则组`内。 + +```css +@media mediatype and | not | only (media feature) { + // CSS 代码 +} +``` + +也可以针对不同的媒体使用不同stylesheets: + +```html + +``` + +### 2.1 媒体类型 + +| 值 | 描述 | +| ------ | ---------------------------------- | +| all | 用于所有设备 | +| print | 用于打印机和打印预览 | +| screen | 用于电脑屏幕,平板电脑,智能手机等 | +| speech | 应用于屏幕阅读器等发声设备 | + +### 2.2 媒体功能 + +| 值 | 描述 | +| ----------------------- | ---------------------------------------------------- | +| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 | +| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 | +| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 | +| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 | +| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 | +| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 | +| height | 定义输出设备中的页面可见区域高度。 | +| max-height | 定义输出设备中的页面最大可见区域高度。 | +| min-height | 定义输出设备中的页面最小可见区域高度。 | +| width | 定义输出设备中的页面可见区域宽度。 | +| max-width | 定义输出设备中的页面最大可见区域宽度。 | +| min-width | 定义输出设备中的页面最小可见区域宽度。 | +| device-height | 定义输出设备的屏幕可见高度。 | +| max-device-height | 定义输出设备的屏幕可见的最大高度。 | +| min-device-height | 定义输出设备的屏幕的最小可见高度。 | +| device-width | 定义输出设备的屏幕可见宽度。 | +| max-device-width | 定义输出设备的屏幕最大可见宽度。 | +| min-device-width | 定义输出设备的屏幕最小可见宽度。 | +| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 | +| esolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm | + +```css +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} +``` + +媒体特性描述了设备信息,输出设备,或者浏览环境的具体特征。媒体特性表达式是完全可选的,它负责测试这些特性或特性是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。 + +```css +@media only screen and (min-width: 320px) + and (max-width: 480px) + and (resolution: 150dpi) { + body {line-height: 1.4;} +} +``` + +媒体查询还引入一种新的范围语法,在测试接受范围的任何特性时,允许更简洁的媒体查询。 + +```css +@media (height > 600px) { + body {background-color: red;} +} +@media (400px <= width <= 700px) { + body {background-color: #ccc;} +} +``` + +## 3. 灵活的网格 + +灵活的网格布局,让我们可以不需要适配每个可能使用的设备尺寸,只需要建立一个精确到像素级的适配布局。 + +现代布局方式,例如多栏布局、弹性盒子、网格布局默认都是响应式的。它们都假设你在尽力创建一个可伸缩网格,而且给了你更容易这样做的方式。 + +- 多列布局 + + `column-count`,只定义列数后,浏览器会帮我们计算出这些列的大小,这是一个随着屏幕尺寸变化的尺寸。 + + ```css + .container { + column-count: 3; + } + ``` + + 指定`column-width`的话,浏览器会尽可能多的创建这一宽度的列,然后将剩余空间再共享给每一个列。 + +- 弹性盒子 + + 在弹性盒子里面,盒子的子项将参照容器的空间的大小,缩小和分布子项之间的空间。通过更改`flex-grow`和`flex-shrink`的值,你可以控制子项是否拓展和缩小自身的大小。 + + ```css + .container { + display: flex; + } + .item { + flex: 1 1 auto; + } + ``` + +- 网格布局 + + 在CSS网格布局中,`fr`单位可以按比例获取容器剩余空间。`align-items`和`justify-items`等属性的默认值,均可在元素没有设置固定高度和宽度时,自行给子项分配尺寸。 + +## 4. 响应式图像 + +### 4.1 方式一: + +最简单的处理; + +```css +img { + max-width: 100%; +} +``` + +这种方式有弊端。图像有可能会显示得比它的原始尺寸小很多,以至于浪费带宽——移动端用户会下载几倍于他们在浏览器窗口中实际看到大小的图像。此外,我们可能不想在移动端和桌面端有相同的图像宽高比例。例如,在移动端,方形的图像表现会更好一些。 + +### 4.2 方式二: + +和媒体查询搭配使用。准备多种规则的图片,然后媒体查询匹配不同设备使用合适图片 + +### 4.3 方式三: + +响应式图像,使用HTML **``** 元素和 **``**的`scrset`和`sizes`特性。 + +#### 4.3.1 ``元素 + +```html + + + + Flowers + +``` + +- srcset 属性是必须的,定义了图片资源。 +- media 属性是可选的,规则和媒体查询规则一样。 +- ``元素的兼容不是很好,大多数情况,我们直接在``元素上定义`srcset`和`sizes`属性来实现响应效果。 + +#### 4.3.2 ``元素的srcset属性 + +`srcset`属性定义了我们允许浏览器选择的图像集,以及每个图像的大小。书写规则如下:`文件路径 图像的固有宽度` + +```css + +``` + +有可以简写: + +```html + +``` + +通常我们windows系统的PC显示器默认设备像素比都是1,因此,这些显示器呈现的图片默认都是`1x`情况下`128`像素宽度的图片。 + +通过模拟,进入移动端预览模式,例如选择`iphone6`,此时设备像素比为`2`,刷新页面,会看到图片加载256像素宽度的图片。 + +`srcset`属性还有一种写法: + +```html + +``` + +上面代码中:128px.jpg,256px.jpg,512px.jpg分别指三种不同尺寸的图片。 + +上面语句的意思是根据容器的大小来选择使用哪张图片。图片最后会填满容器。这种写法我们可以搭配css,给图片设置固定大小,然后通过img容器的宽度变化,可以使用不同图片。 + +```css +img {width: 200px;} +``` + +更多的情况,我们是搭配`sizes`属性一起使用。 + +#### 4.3.3 ``元素的sizes属性 + +看下面的html代码,关于两个图片: + +```html + + + +``` + +两个图片HTML的`srcset`的属性值是一样的,如下: + +```ini +srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w" +``` + +上面语句表示:当``元素的宽度规格为128的时候,加载128px.jpg,宽度规格为256的时候,加载256px.jpg, 宽度规格为512的时候,加载512px.jpg。 + +这里的宽度规则单位是`w`。这个单位和`px`不一样。他与`sizes`属性设定和屏幕密度密切相关。 + +举个例子:假设屏幕密度是2的手机,`sizes`属性计算值是`128px`,则此时``实际宽度规格应该是`128 * 2`也就是`256w`,因此会加载256px.jpg这张图。 + +上面代码显示结果: + +1. 屏幕宽度大于360px时,图片大小为128px。在PC浏览器上,图片使用128px.jpg。屏幕宽度小于360px时,图片大小为340px或(100vw - 20px),这个时候图片展示分别是上图512px.jpg,下图256px.jpg(下图的这个表现各个浏览器不太一致,chrome浏览器有bug)。 +2. 切换到手机模式下预览,选择iphone6,此时屏幕宽度 375px,依然大于360px,图片应该大小为128px。但是当前屏幕密度为2,因此,图片尺寸为`128px*2`,正好是`256w`这个规格,于是加载了256px.jpg + +## 5. 总结 + +1. 响应式设计主要是为了适配不同尺寸屏幕的设备,来提出来的一种描述Web设计的一种方式、或者是一组最佳实践的一个词。 +2. 常用的处理响应式的技术是:媒体查询,灵活的网格(多列布局,弹性盒子,网格布局等),还有响应式图像的处理方式 +3. 对于响应式图像的处理,希望大家掌握前面两种方式(max-width:100%; 媒体查询控制加载图片)。第三种方式比较复杂,且兼容性较差,只做了解要求。 + +## 作业: + +制作一个小说阅读页面,实现响应式效果。 + +PC 效果: + +![](images/11-homework.png) + +1. 其中,红色框框的内容不要。文章内容自动填充整个主区域。 + +2. 切换到手机模式后,页面转换为手机模式效果。(背景色和字体颜色可以和PC端一直,不需要修改) + + ![](images/11-homework-2.png) + +3. 手机模式下,点击界面,将功能菜单显示出来。 + + ![](images/11-homework-3.png) + + 功能按钮的布局可以使用弹性盒子或网格来布局。这些功能键无需实现具体功能。 + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-2.png" new file mode 100644 index 0000000000000000000000000000000000000000..de47349d12ab647834a6bd3e8c416128b4f80964 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-2.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-3.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-3.png" new file mode 100644 index 0000000000000000000000000000000000000000..29ed4921c12da7e2ed78f0ef04575d3584f7a622 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework-3.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework.png" new file mode 100644 index 0000000000000000000000000000000000000000..ed7d5eb8619cfc25bddfc3a41d6e48a2263269dd Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/courseware/images/11-homework.png" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/01-picture.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/01-picture.html" new file mode 100644 index 0000000000000000000000000000000000000000..c3601afc6e6a702742ab4593cffa4bde16161d41 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/01-picture.html" @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + Flowers + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/02-img-srcset.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/02-img-srcset.html" new file mode 100644 index 0000000000000000000000000000000000000000..8e570f39cd1e135b363c4548b73391d817f58297 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/02-img-srcset.html" @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/03-img-srcset2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/03-img-srcset2.html" new file mode 100644 index 0000000000000000000000000000000000000000..5b8ee8adaf7e24e25f5256b65e0f4eb9c5531e1a --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/03-img-srcset2.html" @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/04-img-sizes.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/04-img-sizes.html" new file mode 100644 index 0000000000000000000000000000000000000000..2f4c93ac93430959cb94af1f5497ae38f6658a2f --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/04-img-sizes.html" @@ -0,0 +1,27 @@ + + + + + + + + Document + + + +

当可视窗口宽度小于360px时,显示340px大小,其他情况显示为128px

+ + +

当可视窗口宽度小于360px时,显示calc(100vw - 20px)大小,其他情况显示为128px

+ + + + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..5ea805e45edacb82be677f988e5faab6ce4299ec --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo01.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab culpa in excepturi consequatur repudiandae id ut adipisci quaerat. Ratione distinctio itaque modi ad enim laudantium, animi corrupti quidem quaerat quas?

+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta accusantium, neque doloremque veritatis consectetur facilis assumenda aperiam ducimus eius unde delectus fugit velit ipsam, vero laudantium omnis similique rerum provident? Tempora quisquam sapiente ad perspiciatis labore. Eaque perferendis reprehenderit necessitatibus.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente error exercitationem magnam, consequatur accusamus, necessitatibus iusto quidem quaerat inventore facilis recusandae quo eligendi perferendis eum odit aliquam, rerum corporis debitis sed! Eum pariatur soluta fugit at saepe necessitatibus assumenda quibusdam, consectetur possimus officiis, voluptate, inventore tempore rem velit. Aliquid.

+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..0b1fd2406695bc0f0ead48ad35dde9898a147535 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo02.html" @@ -0,0 +1,24 @@ + + + + + + + Document + + + +
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores ipsum perferendis alias quos sequi. Beatae tempore porro nulla eaque consequatur optio dolores nisi fuga, illum quo perspiciatis eius eligendi minima, unde atque corporis odit ullam totam ex itaque ipsum minus et voluptates. Praesentium asperiores voluptatem vel, quam atque doloremque, voluptate porro libero ducimus repellat rem magni alias molestias expedita aperiam!

+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo03.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo03.html" new file mode 100644 index 0000000000000000000000000000000000000000..1564a3e6637be6dc422d60162d0d8c3b2ade21a5 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/demo03.html" @@ -0,0 +1,26 @@ + + + + + + + Document + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, mollitia qui ut maxime vel nulla earum aspernatur doloremque impedit maiores quibusdam repellat! Exercitationem voluptatum delectus cum mollitia rerum adipisci debitis ea ratione iste laboriosam cupiditate voluptatibus ipsum quam inventore voluptate rem odio sapiente ad blanditiis doloremque vero, suscipit dolor. Optio neque necessitatibus dicta nam libero soluta asperiores atque dolores alias.

+ + \ No newline at end of file diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/128px.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/128px.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e7a9f29317bca9527d76a8eff7847dff77647460 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/128px.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/256px.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/256px.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..951ac1bffb967a148e27c7071c43bfd533e7ec5c Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/256px.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/512px.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/512px.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..24cc90e05d7168785bd34551f5f032e8fd5f94c3 Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_10/example/images/512px.jpg" differ diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_11/courseware/12-SVG.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_11/courseware/12-SVG.md" new file mode 100644 index 0000000000000000000000000000000000000000..da234c504eea24374b8028017fa636be34c0c9c8 --- /dev/null +++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_11/courseware/12-SVG.md" @@ -0,0 +1,495 @@ +# SVG 可缩放矢量图形 + +## 课前回顾 + + + +## 本节目 + +1. 简单了解一下SVG代码结构,学会绘制一些简单图形 +2. 开发过程中,我们如何使用SVG图像 + +## 1. SVG 简介 + +SVG 的第一个版本是在2001年推出的。它是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。 其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。 + +> **什么是XML?** +> +> XML:可扩展标记语言(EXtensible Markup Language)。是一种很像HTML的标记语言。 +> +> 它的设计宗旨是传输数据,而不是显示数据。 +> +> 接下来我们学习SVG的内容,来大致了解一下XML。 + +### 1.1 SVG 优势 + +1. 可以使用任何文本编辑器来创建绘画SVG. +2. SVG图像可以扩展,可以在任何分辨率上高质量显示。 +3. SVG图像支持缩放,且不会失去任何质量。 +4. SVG 是开发标准,是纯XML文件 + +**在网页上绘制一个简单的SVG** + +- SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。 + + ```html + + + + + + + + + + ``` + +- SVG 代码也可以写在一个独立文件中,然后用``、``、``、`