打卡作业

1
2
3
4
5
6
7
8
9
10
11
12
13
# Day08 作业布置

## 一. 完成课堂所有的代码

## 二. 说出结构伪类的 nth-child 和 nth-of-type 的区别，并且写出案例练习

## 三. 自己练习使用字体图标
	* 从 ·iconfont· 中下载图标练习

## 四. 自己找精灵图进行练习

## 五. 结合CSS元素定位，并且找出对应的练习案例（2个）

Day07 作业布置

一. 完成课堂所有的代码

已完成

二. 自己查一个列表并且完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        text-align: center;
        border-collapse: collapse;
      }

      table tr:first-child {
        font-weight: 700;
        font-size: 24px;
      }
      table tr:first-child td {
        padding: 20px 0;
      }

      td {
        width: 140px;
        height: 30px;
      }
      table tr:nth-child(n + 3) {
        background-color: rgb(222, 225, 226);
      }
      table tr:nth-child(2n) {
        background-color: rgb(141, 155, 165);
      }

      table tr:nth-child(2) {
        color: #fff;
        background-color: rgb(38, 145, 221);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="6">场内股票ETF涨幅榜</td>
      </tr>
      <tr>
        <td>序</td>
        <td>代码</td>
        <td>基金场内简称</td>
        <td>涨跌幅(%)</td>
        <td>场内申赎份额</td>
        <td>成交额(万元)</td>
      </tr>
      <tr>
        <td>1</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>

      <tr>
        <td>2</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>3</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>4</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>5</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
    </table>
  </body>
</html>

三. 完成table的作业内容

作业

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        margin: 0;
        padding: 0;
      }
      table {
        text-align: center;
        border-collapse: collapse;
      }

      table tr:nth-child(1) td {
        padding: 10px 0;
        font-size: 24px;
        font-weight: 700;
      }

      table tr:nth-of-type(2n + 2) {
        background-color: rgb(239, 219, 223);
      }

      table tr:nth-of-type(2n + 3) {
        background-color: rgb(235, 183, 193);
      }

      table tr:nth-child(2) {
        font-weight: 700;
      }

      table tr:nth-child(n + 3) td:nth-of-type(4) {
        color: red;
      }

      table td > input {
        padding: 10px;
        font-size: 14px;
        color: #fff;
        background-color: rgb(240, 72, 72);
        border-radius: 13px;
        border: 0;
      }
      td {
        width: 140px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="5">影院电影放映列表</td>
      </tr>
      <tr>
        <td>放映时间</td>
        <td>语言版本</td>
        <td>放映厅</td>
        <td>售价(元)</td>
        <td>选座购票</td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td class="price">￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
    </table>
  </body>
</html>

四. 说出表单元素什么情况下使用name和value？

  • name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交 表单中不可或缺的元素 一个form表单中该元素的名称对应不同类型的input是不同的
  • value是 后台接收数据时使用的键值对中的值(value) value可以有默认值

五. 说出form提交时的属性作用

  • action
    • 处理表单提交的URL 一般项目中填写的是用于表单提交时对应的文件路径名
  • method
    • 用于提交方法是get(默认方法)还是post或是其他方法
  • target
    • 在当前页面跳转 还是新开页面进行跳转链接有四个值
      • _blank 新开页面
      • _self 当前页面跳转
      • _parent 当前父级页面跳转
      • _top 当前顶层页面跳转

务必下载！！

今日的代码和讲义 以及思维导图：【点击此链接下载 Day08.zip】

大纲

一. 结构伪类

1.1. nth-child

1
2
3
- `nth-child(2)`
- `nth-child(2n+1)`
- `nth-child(-n+5)`

结构伪类 - :nth-child

  • :nth-child(1)
    • 是父元素中的第1个子元素
  • :nth-child(2n)
    • n代表任意正整数和0
    • 是父元素中的第偶数个子元素(第2、4、6、8……个)
    • 跟:nth-child(even)同义
  • :nth-child(2n + 1)
    • n代表任意正整数和0
    • 是父元素中的第奇数个子元素(第1、3、5、7……个)
    • 跟:nth-child(odd)同义
  • nth-child(-n + 2)
    • 代表前2个子元素

1.2. nth-last-child/nth-of-type/nth-last-of-type

结构伪类 - :nth-last-child( )

  • :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
    • :nth-last-child(1)，代表倒数第一个子元素
    • :nth-last-child(-n + 2)，代表最后2个子元素
  • :nth-of-type()用法跟:nth-child()类似
    • 不同点是:nth-of-type()计数时只计算同种类型的元素
  • :nth-last-of-type()用法跟 :nth-of-type() 类似
    • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

结构伪类 - :nth-of-type( )、:nth-last-of-type( )

  • 其他常见的伪类(了解):
    • :first-child，等同于:nth-child(1)
    • :last-child，等同于:nth-last-child(1)
    • :first-of-type，等同于:nth-of-type(1)
    • :last-of-type，等同于:nth-last-of-type(1)
    • :only-child，是父元素中唯一的子元素
    • :only-of-type，是父元素中唯一的这种类型的子元素

1.3. 其他结构伪类

1
2
3
4
5
6
7
`first-child`

相对比较重要的两个伪类:
```css
:root => html
:empty => 小程序
```
  • 下面的伪类偶尔会使用:
    • :root，根元素，就是HTML元素
    • :empty 代表里面完全空白的元素

1.4. 否定伪类

1
:not(简单选择器)

否定伪类(negation pseudo-class)

  • :not()的格式是:not(x)
    • x是一个 简单选择器
    • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
  • :not(x)表示 除x以外的元素

二. 额外知识补充

2.1. border的图形

1
2
三角形
旋转(后续)
  • 假如我们将border宽度设置成50会是什么效果呢?
    • 如果我们进一步, 将另外三边的颜色去除呢?
    • 如果我们将这个盒子旋转呢?
  • 所以利用border或者CSS的特性我们可以做出很多图形:

2.2. 网络字体

1
2
3
4
* 拿到字体
* @font-face
* 使用它
* 兼容性
  • 在之前我们有设置过页面使用的字体: font-family
    • 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
    • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
    • 这就是所谓的 Web-safe 字体;
    • 并且这种默认可选的字体并不能进行一些定制化的需求;

Web fonts的工作原理

  • 首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
    • 对于某些收费的字体, 我们需要获取到对应的授权;
    • 对于某些公司定制的字体, 需要设计人员来设计;
    • 对于某些免费的字体, 我们需要获取到对应的字体文件;
  • 其次, 在我们的 CSS代码 当中使用该字体(重要):
    • 具体的过程看后面的操作流程;
  • 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
  • 用户的角度:
    • 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
    • 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体;
    • 在浏览器中使用对应的字体显示内容;

使用Web Fonts

  • 课堂上为了给大家演示，通过如下的方式获取到了字体文件:

  • 第一步:在字体天下网站下载一个字体

  • 第二步:使用字体;

  • 使用过程如下:

    • 1.将字体放到对应的目录中
    • 2.通过@font-face来引入字体, 并且设置格式
    • 3.使用字体

  • 注意: @font-face 用于加载一个自定义的字体;

web-fonts的兼容性

  • 我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
    • 在开发中某些浏览器可能不支持该字体, 所以为了浏 览器的兼容性问题, 我们需要有对应其他格式的字体;
  • TrueType字体:拓展名是 .ttf
    • OpenType/TrueType字体:拓展名是 .ttf、.otf，
      建立在TrueType字体之上
    • Embedded OpenType字体:拓展名是 .eot， OpenType字体的压缩版
    • SVG字体:拓展名是 .svg、 .svgz
    • WOFF表示Web Open Font Format web开放字体:
      拓展名是 .woff，建立在TrueType字体之上
  • 这里我们提供一个网站来生产对应的字体文件:
    • https://font.qqe2.com/# 暂时可用

  • 这被称为”bulletproof @font-face syntax(刀枪不入的@font-face语法)“:
  • src用于指定字体资源
    • url指定资源的路径
    • format用于帮助浏览器快速识别字体的格式;

2.3. 字体图标

1
2
3
4
5
6
7
8
9
10
11
12
* 选择图标
* 下载代码
* 在项目中使用

```html
<i>字符实体</i>
<i class="iconfont icon-video"></i>
```

补充: 如果有新的图标

* 使用最新下载的字体
  • 思考:字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢?
    • 当然可以，这个就叫做字体图标。
  • 字体图标的好处:
    • 放大不会失真
    • 可以任意切换颜色
    • 用到很多个图标时，文件相对图片较小
  • 字体图标的使用:
  • 将字体文件和默认的css文件导入到项目中

字体图标的使用

  • 字体图标的使用步骤:
    • 第一步: 通过link引入iconfont.css文件
    • 第二步: 使用字体图标
  • 使用字体图标常见的有两种方式:
    • 方式一: 通过对应字体图标的Unicode来显示代码;
    • 方式二: 利用已经编写好的class , 直接使用即可;

2.4. CSS Sprite

1
2
3
4
5
将多个图标放到一张图片

使用图片
* width/height
* background-position
  • 什么是CSS Sprite
    • 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
    • 有人翻译为:CSS雪碧、CSS精灵
  • 使用CSS Sprite的好处
    • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
    • 减小图片总大小
    • 解决了图片命名的困扰，只需要针对一张集合的图片命名
  • Sprite图片制作(雪碧图、精灵图)

精灵图的使用

  • 精灵图如何使用呢?
    • 精灵图的原理是通过只显示图片的很小一部分来展示的;
    • 通常使用背景:
      • ✓ 1.设置对应元素的宽度和高度
      • ✓ 2.设置精灵图作为背景图片
      • ✓ 3.调整背景图片的位置来展示
  • 如何获取精灵图的位置

2.5. cursor

1
cursor: pointer
  • cursor可以设置鼠标指针(光标)在元素上面时的显示样式
  • cursor常见的设值有
    • auto:浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
    • default:由操作系统决定，一般就是一个小箭头
    • pointer:一只小手，鼠标指针挪动到链接上面默认就是这个样式
    • text:一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
    • none:没有任何指针显示在元素上面

三. 元素定位(布局)

3.1. 对标准流的理解

标准流(Normal Flow)

  • 默认情况下，元素都是按照normal flow( 标准流、常规流、正常流、文档流【document flow】)进行排布
    • 从左到右、从上到下按顺序摆放好
    • 默认情况下，互相之间不存在层叠现象

margin-padding位置调整

  • 在标准流中，可以使用margin、padding对元素进行定位
    • 其中margin还可以设置负数
  • 比较明显的缺点是
    • 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
    • 不便于实现元素层叠的效果
  • 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
    • 我们可以通过position属性来进行设置;

3.2. 元素的定位

1
2
3
4
5
6
7
常见的值:

* static
* relative
* absolute
* fixed
* sticky
  • 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
  • 例如放在另一个元素的上面;
  • 或者始终保持在浏览器视窗内的同一位置;

认识position属性

  • 默认值:
    • static:默认值, 静态定位
  • 使用下面的值, 可以让元素变成 定位元素(positioned element)
    • relative:相对定位
    • absolute:绝对定位
    • fixed:固定定位
    • sticky:粘性定位

静态定位 - static

  • position属性的默认值
    • 元素按照normal flow布局
    • left 、right、top、bottom没有任何作用

3.3. 相对定位

1
2
3
4
5
6
7
* relative
  * 相对自己原来的位置(标准流中的位置)
  * left/right/top/bottom
* 小案例
  * 3 + 2 = 5
* img居中显示(了解)
  * 背景完成
  • 元素按照normal flow布局
  • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是元素自己原来的位置
  • 相对定位的应用场景
    • 在不影响其他元素位置的前提下，对当前元素位置进行微调

3.4. 固定定位

1
2
3
4
5
* fixed
  * 相对视口(可视区域viewport)
  * 不会随着内容的滚动而滚动
* 练习:
  * 顶部/反馈
  • 元素脱离normal flow(脱离标准流、脱标)
  • 可以通过left、right、top、bottom进行定位
  • 定位参照对象是视口(viewport)
  • 当画布滚动时，固定不动

画布 和 视口

  • 视口(Viewport)  文档的可视区域
    • 如右图红框所示
  • 画布(Canvas)
    • 用于渲染文档的区域
    • 文档内容超出视口范围，可以通过滚动查看
    • 如右图黑框所示
  • 宽高对比
    • 画布 >= 视口

定位元素的特点

  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 不再受标准流的约束
    • 不再严格按照从上到下、从左到右排布
    • 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
  • 不再给父元素汇报宽高数据
  • 脱标元素内部默认还是按照标准流布局