Appearance

师资培训课件 （HTML+CSS） ​

一、 HTML + CSS ​

难度： ⭐ 到 ⭐⭐

1. 十三届省赛水果拼盘 ​

  • 考点： flex
css
#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

2.十三届省赛展开你的扇子 ​

  • 考点: transform: rotate、nth-child
css
#box:hover div:nth-child(6) {
  transform: rotate(-10deg);
}

#box:hover div:nth-child(5) {
  transform: rotate(-20deg);
}

#box:hover div:nth-child(4) {
  transform: rotate(-30deg);
}

#box:hover div:nth-child(3) {
  transform: rotate(-40deg);
}

#box:hover div:nth-child(2) {
  transform: rotate(-50deg);
}

#box:hover div:nth-child(1) {
  transform: rotate(-60deg);
}
#box:hover div:nth-child(7) {
  transform: rotate(10deg);
}
#box:hover div:nth-child(8) {
  transform: rotate(20deg);
}
#box:hover div:nth-child(9) {
  transform: rotate(30deg);
}
#box:hover div:nth-child(10) {
  transform: rotate(40deg);
}
#box:hover div:nth-child(11) {
  transform: rotate(50deg);
}
#box:hover div:nth-child(12) {
  transform: rotate(60deg);
}

3. 十三届国赛新鲜的蔬菜 ​

  • 考点: flex
css
#box1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#box2 {
  display: flex;
  justify-content: space-between;
}

#box2 .item:nth-child(2) {
  align-self: flex-end;
}

#box3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#box3 .item:nth-child(2) {
  align-self: center;
}

#box3 .item:nth-child(3) {
  align-self: flex-end;
}

4. 十四届省赛电影院排座位 ​

  • 考察: flex/gird 、 nth-child、nth-of-type
  • 解题思路：关键点 8 个⼀排、 第 2 、6 外边距 30px
  • 答案：
css
/* gird 布局答案 */
.seat-area {
  margin-top: 50px; /* 设置顶部外边距为50像素 */
  display: grid; /* 将该元素设置为⽹格布局 */
  grid-template-columns: repeat(8, auto); /* 设置8列⾃动宽度的⽹格布局 */
  gap: 10px; /* 设置⽹格之间的间隙为10像素 */
}
/* 以下样式规则定义了每8个座位中第2个和第6个座位的右侧外边距  */
.seat:nth-of-type(8n + 2) {
  margin-right: 20px; /* 设置第2个和第6个座位的右侧外边距为20像素 */
}

.seat:nth-of-type(8n + 6) {
  margin-right: 20px; /* 设置第2个和第6个座位的右侧外边距为20像素 */
}
css
/* flex 布局答案 */
/* seat-area 座位区域 */
.seat-area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px; /* 顶部外边距为 40 像素 */
}
/* seat-area 座位 */
.seat {
  margin-left: 10px; /* 左外边距为 10 像素 */
  margin-top: 10px; /* 顶部外边距为 10 像素 */
}

.seat:nth-child(8n + 1) {
  margin-left: 0; /* 每⾏的第⼀个座位的左外边距为 0 */
}

.seat:nth-child(8n + 2) {
  margin-right: 20px; /* 每⾏的第⼆个座位的右外边距为 20 像素 */
}

.seat:nth-child(8n + 7) {
  margin-left: 30px; /* 每⾏的第七个座位的左外边距为 30 像素 */
}

  • 知识点解析：

  • grid 布局：

  • grid-template-columns ：⽤于定义⽹格列的⼤⼩和数量。

  • grid-gap：⽤于定义⽹格单元格之间的间距。

  • nth-of-type 是⼀个 CSS 伪类选择器，⽤于选取⼀组相同类型的元素中的第 n 个元素。 具体⽽⾔，:nth-of-type(n) 匹配其⽗元素下第 ``n个同类型的元素。该选择器接受⼀个参数，可以是 ⼀个具体的数字、关键字odd或even，或者公式an + b` 。 以下是⼀些示例：

  • :nth-of-type(2) 选择其⽗元素下的第⼆个同类型元素。

  • :nth-of-type(odd) 选择其⽗元素下的所有奇数同类型元素。

  • :nth-of-type(even) 选择其⽗元素下的所有偶数同类型元素。

  • :nth-of-type(3n + 1) 选择其⽗元素下每隔 3 个同类型元素中的第⼀个。 该伪类选择器可以⽤于选择列表、⽹格和其他具有相同类型元素的结构。

  • nth-child 是⼀个 CSS 伪类选择器，⽤于选择指定元素的⼦元素，它的语法如下： :nth-child(an+b) 其中， a 和 b 是两个可选参数， n 表示⼀个整数（0, 1, 2, ...），表示元素在其⽗元素中的位置。 an+b 则表示⼀系列满⾜这个公式的元素，其中 a 和 b 为数字，表示这些元素的位置。例如， 2n+1 表示所有奇数位置的元素。 下⾯是⼀些常⽤的 nth-child 选择器：

  • :nth-child(n) ：匹配⽗元素的所有⼦元素。

  • :nth-child(even) ：匹配⽗元素的偶数⼦元素。

  • :nth-child(odd) ：匹配⽗元素的奇数⼦元素。

  • :nth-child(3) ：匹配⽗元素的第三个⼦元素。

  • :nth-child(3n) ：匹配⽗元素的第 3、6、9、12... 个⼦元素。

  • :nth-child(3n+1) ：匹配⽗元素的第 1、4、7、10... 个⼦元素。

  • :nth-child(-n+4) ：匹配⽗元素的前 4 个⼦元素。

5. 十五届国赛植物灌溉 ​

  • 考点：grid-area
css
.treatment {
  grid-area: 1 / 2 / 4 / 6;
}
.treatment {
  grid-row: 1 / 4;
  grid-column: 2 / 6;
}

  • 知识点解析：

    如果指定了 4 个 <grid-line> 值，grid-row-start 则会被设为第一个值，grid-column-start 为第二个值，grid-row-end 为第三个值，grid-column-end 为第四个值。

高频考点知识点讲解： ​

flex 布局：

  • display: flex; 将元素设置为弹性容器。
  • flex-direction: row;：指定主轴方向为水平。
  • justify-content: center;：在主轴上居中对齐弹性项目。
  • align-items: center;：在交叉轴上居中对齐弹性项目。
  • flex-wrap: wrap;：允许弹性项目换行显示。

grid 布局：

  • display: grid;：将元素设置为网格容器。
  • grid-template-columns: repeat(3, 1fr);：创建具有三列的网格布局。
  • grid-template-rows: 100px 200px;：创建具有两行的网格布局，行高分别为 100 像素和 200 像素。
  • grid-gap: 10px;：设置网格单元格之间的间距为 10 像素。
  • grid-column: 1 / span 2;：指定一个网格项目跨越两列。

css 常用新特性:

在 CSS 的 transform 属性下，有多个常用的变换函数可以实现元素的旋转、缩放等效果。以下是一些示例：

  1. rotate()：旋转元素指定角度，按顺时针方向旋转为正值，逆时针方向旋转为负值。
css
.element {
  transform: rotate(45deg);
}
  1. scale()：按指定比例缩放元素，可以分别指定水平和垂直方向的缩放比例。
css
.element {
  transform: scale(1.5); /* 等比例放大1.5倍 */
}
  1. translate()：按指定的偏移量移动元素，可以分别指定水平和垂直方向的偏移量。
css
.element {
  transform: translate(50px, 20px); /* 水平偏移50像素，垂直偏移20像素 */
}
  • 第一个 值 x 轴偏移量，正数是向右，负数是向左
  • 第一个 值 y 轴偏移量，正数是向下，负数是向上
  1. skew()：按指定角度倾斜元素，可以分别指定水平和垂直方向的倾斜角度。
css
.element {
  transform: skew(45deg, -20deg); /* 水平方向倾斜45度，垂直方向倾斜-20度 */
}
  • x 轴倾斜 负数向右，正数向左，y 轴倾斜，正数 正对我们的方向，往左倾斜，负数是往右。y 轴倾斜不是特别常用。
  1. border-radius 是一个 CSS 属性，用于设置元素的边框圆角效果。通过指定圆角的半径，可以使元素的边框或背景具有圆角的外观。以下是一些示例：
css
.element {
  border-radius: 10px; /* 四个角都具有 10px 的圆角 */
  border-radius: 50% ; /* 50% 的圆角半径将元素变为圆形 */
}

总结： HTML+CSS 占分比重 5 - 20 分。高频考点：flex 布局,grid 布局,css3 新特性，其他可能出现的考点 居中、css 基础 比如颜色、字体大小。 ​

备赛建议：HTML + CSS 题目较为简单，题目数量 1 - 2，耗时较短，分数一定要全部拿到。每道题建议用时 5-10分钟。检查看页面效果。 ​

蓝桥云课

Copyright © 2024-国信蓝桥