diff --git a/16_DevTool/img/16-1.jpg b/16_DevTool/img/16-1.jpg
new file mode 100644
index 0000000..07a09dd
Binary files /dev/null and b/16_DevTool/img/16-1.jpg differ
diff --git a/16_DevTool/img/16-10.jpg b/16_DevTool/img/16-10.jpg
new file mode 100644
index 0000000..ee8cfb2
Binary files /dev/null and b/16_DevTool/img/16-10.jpg differ
diff --git a/16_DevTool/img/16-11.png b/16_DevTool/img/16-11.png
new file mode 100644
index 0000000..89d7b75
Binary files /dev/null and b/16_DevTool/img/16-11.png differ
diff --git a/16_DevTool/img/16-12.jpg b/16_DevTool/img/16-12.jpg
new file mode 100644
index 0000000..e0abdf5
Binary files /dev/null and b/16_DevTool/img/16-12.jpg differ
diff --git a/16_DevTool/img/16-2.jpg b/16_DevTool/img/16-2.jpg
new file mode 100644
index 0000000..28001cd
Binary files /dev/null and b/16_DevTool/img/16-2.jpg differ
diff --git a/16_DevTool/img/16-3.jpg b/16_DevTool/img/16-3.jpg
new file mode 100644
index 0000000..b2d76b4
Binary files /dev/null and b/16_DevTool/img/16-3.jpg differ
diff --git a/16_DevTool/img/16-4.jpg b/16_DevTool/img/16-4.jpg
new file mode 100644
index 0000000..f3c1290
Binary files /dev/null and b/16_DevTool/img/16-4.jpg differ
diff --git a/16_DevTool/img/16-5.jpg b/16_DevTool/img/16-5.jpg
new file mode 100644
index 0000000..c115a04
Binary files /dev/null and b/16_DevTool/img/16-5.jpg differ
diff --git a/16_DevTool/img/16-6.jpg b/16_DevTool/img/16-6.jpg
new file mode 100644
index 0000000..e4de676
Binary files /dev/null and b/16_DevTool/img/16-6.jpg differ
diff --git a/16_DevTool/img/16-7.jpg b/16_DevTool/img/16-7.jpg
new file mode 100644
index 0000000..922c5eb
Binary files /dev/null and b/16_DevTool/img/16-7.jpg differ
diff --git a/16_DevTool/img/16-8.png b/16_DevTool/img/16-8.png
new file mode 100644
index 0000000..d10781e
Binary files /dev/null and b/16_DevTool/img/16-8.png differ
diff --git a/16_DevTool/img/16-9.png b/16_DevTool/img/16-9.png
new file mode 100644
index 0000000..6a10ac9
Binary files /dev/null and b/16_DevTool/img/16-9.png differ
diff --git a/16_DevTool/readme.md b/16_DevTool/readme.md
new file mode 100644
index 0000000..c61799f
--- /dev/null
+++ b/16_DevTool/readme.md
@@ -0,0 +1,118 @@
+# WTF CSS极简教程: 16.开发者工具
+
+WTF CSS教程，总结/搬运自MDN CSS教程[开发者工具](https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools)和[调试CSS](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS)，帮助新人快速入门CSS。
+
+**推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
+
+**WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们介绍如何使用浏览器开发者工具的基本功能，并用它来调试CSS。
+
+## 什么是浏览器开发者工具？
+
+每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
+
+## 如何在浏览器中打开开发者工具
+
+开发者工具内置在您的浏览器的子窗口之中，大概像这样：
+
+![](./img/16-1.jpg)
+
+如何打开它？有三种方式：
+
+![](./img/16-2.jpg)
+
+![](./img/16-3.jpg)
+
+元素(Elements):DOM 浏览器和 CSS 编辑器
+
+开发者工具在打开时默认为Elements页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许您立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。
+
+![](./img/16-4.jpg)
+
+如果你看不到Elements,
+
+1. 点击“检查”选项卡
+2. 在 Internet Explorer 中，点击 DOM Explorer，或按 Ctrl + 1
+3. 在 Safari 中，控制就不是很清楚了，但是如果你没有选择的东西出现在窗口看到 HTML。按下按钮查看 CSS 样式。
+
+## 探索DOM检查器
+
+首先在DOM检查器中右键单击一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：
+
+![](./img/16-5.jpg)
+
+- 删除节点（或删除元素）：删除当前元素。
+- 编辑HTML（或添加属性/编辑文本）：让您更改HTML和看到在变化的结果。对于调试和测试非常有用。
+- :hover/:active/:focus（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
+- 复制/复制为 HTML：复制当前选定的 HTML。
+- 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的HTML元素CSS选择器或XPath表达式。
+
+要想编辑你的Element，你可以双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。
+
+## 探索CSS编辑器
+
+默认情况下，CSS编辑器显示当前所选元素应用的CSS规则：
+
+![](./img/16-6.jpg)
+
+以下功能特别有用：
+
+- 应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。
+- 点击每个声明旁边的复选框，看看如果删除声明会发生什么。
+- 点击每个简写属性旁边的小箭头显示属性的普通等效项。
+- 单击属性名称或值以显示一个文本框，您可以在其中键入新值以获取样式更改的实时预览。
+- 每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。
+- 您还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，您可以在其中为页面写入一个全新的声明。
+
+您会注意到CSS查看器顶部的一些可点击的选项卡：
+
+- 计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。
+- 盒子模型：这可以直观地表示当前元素的框模型，所以您可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。
+- 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。
+
+## 检查CSS
+
+从页面上选择一个元素，可以通过以下方法：右键该元素，选择检查；从DevTools左侧HTML tree中选择该元素。试试选择class为box1的元素吧，它是页面上的第一个元素，周围画有边框。
+
+![](./img/16-7.jpg)
+
+如果查看HTML右边的StyleS栏，你应该能看到该元素的CSS属性与值。你能看到直接应用到box1类上的规则，还有其继承了祖先的CSS（该例中指`<body>`）。这在一种情况下就很有帮助——你看到有些CSS并非在计划之内（或许它们继承自某个父元素然而你没有覆盖它们）。
+
+另一个有用的功能是将简写属性展开的功能。在我们的示例里面使用了margin的简写。点击小箭头来展开界面，显示不同的完整属性和它们的值。
+
+![](./img/16-8.png)
+
+你可以在Styles面板活动的时候打开或关闭值，在你将光标悬浮在上面的时候，就会出现勾选框。取消勾选一个规则的勾选框，例如border-radius，CSS 就会停止应用。
+
+![](./img/16-9.png)
+
+## 编辑值
+
+除了开关属性以外，你还能编辑它们的值。选择了box1以后，点击显示应用在边框的颜色的色块（被涂上颜色的圆），会打开一个颜色选择器，然后你就能尝试一些不同的颜色，页面上的显示会进行实时的更新。类似地，你也可以用这种方法改变宽度或者边框的样式。
+
+![](./img/16-10.jpg)
+
+## 添加一个新属性
+
+你可以使用开发者工具添加属性。你可以点击在规则中合拢的花括号，开始向里面键入一个新的声明，此时你可以开始键入新的属性，开发者工具会展示给你一个自动填充的对应属性列表。在选择了font-size以后，键入你想要尝试的值。你也可以点击“+”按钮以添加一个对应于相同选择器的规则，将你的新规则加到那里。
+
+![](./img/16-11.png)
+
+## 理解盒模型
+
+在之前的课程里我们已经讨论了盒模型，现在开发者工具可以确实帮助你理解元素尺寸的计算方式。
+
+将这两个分别带有 box1 和 box2 类的盒子进行比较，它们可能都应用了相同的宽度（400 像素），但是 box1 显然更宽。你可以在布局面板上看到，它的box-sizing为默认的content-box，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。
+
+带有 box2 类的盒子使用了 border-box，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 width: 400px。
+
+![](./img/16-12.jpg)
+
+## 总结
+
+这一讲我们简单介绍了如何使用开发者工具，并用它来对CSS进行初步的调试。开发者工具的功能十分强大，同时它在不同浏览器中的细节也有所不同，这部分就留给学员们自己探索。
diff --git "a/16_DevTool/\350\260\203\350\257\225CSS.html" "b/16_DevTool/\350\260\203\350\257\225CSS.html"
new file mode 100644
index 0000000..a1d185c
--- /dev/null
+++ "b/16_DevTool/\350\260\203\350\257\225CSS.html"
@@ -0,0 +1,77 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Inspecting CSS</title>
+
+    <style>
+        body {
+            background-color: #fff;
+            color: #333;
+            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+            padding: 0;
+            margin: 0;
+        }
+
+        .container {
+            padding: 20px 10px;
+            max-width: 900px;
+            margin: 40px auto;
+        }
+
+        .box1 {
+          width: 400px;
+          margin: 0 0 40px 0;
+          padding: 20px;
+          border: 5px solid rgb(75, 70, 74);
+          border-radius: .5em;
+        }
+
+        .box2 {
+          box-sizing: border-box;
+          width: 400px;
+          margin: 0 0 40px 0;
+          padding: 20px;
+          border: 5px solid rgb(78, 17, 66);
+          border-radius: .5em;
+        }
+
+        .special {
+          color: orange;
+        }
+
+        em {
+          color: hotpink;
+          font-weight: bold;
+        }
+
+    </style>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <div class="container">
+        <div class="box1">
+          <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
+            tomatillo
+            melon azuki bean garlic.</p>
+        </div>
+
+        <div class="box2">
+          <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
+            collard
+            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+        </div>
+
+        <p>Turnip <em class="special">greens</em> yarrow ricebean rutabaga endive cauliflower <em>sea lettuce</em> kohlrabi amaranth water spinach
+            avocado
+            daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
+            spinach
+            carrot soko.
+        </p>
+
+    </div>
+</body>
+</html>
diff --git a/17_CodeStandards/readme.md b/17_CodeStandards/readme.md
new file mode 100644
index 0000000..b6d3983
--- /dev/null
+++ b/17_CodeStandards/readme.md
@@ -0,0 +1,169 @@
+# WTF CSS极简教程: 17.代码规范
+
+WTF CSS教程，总结/搬运自[MDN CSS教程](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing)，帮助新人快速入门CSS。
+
+**推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
+
+**WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们介绍如何在编写时保持代码规范，从而使一个更大的样式表和大项目具有更强的可读性和可维护性。
+
+## 保持统一
+
+如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用Tab还是空格来缩进代码？如果是空格，用多少个？）
+
+一直遵守一系列规则，你会在编写 CSS 的时候省去不少精神上的预负担，因为一些决定已经定型了。
+
+## 将CSS格式化成可读的形式
+
+你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：
+
+```css
+.box { background-color: #567895; }
+h2 { background-color: black; color: white; }
+```
+
+还有的开发者更喜欢将所有的东西放在新的一行：
+
+```css
+.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}
+```
+
+CSS 不会管你使用哪种方式来进行格式化，我们的看法是，将每个属性值对放在新的一行会更好读。
+
+## 为你的CSS加注释
+
+在你的 CSS 里加入注释，不仅可以帮任何未来的开发者处理你的CSS文件，也可以在你离开项目一段时间后，帮你在回来时更轻松地重新上手。
+
+```css
+/* 这是一条 CSS 注释，
+它可以分成好几行。*/
+```
+
+在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是`||`。
+
+```css
+/* || General styles */
+
+...
+
+/* || Typography */
+
+...
+
+/* || Header and Main Navigation */
+
+...
+
+```
+
+你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
+
+为了对旧浏览器保持兼容，你用某种特殊方法使用了一种 CSS 属性，示例：
+
+```css
+.box {
+  background-color: red; /* fallback for older browsers that don't support gradients */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+```
+
+## 在你的样式表里面加入逻辑段落
+
+在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。典型地，你可以为以下的元素设定规则：
+
+- `body`
+- `p`
+- `h1`,`h2`,`h3`,`h4`,`h5`
+- `ul`和`ol`
+- `table`属性
+- `a`
+
+在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。
+
+```css
+/* || GENERAL STYLES */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+```
+
+在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。
+
+```css
+/* || UTILITIES */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+```
+
+然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。
+
+```css
+/* || SITEWIDE */
+
+.main-nav { ... }
+
+.logo { ... }
+
+```
+
+最后我们可以在 CSS 里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。
+
+```css
+/* || STORE PAGES */
+
+.product-listing { ... }
+
+.product-box { ... }
+
+```
+
+通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。
+
+## 避免太特定的选择器
+
+如果你创建了很特定的选择器，你经常会发现，你需要在你的 CSS 中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有`main`类的`<article>`里面的带有`box`类的`<p>`上应用了规则。
+
+```css
+article.main p.box {
+  border: 1px solid #ccc;
+}
+```
+
+如果你之后想要在`main`外的什么地方上应用相同的规则，或者在`<p>`外的其他地方，你可能必须在这些规则中加入另一个选择器，或者直接新建个规则。或者，你也可以建立一个名为`box`的类，在任何地方应用。
+
+```css
+.box {
+  border: 1px solid #ccc;
+}
+```
+
+将东西设置的更为特定，有时也有意义，但是这一般与其说是通常实践，倒不如说是例外。
+
+
+## 总结
+
+这一讲我们介绍了在编写时如何保持代码规范，并给出了相应的示例。对一个前端开发人员而言，代码编写规范是一个十分重要的素养。
diff --git a/17_CodeStandards/style.css b/17_CodeStandards/style.css
new file mode 100644
index 0000000..5ce732c
--- /dev/null
+++ b/17_CodeStandards/style.css
@@ -0,0 +1,55 @@
+.box {
+    background-color: #567895;
+}
+
+h2 {
+    background-color: black;
+    color: white;
+}
+
+.box {
+    background-color: red;
+    /* fallback for older browsers that don't support gradients */
+    background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+
+/* || GENERAL STYLES */
+
+body {}
+
+h1,
+h2,
+h3,
+h4 {}
+
+ul {}
+
+blockquote {}
+
+/* || UTILITIES */
+
+.nobullets {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* || SITEWIDE */
+
+.main-nav {}
+
+.logo {}
+
+/* || STORE PAGES */
+
+.product-listing {}
+
+.product-box {}
+
+article.main p.box {
+    border: 1px solid #ccc;
+}
+
+.box {
+    border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/css/reset.css b/18_UniswapHTML&CSS/css/reset.css
new file mode 100644
index 0000000..247d92e
--- /dev/null
+++ b/18_UniswapHTML&CSS/css/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/css/style.css b/18_UniswapHTML&CSS/css/style.css
new file mode 100644
index 0000000..ed01a0c
--- /dev/null
+++ b/18_UniswapHTML&CSS/css/style.css
@@ -0,0 +1 @@
+body{background-color:#f7ebf3}.header{margin-top:20px}.header>img{width:25px}.header>.switchPage{position:absolute;top:20px;right:50%;margin-right:-140px;background-color:white;border-radius:20px}.header>.switchPage>a{display:inline-block;width:70px;line-height:40px;text-align:center}.header>.switchPage>a:first-child{background-color:#f7f8fa;border-radius:20px}.header>.right{display:flex;position:absolute;top:20px;right:0}.header>.right>.changeNetwork{background-color:white;margin-right:10px;width:120px;border-radius:15px;text-align:center}.header>.right>.changeNetwork>img{position:relative;top:5px;width:25px}.header>.right>.changeNetwork>.Ethereum{line-height:40px}.header>.right>.connect{background-color:#fdeaf1;color:#d50066;border:4px white solid;width:100px;height:40px;margin-right:10px;border-radius:20px;font-size:16px}.header>.right>.menu{background-color:white;font-size:20px;border:4px white solid;width:42px;height:40px;margin-right:10px;border-radius:15px}.body{margin-top:80px}.body>.swap-page{position:relative;background-color:white;width:446px;height:298px;left:50%;margin-left:-223px;border-radius:20px;padding:10px}.body>.swap-page>.swap-page-header{margin:10px auto;width:422px;height:20px}.body>.swap-page>.swap-page-header>span{line-height:20px}.body>.swap-page>.swap-page-header>button{float:right;background-color:white;border:none}.body>.swap-page>.swap-page-header>button>img{width:20px}.body>.swap-page .token1,.body>.swap-page .token2{background-color:#f7f8fa;width:444px;height:62px;margin:5px auto;padding:16px 0;border-radius:20px}.body>.swap-page .token1>input,.body>.swap-page .token2>input{background-color:#f7f8fa;border:none;line-height:33px;font-size:33px;width:294px;padding:0 15px}.body>.swap-page .token1 .token1-btn,.body>.swap-page .token2 .token1-btn{background-color:#edeef2;border:none;width:91px;height:38px;border-radius:19px;line-height:38px}.body>.swap-page .token1 .token1-btn img,.body>.swap-page .token2 .token1-btn img{position:relative;top:5px;width:25px}.body>.swap-page .token1 .token1-btn span,.body>.swap-page .token2 .token1-btn span{font-size:20px}.body>.swap-page .token1 .token2-btn,.body>.swap-page .token2 .token2-btn{background-color:#e8006f;color:white;border:none;width:101px;height:38px;border-radius:19px;line-height:38px}.body>.swap-page .token1 .token2-btn span,.body>.swap-page .token2 .token2-btn span{font-size:20px}.body>.swap-page .arrow{background-color:#f7f8fa;border:5px white solid;border-radius:25%;position:absolute;top:130px;left:50%;margin-left:-10px}.body>.swap-page .arrow>img{width:20px}.body>.swap-page .swap-page-footer-connect{width:100%;height:55px;border:none;border-radius:13px;background-color:#fdeaf1;color:#d50066;font-size:16px}.body>.chooseLanguage{position:relative;display:inline-block;width:130px;font-size:12px;left:50%;margin-left:-65px;top:10px}.body>.gasPriceAndBlockNumber{position:absolute;top:100%;margin-top:-36px;margin-right:20px;right:0;font-size:10px}/*# sourceMappingURL=./style.css.map */
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/css/style.css.map b/18_UniswapHTML&CSS/css/style.css.map
new file mode 100644
index 0000000..cc03eba
--- /dev/null
+++ b/18_UniswapHTML&CSS/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.less"],"names":[],"mappings":"AACA,KACI,yBAGJ,QACI,gBACA,OAAC,KACG,WAEJ,OAAC,aACG,iBAAA,CACA,QAAA,CACA,SAAA,CACA,mBAAA,CACA,sBAAA,CACA,mBACA,OAPH,YAOI,GACG,oBAAA,CACA,UAAA,CACA,gBAAA,CACA,kBACA,OAZP,YAOI,EAKI,aACG,wBAAA,CACA,mBAKZ,OAAC,QACG,YAAA,CACA,iBAAA,CACA,QAAA,CACA,QAEA,OANH,OAMI,gBAEG,sBAAA,CACA,iBAAA,CACA,WAAA,CACA,kBAAA,CACA,kBAEA,OAdP,OAMI,eAQI,KACG,iBAAA,CACA,OAAA,CACA,WAGJ,OApBP,OAMI,eAcI,WACG,iBAIR,OAzBH,OAyBI,UACG,wBAAA,CACA,aAAA,CACA,sBAAA,CACA,WAAA,CACA,WAAA,CACA,iBAAA,CACA,kBAAA,CACA,eAGJ,OApCH,OAoCI,OACG,sBAAA,CACA,cAAA,CACA,sBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,mBAKZ,MACI,gBAEA,KAAC,YACG,iBAAA,CACA,sBAAA,CACA,WAAA,CACA,YAAA,CACA,QAAA,CACA,kBAAA,CACA,kBAAA,CACA,aACA,KATH,WASI,mBACG,gBAAA,CACA,WAAA,CACA,YACA,KAbP,WASI,kBAII,MACG,iBAGJ,KAjBP,WASI,kBAQI,QACG,WAAA,CACA,sBAAA,CACA,YAEA,KAtBX,WASI,kBAQI,OAKI,KACG,WAIZ,KA3BH,WA2BK,SA3BN,KAAC,WA4BG,SACI,wBAAA,CACA,WAAA,CACA,WAAA,CACA,eAAA,CACA,cAAA,CACA,mBACA,KAnCP,WA2BK,QAQG,OAAD,KAnCP,WA4BG,QAOK,OACG,wBAAA,CACA,WAAA,CACA,gBAAA,CACA,cAAA,CACA,WAAA,CACA,eAGJ,KA5CP,WA2BK,QAiBI,aAAF,KA5CP,WA4BG,QAgBM,aACE,wBAAA,CACA,WAAA,CACA,UAAA,CACA,WAAA,CACA,kBAAA,CACA,iBACA,KAnDX,WA2BK,QAiBI,YAOI,KAAF,KAnDX,WA4BG,QAgBM,YAOI,KACE,iBAAA,CACA,OAAA,CACA,WAEJ,KAxDX,WA2BK,QAiBI,YAYI,MAAF,KAxDX,WA4BG,QAgBM,YAYI,MACE,eAGR,KA5DP,WA2BK,QAiCI,aAAF,KA5DP,WA4BG,QAgCM,aACE,wBAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,WAAA,CACA,kBAAA,CACA,iBACA,KApEX,WA2BK,QAiCI,YAQI,MAAF,KApEX,WA4BG,QAgCM,YAQI,MACE,eAIZ,KAzEH,WAyEK,QACE,wBAAA,CACA,sBAAA,CACA,iBAAA,CACA,iBAAA,CACA,SAAA,CACA,QAAA,CACA,kBACA,KAjFP,WAyEK,OAQG,KACG,WAGR,KArFH,WAqFK,2BACO,UAAA,CACA,WAAA,CACA,WAAA,CACA,kBAAA,CACA,wBAAA,CACA,aAAA,CACA,eAGb,KAAC,iBACG,iBAAA,CACA,oBAAA,CACA,WAAA,CACA,cAAA,CACA,QAAA,CACA,iBAAA,CACA,SAEJ,KAAC,yBACG,iBAAA,CACA,QAAA,CACA,gBAAA,CACA,iBAAA,CACA,OAAA,CACA"}
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/css/style.less b/18_UniswapHTML&CSS/css/style.less
new file mode 100644
index 0000000..c1e642c
--- /dev/null
+++ b/18_UniswapHTML&CSS/css/style.less
@@ -0,0 +1,193 @@
+// 改变背景颜色
+body {
+    background-color: #f7ebf3;
+}
+// 设置头部样式
+.header {
+    margin-top: 20px;
+    &>img {
+        width: 25px;
+    }
+    &>.switchPage {
+        position: absolute;
+        top: 20px;
+        right: 50%;
+        margin-right: -140px;
+        background-color: white;
+        border-radius: 20px;
+        &>a {
+            display: inline-block;
+            width: 70px;
+            line-height: 40px;
+            text-align: center;
+            &:first-child {
+                background-color: #f7f8fa;
+                border-radius: 20px;
+            }
+        }
+    }
+
+    &>.right {
+        display: flex;
+        position: absolute;
+        top: 20px;
+        right: 0;
+
+        &>.changeNetwork {
+
+            background-color: white;
+            margin-right: 10px;
+            width: 120px;
+            border-radius: 15px;
+            text-align: center;
+
+            &>img {
+                position: relative;
+                top: 5px;
+                width: 25px;
+            }
+
+            &>.Ethereum {
+                line-height: 40px;
+            }
+        }
+
+        &>.connect {
+            background-color: #fdeaf1;
+            color: #d50066;
+            border: 4px white solid;
+            width: 100px;
+            height: 40px;
+            margin-right: 10px;
+            border-radius: 20px;
+            font-size: 16px;
+        }
+
+        &>.menu {
+            background-color: white;
+            font-size: 20px;
+            border: 4px white solid;
+            width: 42px;
+            height: 40px;
+            margin-right: 10px;
+            border-radius: 15px;
+        }
+    }
+}
+// 设置中间内容的样式
+.body {
+    margin-top: 80px;
+
+    &>.swap-page {
+        position: relative;
+        background-color: white;
+        width: 446px;
+        height: 298px;
+        left: 50%;
+        margin-left: -223px;
+        border-radius: 20px;
+        padding: 10px;
+        &>.swap-page-header {
+            margin:10px auto;
+            width: 422px;
+            height: 20px;
+            &>span {
+                line-height: 20px;
+            }
+
+            &>button {
+                float: right;
+                background-color: white;
+                border: none;
+
+                &>img {
+                    width: 20px;
+                }
+            }
+        }
+        & .token1,
+        .token2 {
+            background-color: #f7f8fa;
+            width: 444px;
+            height: 62px;
+            margin: 5px auto;
+            padding: 16px 0;
+            border-radius: 20px;
+            &>input {
+                background-color: #f7f8fa;
+                border: none;
+                line-height: 33px;
+                font-size: 33px;
+                width: 294px;
+                padding: 0 15px;
+            }
+
+            & .token1-btn {
+                background-color: #edeef2;
+                border: none;
+                width: 91px;
+                height: 38px;
+                border-radius: 19px;
+                line-height: 38px;
+                & img {
+                    position: relative;
+                    top: 5px;
+                    width: 25px;
+                }
+                & span {
+                    font-size: 20px;
+                }
+            }
+            & .token2-btn {
+                background-color: #e8006f;
+                color: white;
+                border: none;
+                width: 101px;
+                height: 38px;
+                border-radius: 19px;
+                line-height: 38px;
+                & span {
+                    font-size: 20px;
+                }
+            }
+        }
+        & .arrow{
+            background-color: #f7f8fa;
+            border: 5px white solid;
+            border-radius: 25%;
+            position: absolute;
+            top:130px;
+            left:50%;
+            margin-left:-10px;
+            &>img{
+                width: 20px;
+            }
+        }
+        & .swap-page-footer-connect{
+                 width: 100%;
+                 height: 55px;
+                 border: none;
+                 border-radius: 13px;
+                 background-color: #fdeaf1;
+                 color: #d50066;
+                 font-size: 16px;
+        }
+    }
+    &>.chooseLanguage{
+        position: relative;
+        display: inline-block;
+        width: 130px;
+        font-size: 12px;
+        left:50%;
+        margin-left: -65px;
+        top:10px;
+    }
+    &>.gasPriceAndBlockNumber{
+        position: absolute;
+        top:100%;
+        margin-top: -36px;
+        margin-right:20px;
+        right:0;
+        font-size: 10px;
+    }
+}
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/img/18-1.jpg b/18_UniswapHTML&CSS/img/18-1.jpg
new file mode 100644
index 0000000..c6261b4
Binary files /dev/null and b/18_UniswapHTML&CSS/img/18-1.jpg differ
diff --git a/18_UniswapHTML&CSS/img/18-2.jpg b/18_UniswapHTML&CSS/img/18-2.jpg
new file mode 100644
index 0000000..60ce40b
Binary files /dev/null and b/18_UniswapHTML&CSS/img/18-2.jpg differ
diff --git a/18_UniswapHTML&CSS/img/18-3.jpg b/18_UniswapHTML&CSS/img/18-3.jpg
new file mode 100644
index 0000000..48600e9
Binary files /dev/null and b/18_UniswapHTML&CSS/img/18-3.jpg differ
diff --git a/18_UniswapHTML&CSS/img/18-4.jpg b/18_UniswapHTML&CSS/img/18-4.jpg
new file mode 100644
index 0000000..977e828
Binary files /dev/null and b/18_UniswapHTML&CSS/img/18-4.jpg differ
diff --git a/18_UniswapHTML&CSS/img/arrow.png b/18_UniswapHTML&CSS/img/arrow.png
new file mode 100644
index 0000000..8f61f94
Binary files /dev/null and b/18_UniswapHTML&CSS/img/arrow.png differ
diff --git a/18_UniswapHTML&CSS/img/ethereum.png b/18_UniswapHTML&CSS/img/ethereum.png
new file mode 100644
index 0000000..760946e
Binary files /dev/null and b/18_UniswapHTML&CSS/img/ethereum.png differ
diff --git a/18_UniswapHTML&CSS/img/icon.png b/18_UniswapHTML&CSS/img/icon.png
new file mode 100644
index 0000000..3b61db1
Binary files /dev/null and b/18_UniswapHTML&CSS/img/icon.png differ
diff --git a/18_UniswapHTML&CSS/img/setup.png b/18_UniswapHTML&CSS/img/setup.png
new file mode 100644
index 0000000..f3dffac
Binary files /dev/null and b/18_UniswapHTML&CSS/img/setup.png differ
diff --git a/18_UniswapHTML&CSS/index.html b/18_UniswapHTML&CSS/index.html
new file mode 100644
index 0000000..f861035
--- /dev/null
+++ b/18_UniswapHTML&CSS/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="icon" href="./img/icon.png">
+    <title>Uniswap Interface</title>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <div class="header">
+        <img src="./img/icon.png" alt="icon">
+        <div class="switchPage">
+            <a>兑换</a>
+            <a>流动池</a>
+            <a>投票</a>
+            <a>图标</a>
+        </div>
+        <div class="right">
+            <div class="changeNetwork">
+                <img src="./img/ethereum.png" alt="eth">
+                <span class="Ethereum">Ethereum</span>
+            </div>
+            <button class="connect">连接钱包</button>
+            <button class="menu">···</button>
+        </div>
+    </div>
+    <div class="body">
+        <div class="swap-page">
+            <div class="swap-page-header">
+                <span>兑换</span>
+                <button>
+                    <img src="./img/setup.png" alt="setup">
+                </button>
+            </div>
+            <div class="swap-page-body">
+                <div class="token1">
+                    <input type="text" inputmode="decimal" placeholder="0.0">
+                    <button class="token1-btn">
+                        <div class="token1-info">
+                            <img src="./img/ethereum.png" alt="eth">
+                            <span>ETH</span>
+                        </div>
+                    </button>
+                </div>
+                <button class="arrow">
+                    <img src="./img/arrow.png" alt="arrow">
+                </button>
+                <div class="token2">
+                    <input type="text" inputmode="decimal" placeholder="0.0">
+                    <button class="token2-btn">
+                        <div class="token2-info">
+                            <span>选择令牌</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+            <div class="swap-page-footer">
+                <button class="swap-page-footer-connect">连接钱包</button>
+            </div>
+        </div>
+        <div class="chooseLanguage">
+            <span>Uniswap可用：</span>
+            <a href="">English</a>
+        </div>
+        <div class="gasPriceAndBlockNumber">
+            <a href="https://etherscan.io/gastracker"> 3 gwei</a>
+            <a href="">15687194</a>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/18_UniswapHTML&CSS/readme.md b/18_UniswapHTML&CSS/readme.md
new file mode 100644
index 0000000..dfd5fcf
--- /dev/null
+++ b/18_UniswapHTML&CSS/readme.md
@@ -0,0 +1,289 @@
+# WTF CSS极简教程: 18.UniswapHTML&CSS
+
+WTF CSS教程，总结/搬运自[MDN CSS教程](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)，帮助新人快速入门CSS。
+
+**推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
+
+**WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们将在WTF HTML第九讲UniswapHTML的基础上用预处理器less给它增加CSS样式表，最终效果如下：
+
+![总体效果](./img/18-1.jpg)
+
+**注意**：本讲所用的HTML内容在之前的基础上做了略微的调整，想要练习的学员请下载本讲中最新的文件
+
+## background
+
+首先我们设置背景的颜色，可以用取色器取来颜色后直接给`background-color`赋值
+
+```css
+body {
+    background-color: #f7ebf3;
+}
+```
+
+## `class="header"`
+
+然后我们处理头部的样式，Uniswap原生的样式是这样的：
+
+![头部样式](./img/18-2.jpg)
+
+头部的排列可以使用定位来解决。左右子元素的定位很简单，但中间元素想要让它居中，除了要让`right=50%`，还得让`margin-right: -140px`（`140px`是中间元素宽度的一半），否则会让它的右边居中。
+
+`border-radius`不要设置成百分比，因为元素的宽高不同，设置成行高的一半即可。
+
+`a`的`display`设置成`inline-block`，这样就可以调整他的宽度。
+
+`line-height`设置成`40px`不仅可以改变`a`的高度，还可以让其中的内容垂直居中。
+
+```css
+.header {
+    margin-top: 20px;
+    &>img {
+        width: 25px;
+    }
+    &>.switchPage {
+        position: absolute;
+        top: 20px;
+        right: 50%;
+        margin-right: -140px;
+        background-color: white;
+        border-radius: 20px;
+        &>a {
+            display: inline-block;
+            width: 70px;
+            line-height: 40px;
+            text-align: center;
+            &:first-child {
+                background-color: #f7f8fa;
+                border-radius: 20px;
+            }
+        }
+    }
+}
+```
+
+对于右边的一组元素，我们将包裹他们的父元素的`position`设置成`absolute`，再让`right: 0`，就可以让它们位于页面右边。再将它的`display`设置成`flex`，就可以让他的三个子元素位于同一行。
+
+`changeNetwork`里`img`的`position`要先设置成`relative`，再调整它的`top`,使得它与右边的文字水平对齐。
+
+同时还要调整三个子元素的`margin-right`，让它们不要挤在一起。
+
+```css
+    &>.right {
+        display: flex;
+        position: absolute;
+        top: 20px;
+        right: 0;
+
+        &>.changeNetwork {
+
+            background-color: white;
+            margin-right: 10px;
+            width: 120px;
+            border-radius: 15px;
+            text-align: center;
+
+            &>img {
+                position: relative;
+                top: 5px;
+                width: 25px;
+            }
+
+            &>.Ethereum {
+                line-height: 40px;
+            }
+        }
+
+        &>.connect {
+            background-color: #fdeaf1;
+            color: #d50066;
+            border: 4px white solid;
+            width: 100px;
+            height: 40px;
+            margin-right: 10px;
+            border-radius: 20px;
+            font-size: 16px;
+        }
+
+        &>.menu {
+            background-color: white;
+            font-size: 20px;
+            border: 4px white solid;
+            width: 42px;
+            height: 40px;
+            margin-right: 10px;
+            border-radius: 15px;
+        }
+    }
+```
+
+到此`header`里的关键点就讲完了，效果如下：
+
+![头部效果](./img/18-3.jpg)
+
+## `class="body"`
+
+最后我们处理中间内容的样式，这部分会比较复杂。
+
+我们先将`class="body"`的`margin-top`调整为`80px`，将它与头部分开。
+
+然后是`swap-page`的样式，`position`修改为`relative`后，要同时调整`left`和`margin-left`才能让它水平居中。
+
+`padding`也需要给它赋值，让`swap-page`与它的子元素分开。
+
+```css
+&>.swap-page {
+        position: relative;
+        background-color: white;
+        width: 446px;
+        height: 298px;
+        left: 50%;
+        margin-left: -223px;
+        border-radius: 20px;
+        padding: 10px;
+}
+```
+
+接着是`swap-page-header`，`margin`设置为`10px auto`可以让它水平居中。
+
+```css
+&>.swap-page-header {
+            margin:10px auto;
+            width: 422px;
+            height: 20px;
+}
+```
+
+然后是`token1`和`token2`共同的样式，调整它们的`margin`和`padding`可以将它们与父、子元素分离。调整子元素`input`的`padding`可以让输入的内容不紧挨着边框。
+
+```css
+& .token1,
+        .token2 {
+            background-color: #f7f8fa;
+            width: 444px;
+            height: 62px;
+            margin: 5px auto;
+            padding: 16px 0;
+            border-radius: 20px;
+            &>input {
+                background-color: #f7f8fa;
+                border: none;
+                line-height: 33px;
+                font-size: 33px;
+                width: 294px;
+                padding: 0 15px;
+            }
+        }
+```
+
+之后是`token1-btnto`和`token2-btn`不同样式的设计。
+
+```css
+            & .token1-btn {
+                background-color: #edeef2;
+                border: none;
+                width: 91px;
+                height: 38px;
+                border-radius: 19px;
+                line-height: 38px;
+                & img {
+                    position: relative;
+                    top: 5px;
+                    width: 25px;
+                }
+                & span {
+                    font-size: 20px;
+                }
+            }
+            & .token2-btn {
+                background-color: #e8006f;
+                color: white;
+                border: none;
+                width: 101px;
+                height: 38px;
+                border-radius: 19px;
+                line-height: 38px;
+                & span {
+                    font-size: 20px;
+                }
+            }
+```
+
+接着是两个`input`中间的箭头`button`,将它的`position`设置为`absolute`可以让它从文档流中脱离，再调整它的`top`、`left`和`margin-left`让它位于两个`input`中间
+
+```css
+        & .arrow{
+            background-color: #f7f8fa;
+            border: 5px white solid;
+            border-radius: 25%;
+            position: absolute;
+            top:130px;
+            left:50%;
+            margin-left:-10px;
+            &>img{
+                width: 20px;
+            }
+        }
+```
+
+然后是尾部连接钱包的`button`，这里未涉及到位置的赋值。
+
+```css
+        & .swap-page-footer-connect{
+                 width: 100%;
+                 height: 55px;
+                 border: none;
+                 border-radius: 13px;
+                 background-color: #fdeaf1;
+                 color: #d50066;
+                 font-size: 16px;
+        }
+```
+
+到此swap的样式就完成了，效果如下：
+
+![swap样式](./img/18-4.jpg)
+
+最后就剩下`chooseLanguage`和`gasPriceAndBlockNumber`的样式，这两部分比较简单。
+
+先将`chooseLanguage`的`display`设置为`inline-block`，方便我们调整它的宽度，宽度设置好之后就可以通过`position`、`left`、`margin-left`和`top`调整它的位置。
+
+```css
+    &>.chooseLanguage{
+        position: relative;
+        display: inline-block;
+        width: 130px;
+        font-size: 12px;
+        left:50%;
+        margin-left: -65px;
+        top:10px;
+    }
+```
+
+`gasPriceAndBlockNumber`位于页面右下方，我们可以直接将它的`position`设置为`absolute`，让它脱离文档流，再通过调整`top`、`margin-top`、`margin-right`和`right`让它处于页面右下角。
+
+```css
+    &>.gasPriceAndBlockNumber{
+        position: absolute;
+        top:100%;
+        margin-top: -36px;
+        margin-right:20px;
+        right:0;
+        font-size: 10px;
+    }
+```
+
+至此，Uniswap极简页面就完成了，效果如下：
+
+![总体效果](./img/18-1.jpg)
+
+可以看到，我们做的极简页面和官方页面是非常相似的。但目前该页面还没有任何功能，这需要我们后续继续给他加上JS。
+
+## 总结
+
+这一讲我们在之前UniswapHTML的基础上增加了样式表，做出的效果与官方页面十分相似。学员们自己练习时不必写的与本教程一模一样，只要能达到预期效果即可。
diff --git a/19_BAYCHTML&CSS/css/index.css b/19_BAYCHTML&CSS/css/index.css
new file mode 100644
index 0000000..8cce67e
--- /dev/null
+++ b/19_BAYCHTML&CSS/css/index.css
@@ -0,0 +1 @@
+body{background-color:black}*{color:white}.right{display:flex;justify-content:flex-end}.header>img{position:relative;left:50%;margin-left:-150px;padding-top:24px;margin-bottom:-40px;width:300px;z-index:1}.header a{text-decoration:none}.header a>img{margin-left:10px;height:16px}.header>.socialMedia{position:absolute;top:50px;right:50%;margin-right:-550px}.body>.welcome{width:1140px;position:relative;left:50%;margin-left:-570px}.body>.welcome video{width:100%}.body>.welcome>.mint{background-color:black;position:absolute;bottom:0px;width:380px;height:215px}.body>.welcome>.mint>h1{width:285px;height:98px;font-size:27px}.body>.welcome>.mint>button{width:285px;height:52px;font-size:16px;color:black;background-color:#bfc500;border-radius:10px}.body>.welcome>.mint>button:hover{background-color:white;transition:.5s}.body>.description{position:relative;left:50%;margin-left:-570px;width:700px;height:48px;margin-top:40px;margin-bottom:60px}.footer>.line{margin:0 auto;width:93%;height:2px;background-color:white}.footer>.info{display:flex;justify-content:space-between;width:90%;height:240px;margin:30px 96px}.footer>.info>.email{width:530px;height:62px;margin:69px 0;padding:0 15px}.footer>.info>.email>.get-on-the-list{font-size:13px}.footer>.info>.email>.getEmail{width:530px;height:28px;padding-top:10px}.footer>.info>.email>.getEmail>input{width:376px;height:24px;padding:2px 2px 2px 10px;box-sizing:border-box;background-color:#272626;color:white;border:none}.footer>.info>.email>.getEmail>button{width:36px;height:24px;background-color:#4b4a4a;position:relative;top:1px;left:-5px;border:none}.footer>.info>img{width:200px;height:200px}.footer>.info>.others{width:560px;height:184px;padding:20px 0}.footer>.info>.others .socialMedia{margin:28px 0}.footer>.info>.others .socialMedia>a{text-decoration:none}.footer>.info>.others .socialMedia>a>img{margin-left:10px;height:16px}.footer>.info>.others .copyright{height:24px;font-size:12px}.footer>.info>.others>.a-wrapper{height:26px}.footer>.info>.others>.a-wrapper>a{color:yellowgreen;font-size:12px}/*# sourceMappingURL=./index.css.map */
\ No newline at end of file
diff --git a/19_BAYCHTML&CSS/css/index.css.map b/19_BAYCHTML&CSS/css/index.css.map
new file mode 100644
index 0000000..15bbd20
--- /dev/null
+++ b/19_BAYCHTML&CSS/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,KACI,uBAGJ,EAEI,YAGJ,OACI,YAAA,CACA,yBAIA,OAAC,KACG,iBAAA,CACA,QAAA,CACA,kBAAA,CACA,gBAAA,CACA,mBAAA,CACA,WAAA,CACA,UAGJ,OAAE,GACE,qBAEA,OAHF,EAGG,KACG,gBAAA,CACA,YAIR,OAAC,cACG,iBAAA,CACA,QAAA,CACA,SAAA,CACA,oBAKJ,KAAC,UACG,YAAA,CACA,iBAAA,CACA,QAAA,CACA,mBAEA,KANH,SAMK,OACE,WAGJ,KAVH,SAUI,OACG,sBAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,aAEA,KAjBP,SAUI,MAOI,IACG,WAAA,CACA,WAAA,CACA,eAGJ,KAvBP,SAUI,MAaI,QACG,WAAA,CACA,WAAA,CACA,cAAA,CACA,WAAA,CACA,wBAAA,CACA,mBAEA,KA/BX,SAUI,MAaI,OAQI,OACG,sBAAA,CACA,eAMhB,KAAC,cACG,iBAAA,CACA,QAAA,CACA,kBAAA,CACA,WAAA,CACA,WAAA,CACA,eAAA,CACA,mBAKJ,OAAC,OACG,aAAA,CACA,SAAA,CACA,UAAA,CACA,uBAGJ,OAAC,OACG,YAAA,CACA,6BAAA,CACA,SAAA,CACA,YAAA,CACA,iBAEA,OAPH,MAOI,QACG,WAAA,CACA,WAAA,CACA,aAAA,CACA,eAEA,OAbP,MAOI,OAMI,kBACG,eAGJ,OAjBP,MAOI,OAUI,WACG,WAAA,CACA,WAAA,CACA,iBAEA,OAtBX,MAOI,OAUI,UAKI,OACG,WAAA,CACA,WAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,WAAA,CACA,YAGJ,OAhCX,MAOI,OAUI,UAeI,QACG,UAAA,CACA,WAAA,CACA,wBAAA,CACA,iBAAA,CACA,OAAA,CACA,SAAA,CACA,YAKZ,OA5CH,MA4CI,KACG,WAAA,CACA,aAGJ,OAjDH,MAiDI,SACG,WAAA,CACA,YAAA,CACA,eAEA,OAtDP,MAiDI,QAKK,cACE,cAEA,OAzDX,MAiDI,QAKK,aAGG,GACG,qBAEA,OA5Df,MAiDI,QAKK,aAGG,EAGI,KACG,gBAAA,CACA,YAKZ,OAnEP,MAiDI,QAkBK,YACE,WAAA,CACA,eAGJ,OAxEP,MAiDI,QAuBI,YACG,YAEA,OA3EX,MAiDI,QAuBI,WAGI,GACG,iBAAA,CACA"}
\ No newline at end of file
diff --git a/19_BAYCHTML&CSS/css/index.less b/19_BAYCHTML&CSS/css/index.less
new file mode 100644
index 0000000..a1b680f
--- /dev/null
+++ b/19_BAYCHTML&CSS/css/index.less
@@ -0,0 +1,185 @@
+body {
+    background-color: black;
+}
+
+* {
+
+    color: white;
+}
+
+.right {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.header {
+    &>img {
+        position: relative;
+        left: 50%;
+        margin-left: -150px;
+        padding-top: 24px;
+        margin-bottom: -40px;
+        width: 300px;
+        z-index: 1;
+    }
+
+    & a {
+        text-decoration: none;
+
+        &>img {
+            margin-left: 10px;
+            height: 16px;
+        }
+    }
+
+    &>.socialMedia {
+        position: absolute;
+        top: 50px;
+        right: 50%;
+        margin-right: -550px;
+    }
+}
+
+.body {
+    &>.welcome {
+        width: 1140px;
+        position: relative;
+        left: 50%;
+        margin-left: -570px;
+
+        & video {
+            width: 100%;
+        }
+
+        &>.mint {
+            background-color: black;
+            position: absolute;
+            bottom: 0px;
+            width: 380px;
+            height: 215px;
+
+            &>h1 {
+                width: 285px;
+                height: 98px;
+                font-size: 27px;
+            }
+
+            &>button {
+                width: 285px;
+                height: 52px;
+                font-size: 16px;
+                color: black;
+                background-color: #bfc500;
+                border-radius: 10px;
+
+                &:hover {
+                    background-color: white;
+                    transition: 0.5s;
+                }
+            }
+        }
+    }
+
+    &>.description {
+        position: relative;
+        left: 50%;
+        margin-left: -570px;
+        width: 700px;
+        height: 48px;
+        margin-top: 40px;
+        margin-bottom: 60px;
+    }
+}
+
+.footer {
+    &>.line {
+        margin: 0 auto;
+        width: 93%;
+        height: 2px;
+        background-color: white;
+    }
+
+    &>.info {
+        display: flex;
+        justify-content: space-between;
+        width: 90%;
+        height: 240px;
+        margin: 30px 96px;
+
+        &>.email {
+            width: 530px;
+            height: 62px;
+            margin: 69px 0;
+            padding: 0 15px;
+
+            &>.get-on-the-list {
+                font-size: 13px;
+            }
+
+            &>.getEmail {
+                width: 530px;
+                height: 28px;
+                padding-top: 10px;
+
+                &>input {
+                    width: 376px;
+                    height: 24px;
+                    padding: 2px 2px 2px 10px;
+                    box-sizing: border-box;
+                    background-color: #272626;
+                    color: white;
+                    border: none;
+                }
+
+                &>button {
+                    width: 36px;
+                    height: 24px;
+                    background-color: #4b4a4a;
+                    position: relative;
+                    top: 1px;
+                    left: -5px;
+                    border: none;
+                }
+            }
+        }
+
+        &>img {
+            width: 200px;
+            height: 200px;
+        }
+
+        &>.others {
+            width: 560px;
+            height: 184px;
+            padding: 20px 0;
+
+            & .socialMedia {
+                margin: 28px 0;
+
+                &>a {
+                    text-decoration: none;
+
+                    &>img {
+                        margin-left: 10px;
+                        height: 16px;
+                    }
+                }
+            }
+
+            & .copyright {
+                height: 24px;
+                font-size: 12px;
+            }
+
+            &>.a-wrapper {
+                height: 26px;
+
+                &>a {
+                    color: yellowgreen;
+                    font-size: 12px;
+                }
+            }
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/19_BAYCHTML&CSS/img/19-1.png b/19_BAYCHTML&CSS/img/19-1.png
new file mode 100644
index 0000000..39f4cda
Binary files /dev/null and b/19_BAYCHTML&CSS/img/19-1.png differ
diff --git a/19_BAYCHTML&CSS/img/19-2.jpg b/19_BAYCHTML&CSS/img/19-2.jpg
new file mode 100644
index 0000000..49cbe83
Binary files /dev/null and b/19_BAYCHTML&CSS/img/19-2.jpg differ
diff --git a/19_BAYCHTML&CSS/img/19-3.jpg b/19_BAYCHTML&CSS/img/19-3.jpg
new file mode 100644
index 0000000..004ac27
Binary files /dev/null and b/19_BAYCHTML&CSS/img/19-3.jpg differ
diff --git a/19_BAYCHTML&CSS/img/19-4.jpg b/19_BAYCHTML&CSS/img/19-4.jpg
new file mode 100644
index 0000000..27b5bfc
Binary files /dev/null and b/19_BAYCHTML&CSS/img/19-4.jpg differ
diff --git a/19_BAYCHTML&CSS/img/bayc-footer.webp b/19_BAYCHTML&CSS/img/bayc-footer.webp
new file mode 100644
index 0000000..b729325
Binary files /dev/null and b/19_BAYCHTML&CSS/img/bayc-footer.webp differ
diff --git a/19_BAYCHTML&CSS/img/bayc-logo.webp b/19_BAYCHTML&CSS/img/bayc-logo.webp
new file mode 100644
index 0000000..84aeed1
Binary files /dev/null and b/19_BAYCHTML&CSS/img/bayc-logo.webp differ
diff --git a/19_BAYCHTML&CSS/img/discord.png b/19_BAYCHTML&CSS/img/discord.png
new file mode 100644
index 0000000..b14c0ac
Binary files /dev/null and b/19_BAYCHTML&CSS/img/discord.png differ
diff --git a/19_BAYCHTML&CSS/img/icon.png b/19_BAYCHTML&CSS/img/icon.png
new file mode 100644
index 0000000..b8326cd
Binary files /dev/null and b/19_BAYCHTML&CSS/img/icon.png differ
diff --git a/19_BAYCHTML&CSS/img/instagram.png b/19_BAYCHTML&CSS/img/instagram.png
new file mode 100644
index 0000000..f9a289a
Binary files /dev/null and b/19_BAYCHTML&CSS/img/instagram.png differ
diff --git a/19_BAYCHTML&CSS/img/twitter.png b/19_BAYCHTML&CSS/img/twitter.png
new file mode 100644
index 0000000..5284deb
Binary files /dev/null and b/19_BAYCHTML&CSS/img/twitter.png differ
diff --git a/19_BAYCHTML&CSS/img/youtube.png b/19_BAYCHTML&CSS/img/youtube.png
new file mode 100644
index 0000000..e82e782
Binary files /dev/null and b/19_BAYCHTML&CSS/img/youtube.png differ
diff --git a/19_BAYCHTML&CSS/index.html b/19_BAYCHTML&CSS/index.html
new file mode 100644
index 0000000..c1a3768
--- /dev/null
+++ b/19_BAYCHTML&CSS/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="./img/icon.png">
+    <link rel="stylesheet" href="./css/index.css">
+    <title>BAYC</title>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <div class="header">
+        <img src="./img/bayc-logo.webp" alt="bayc-logo">
+        <div class="socialMedia">
+            <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
+                <img src="./img/youtube.png" alt="youtube">
+            </a>
+            <a href="https://boredapeyachtclub.com/#/">
+                <img src="./img/instagram.png" alt="instagram">
+            </a>
+            <a href="https://discord.com/invite/3P5K3dzgdB">
+                <img src="./img/discord.png" alt="discord">
+            </a>
+            <a href="https://twitter.com/BoredApeYC">
+                <img src="./img//twitter.png" alt="twitter">
+            </a>
+        </div>
+    </div>
+    <div class="body">
+        <div class="welcome">
+            <video autoplay loop>
+                <source src="https://ik.imagekit.io/bayc/assets/club-landing.mp4" type="video/mp4">
+            </video>
+            <div class="mint">
+                <h1>
+                    WELCOME TO <br />THE BORED APE<br /> YACHT CLUB
+                </h1>
+                <button>Mint</button>
+            </div>
+        </div>
+        <div class="description">A limited NFT collection where the token itself doubles as your membership to a
+            swamp club for apes. The club is open! Ape in with us.
+        </div>
+    </div>
+    <div class="footer">
+        <div class="line"></div>
+        <div class="info">
+            <div class="email">
+                <div class="get-on-the-list">GET ON THE LIST</div>
+                <div class="getEmail">
+                    <input type="email" placeholder="Email Address" required value>
+                    <button type="submit">➡</button>
+                </div>
+            </div>
+            <img src="./img/bayc-footer.webp" alt="bayc-footer">
+            <div class="others">
+                <div class="right">
+                    <div class="socialMedia">
+                        <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
+                            <img src="./img/youtube.png" alt="youtube">
+                        </a>
+                        <a href="https://boredapeyachtclub.com/#/">
+                            <img src="./img/instagram.png" alt="instagram">
+                        </a>
+                        <a href="https://discord.com/invite/3P5K3dzgdB">
+                            <img src="./img/discord.png" alt="discord">
+                        </a>
+                        <a href="https://twitter.com/BoredApeYC">
+                            <img src="./img//twitter.png" alt="twitter">
+                        </a>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="copyright">
+                        © 2021 Yuga Labs LLC
+                    </div>
+                </div>
+                <div class="right a-wrapper">
+                    <a href="https://boredapeyachtclub.com/#/terms">BAYC Terms & Conditions</a>
+                </div>
+                <div class="right a-wrapper">
+                    <a href="https://boredapeyachtclub.com/#/mayc/terms">MAYC Terms & Conditions</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/19_BAYCHTML&CSS/readme.md b/19_BAYCHTML&CSS/readme.md
new file mode 100644
index 0000000..e2a4390
--- /dev/null
+++ b/19_BAYCHTML&CSS/readme.md
@@ -0,0 +1,289 @@
+# WTF CSS极简教程: 19.BAYCHTML&CSS
+
+WTF CSS教程，总结/搬运自[MDN CSS教程](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)，帮助新人快速入门CSS。
+
+**推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
+
+**WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.wtf.academy) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
+
+所有代码和教程开源在github: [github.com/WTFAcademy/WTF-CSS](https://github.com/WTFAcademy/WTF-CSS)
+
+---
+
+这一讲，我们将使用预处理器less编写一个极简BAYC mint页面样式表，制作所需要的HTML和img文件已经准备好了。最终效果如下：
+
+![总体效果](./img/19-1.png)
+
+## 通用样式设置
+
+BAYC官网的背景是黑色的，所有的字体都是白色的，因此我们可以通过通用样式去调整。
+
+```css
+body {
+    background-color: black;
+}
+
+* {
+
+    color: white;
+}
+
+```
+
+右下角这部分的内容都靠右，我们可以设置一个`right`类的通用样式，然后在需要的元素上添加即可。
+
+```css
+.right {
+    display: flex;
+    justify-content: flex-end;
+}
+```
+
+## `class="header"`
+
+然后我们处理头部的样式，BAYC官网头部的样式是这样的：
+
+![头部样式](./img/19-2.jpg)
+
+头部的内容比较少，我们可以用定位来解决，方法与上一讲[UniswapHTML&CSS](https://github.com/AmazingAng/WTF-CSS/tree/main/18_UniswapHTML%26CSS)类似，这里就不再赘述。不要忘记修改`bayc-logo`的`z-index`>=1，这样才能让它处于`video`的上方。
+
+```css
+.header {
+    &>img {
+        position: relative;
+        left: 50%;
+        margin-left: -150px;
+        padding-top: 24px;
+        margin-bottom: -40px;
+        width: 300px;
+        z-index: 1;
+    }
+
+    & a {
+        text-decoration: none;
+
+        &>img {
+            margin-left: 10px;
+            height: 16px;
+        }
+    }
+
+    &>.socialMedia {
+        position: absolute;
+        top: 50px;
+        right: 50%;
+        margin-right: -550px;
+    }
+}
+```
+
+## `class="body"`
+
+然后我们处理中间内容的样式。
+
+首先是面积最大的`welcome`部分，我们通过调整它的`width`、`position`、`left`、`margin-left`让它水平居中。
+
+```css
+.body {
+    &>.welcome {
+        width: 1140px;
+        position: relative;
+        left: 50%;
+        margin-left: -570px;
+    }
+}
+```
+
+子元素`video`的宽度调整为`100%`使其撑满父元素。
+
+```css
+& video {
+            width: 100%;
+        }
+```
+
+子元素`mint`的`position`调整为`absolute`就可以让它覆盖在`video`的上方，然后再调整它的`bottom`属性使其位于`video`的左下角。
+
+```css
+&>.mint {
+            background-color: black;
+            position: absolute;
+            bottom: 0px;
+            width: 380px;
+            height: 215px;
+        }
+```
+
+`mint`里的欢迎词样式比较简单，它之所以排了三行是因为它的HTML里有两个`<br/>`。
+
+```css
+            &>h1 {
+                width: 285px;
+                height: 98px;
+                font-size: 27px;
+            }
+```
+
+mint按钮鼠标悬浮上去之后会有一个缓慢变色的效果，可以给它加一个`transition`。
+
+```css
+            &>button {
+                width: 285px;
+                height: 52px;
+                font-size: 16px;
+                color: black;
+                background-color: #bfc500;
+                border-radius: 10px;
+
+                &:hover {
+                    background-color: white;
+                    transition: 0.5s;
+                }
+            }
+```
+
+接着`video`下面的`description`用同样的方法使它居中，再调整它的`margin-top`和`margin-bottom`让它与上下元素分离。
+
+```css
+&>.description {
+        position: relative;
+        left: 50%;
+        margin-left: -570px;
+        width: 700px;
+        height: 48px;
+        margin-top: 40px;
+        margin-bottom: 60px;
+}
+```
+
+到此`body`里的关键点就讲完了，效果如下：
+
+![中间效果](./img/19-3.jpg)
+
+## `class="footer"`
+
+最后是尾部的样式。
+
+首先是一个分割线，这里千万不要傻傻地在`div`中输入一大串的`———`。我们通过调整它的宽高让整个元素变成一条线，再调整`margin`为`0 auto`使其居中，最后让它的`background-color`为`white`，就画出了一条分割线。
+
+```css
+.footer {
+    &>.line {
+        margin: 0 auto;
+        width: 93%;
+        height: 2px;
+        background-color: white;
+    }
+}
+```
+
+然后是`info`中三个子元素的排列。我们让左右元素的宽度相同，再使用`flex`布局就可以让三个子元素均匀排列在同一水平线上。
+
+```css
+&>.info {
+        display: flex;
+        justify-content: space-between;
+        width: 90%;
+        height: 240px;
+        margin: 30px 96px;
+
+        &>.email {
+            width: 530px;
+            height: 62px;
+            margin: 69px 0;
+            padding: 0 15px;
+        }
+
+        &>img {
+            width: 200px;
+            height: 200px;
+        }
+
+        &>.others {
+            width: 560px;
+            height: 184px;
+            padding: 20px 0;
+
+        }
+    }
+```
+
+之后是`email`中子元素的样式，这一部分比较简单，其中我们用`position`、`top`和`left`来微调`button`的位置。
+
+```css
+            &>.get-on-the-list {
+                font-size: 13px;
+            }
+
+            &>.getEmail {
+                width: 530px;
+                height: 28px;
+                padding-top: 10px;
+
+                &>input {
+                    width: 376px;
+                    height: 24px;
+                    padding: 2px 2px 2px 10px;
+                    box-sizing: border-box;
+                    background-color: #272626;
+                    color: white;
+                    border: none;
+                }
+
+                &>button {
+                    width: 36px;
+                    height: 24px;
+                    background-color: #4b4a4a;
+                    position: relative;
+                    top: 1px;
+                    left: -5px;
+                    border: none;
+                }
+            }
+```
+
+最后是右下角的样式，这部分也比较简单。其中`socialMedia`的样式与前面是一样的，可以直接复制粘贴过来，也可以两处都不写而是在样式表最前面单独给它写一个样式。
+
+```css
+            & .socialMedia {
+                margin: 28px 0;
+
+                &>a {
+                    text-decoration: none;
+
+                    &>img {
+                        margin-left: 10px;
+                        height: 16px;
+                    }
+                }
+            }
+
+            & .copyright {
+                height: 24px;
+                font-size: 12px;
+            }
+
+            &>.a-wrapper {
+                height: 26px;
+
+                &>a {
+                    color: yellowgreen;
+                    font-size: 12px;
+                }
+            }
+```
+
+
+同时我们给`other`的四个子元素都增加了一个提前写好的`right`类名，这样它子元素里的内容就会靠右。
+
+![right类名](./img/19-4.jpg)
+
+至此，BAYC极简页面就完成了，效果如下：
+
+![总体效果](./img/19-1.png)
+
+可以看到，我们做的极简页面和官方页面是非常相似的。但目前该页面还没有任何功能，这需要我们后续继续给它加上JS。
+
+## 总结
+
+这一讲我们用预处理器less编写了一个BAYC极简页面样式表，做出的效果与官方页面十分相似。学员们自己练习时不必写的与本教程一模一样，只要能达到预期效果即可。