diff --git a/00-前端工具/01-Sublime Text在前端中的使用.md b/00-前端工具/01-Sublime Text在前端中的使用.md
index 97e3cc3..bb0ed3d 100644
--- a/00-前端工具/01-Sublime Text在前端中的使用.md	
+++ b/00-前端工具/01-Sublime Text在前端中的使用.md	
@@ -44,6 +44,12 @@
 
 
 
+## 推荐阅读
+
+
+- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
+
+我自己整理的。
 
 
 
diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md
index 31270e3..63516bb 100644
--- a/01-html/02-html标签图文详解（二）.md
+++ b/01-html/02-html标签图文详解（二）.md
@@ -1,5 +1,4 @@
 
-
 > 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
 
 > 以下是正文。
@@ -107,7 +106,7 @@
 例如：
 
 ```html
-<ol >	
+<ol >
 	<li>呵呵哒1</li>
 	<li>呵呵哒2</li>
 	<li>呵呵哒3</li>
@@ -124,25 +123,25 @@
 举例：
 
 ```html
-<ol type="1">	
+<ol type="1">
 	<li>呵呵</li>
 	<li>呵呵</li>
 	<li>呵呵</li>
 </ol>
 
-<ol type="a">	
+<ol type="a">
 	<li>嘿嘿</li>
 	<li>嘿嘿</li>
 	<li>呵呵</li>
 </ol>
 
-<ol type="i" start="4">	
+<ol type="i" start="4">
 	<li>哈哈</li>
 	<li>哈哈</li>
 	<li>哈哈</li>
 </ol>
 
-<ol type="I" start="10">	
+<ol type="I" start="10">
 	<li>么么</li>
 	<li>么么</li>
 	<li>么么</li>
@@ -503,7 +502,7 @@ int leixing de bianliang guocheng shi yizhon
 
  - `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。
 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
- - `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。 
+ - `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
 
  - `name`：给框架起一个名字。
 利用`name`这个属性，我们可以在框架里进行超链。
@@ -633,7 +632,7 @@ POST方式：
 		昵称：<input value="哈哈" readonly=""><br>
 		名字：<input type="text" value="name" disabled=""><br>
 		密码：<input type="password" value="pwd" size="50"><br>
-		性别：<input type="radio" name="gender" value="male" checked="">男 
+		性别：<input type="radio" name="gender" value="male" checked="">男
 			  <input type="radio" name="gender" value="female" >女<br>
 		爱好：<input type="checkbox" name="love" value="eat">吃饭
 			  <input type="checkbox" name="love" value="sleep">睡觉
@@ -769,7 +768,7 @@ text就是“文本”，area就是“区域”。
 
 		<fieldset>
 		<legend>其他信息</legend>
-		性别：<input type="radio" name="gender" value="male" checked="">男 
+		性别：<input type="radio" name="gender" value="male" checked="">男
 			  <input type="radio" name="gender" value="female" >女<br>
 		爱好：<input type="checkbox" name="love" value="eat">吃饭
 			  <input type="checkbox" name="love" value="sleep">睡觉
@@ -816,7 +815,7 @@ text就是“文本”，area就是“区域”。
 
 ```html
 <input type="checkbox" id="kk" />
-<label for="kk">10天内免登陆</label>  
+<label for="kk">10天内免登陆</label>
 ```
 
 
diff --git a/02-CSS/02-CSS属性.md b/02-CSS/02-CSS属性.md
index 148e397..b37e18b 100644
--- a/02-CSS/02-CSS属性.md
+++ b/02-CSS/02-CSS属性.md
@@ -1,8 +1,7 @@
 
-> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
-
-
+> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
 
+> 以下是正文。
 
 ## 主要内容
 
@@ -12,24 +11,29 @@
  - 背景属性
  - 列表属性
  - 盒子模型
- - 定位属性：position、float、overflow、z-index等
+ - 定位属性：position、float、overflow等
  - 鼠标的属性cursor
  - 滤镜的介绍
-	
+
 ## CSS的单位
 
 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
 <font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
- - **绝对单位：**1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
+
+ - **绝对单位：**
+
+ 1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
+
 各种单位的含义：
-`in`：英寸Inches (1 英寸 = 2.54 厘米)
-`cm`：厘米Centimeters
-`mm`：毫米Millimeters
-`pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
-`pc`：皮卡Picas (1 皮卡 = 12 点)
+
+- `in`：英寸Inches (1 英寸 = 2.54 厘米)
+- `cm`：厘米Centimeters
+- `mm`：毫米Millimeters
+- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+- `pc`：皮卡Picas (1 皮卡 = 12 点)
 
  - **相对单位：**
-`px`：像素 
+`px`：像素
 `em`：印刷单位相当于12个点
 `%`：百分比，相对周围的文字的大小
 
@@ -43,6 +47,7 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
 ## 字体属性
 
 css样式中，常见的字体属性有以下几种：
+
 ```html
 p{
 	font-size:50px; 		/*字体大小*/
@@ -52,17 +57,19 @@ p{
 	font-variant:small-caps;  /*小写变大写*/
 }
 ```
+
 另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。
 
 ## 文本属性
 
 CSS样式中，常见的文本属性有以下几种：
+
  - `letter-spacing:0.5cm ;`  单个字母之间的间距
  - `word-spacing:1cm;`   单词之间的间距
- - `text-decoration:overline;` 字体修饰：underline下划线、line-through中划线、overline上划线
+ - `text-decoration:underline;` 字体修饰：**underline下划线**、line-through中划线、overline上划线
  - `text-transform:lowercase;`  单词字体大小写。uppercase大写、lowercase小写
- - `color:red;` 字体颜色 
- - `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify 
+ - `color:red;` 字体颜色
+ - `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
  - `text-transform:lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
 
 这里来一张表格的图片吧，一览无遗：
@@ -73,15 +80,6 @@ CSS样式中，常见的文本属性有以下几种：
 
 CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
 
-
-
-
-
-
-
-
-现在，我们把上面的比较重要的属性挑选出来，如下：
-
 - `background-color:#ff99ff;`  设置元素的背景颜色。
 
 - `background-image:url(images/2.gif);` 将图像设置为背景。
@@ -122,7 +120,9 @@ PS：padding的区域也是有背景图的。
 
 ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-21.png)
 
-其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。
+其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
+
+在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
 
 （4）属性值为`repeat-y`（纵向平铺）时：
 
@@ -148,9 +148,11 @@ PS：padding的区域也是有背景图的。
 
 举例如下：
 
-20170812_1643.png
+![](http://img.smyhvae.com/20170812_1643.png)
+
+
+![](http://img.smyhvae.com/20170812_1645.png)
 
-20170812_1645.png
 
 
 **2、用单词描述属性值：**
@@ -172,11 +174,12 @@ PS：padding的区域也是有背景图的。
 
 打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
 
-20170812_1945.png
+![](http://img.smyhvae.com/20170812_1945.jpg)
+
 
 检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
 
-20170812_1950.jpg
+![](http://img.smyhvae.com/20170812_1950.jpg)
 
 实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
 
@@ -194,7 +197,10 @@ PS：padding的区域也是有背景图的。
 
 很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
 
-20170813_1102.gif
+![](http://img.smyhvae.com/20170813_1102.gif)
+
+
+
 
 正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
 
@@ -207,12 +213,11 @@ PS：padding的区域也是有背景图的。
         }
 ```
 
-上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会霸占整行）。效果如下：
+上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（让宽度自动霸占整行即可）。效果如下：
 
-20170813_1119.gif
-
-上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向）。
+![](http://img.smyhvae.com/20170813_1119.gif)
 
+上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
 
 
 ### background-attachment属性
@@ -221,11 +226,9 @@ PS：padding的区域也是有背景图的。
 	- `fixed`（背景就会被固定住，不会被滚动条滚走）。
 	- `scroll`（与fixed属性相反，默认属性）
 
-
 `background-attachment:fixed;`的效果如下：
 
-20170813_1158.gif
-
+![](http://img.smyhvae.com/20170813_1158.gif)
 
 
 ### background综合属性
@@ -347,7 +350,7 @@ IE盒子模型：
 	</style>
 
  </head>
- 
+
  <body>
 
 	<div>有生之年</div>
@@ -358,6 +361,7 @@ IE盒子模型：
 </html>
 
 ```
+
 上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
 
 ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png)
@@ -384,6 +388,7 @@ padding:20 30 40 50;
 定位属性position的属性值可以是absolute、relative。
 
 position定位分为绝对定位和相对定位：
+
  - `position:absolute;`  <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
 
 
@@ -433,7 +438,7 @@ position定位分为绝对定位和相对定位：
 
 			width: 200px;
 			height: 200px;
-			border: 1px solid red;	
+			border: 1px solid red;
 		}
 	</style>
  </head>
@@ -477,10 +482,11 @@ position定位分为绝对定位和相对定位：
 ### 4、overflow属性：超出范围的内容要怎么处理
 
 `overflow`属性的属性值可以是：
+
  - `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
  - `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
  - `hidden`：不显示超过对象尺寸的内容。
-对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。 
+对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
  - `scroll`：总是显示滚动条。
 
 针对上面的不同的属性值，我们来看一下效果：
@@ -533,6 +539,7 @@ position定位分为绝对定位和相对定位：
 ```
 
 效果：
+
 ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png)
 
 
@@ -554,11 +561,13 @@ position定位分为绝对定位和相对定位：
 ## 鼠标的属性cursor
 
 鼠标的属性`cursor`有以下几个属性值：
- - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。 
- - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 
+
+ - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
+ - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
  - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
 
 比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
+
 ```html
 p:hover{
 	cursor: pointer;
@@ -566,23 +575,24 @@ p:hover{
 ```
 
 另外还有以下的属性：（不用记，需要的时候查一下就行了）
-all-scroll      :　 IE6.0  有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 
-col-resize      :　 IE6.0  有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 
-crosshair       :　  简单的十字线光标。 
-default         :　  客户端平台的默认光标。通常是一个箭头。 
-hand            :　  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 
-move            :　  十字箭头光标。用于标示对象可被移动。 
-help            :　  带有问号标记的箭头。用于标示有帮助信息存在。 
-no-drop         :　 IE6.0  带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 
-not-allowed     :　 IE6.0  禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 
-progress        :　 IE6.0  带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 
-row-resize      :　 IE6.0  有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 
-text            :　  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。 
-vertical-text   :　 IE6.0  用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 
-wait            :　  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 
-*-resize        :　  用于标示对象可被改变尺寸方向的箭头光标。
-                     w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize 
-url ( url )     :　 IE6.0  用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 
+
+- all-scroll      :　 IE6.0  有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
+- col-resize      :　 IE6.0  有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
+- crosshair       :　  简单的十字线光标。
+- default         :　  客户端平台的默认光标。通常是一个箭头。
+- hand            :　  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+- move            :　  十字箭头光标。用于标示对象可被移动。
+- help            :　  带有问号标记的箭头。用于标示有帮助信息存在。
+- no-drop         :　 IE6.0  带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
+- not-allowed     :　 IE6.0  禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
+- progress        :　 IE6.0  带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
+- row-resize      :　 IE6.0  有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
+- text            :　  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
+- vertical-text   :　 IE6.0  用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
+- wait            :　  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
+- *-resize        :　  用于标示对象可被改变尺寸方向的箭头光标。
+-                      w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
+- url ( url )     :　 IE6.0  用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
 
 ## 滤镜
 
@@ -623,7 +633,7 @@ url ( url )     :　 IE6.0  用户自定义光标。使用绝对或相对 url 
 
 
 
-## 导航栏的制作（本段内容忽略）
+## 导航栏的制作（本段内容请忽略）
 
 现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
 
@@ -641,7 +651,7 @@ url ( url )     :　 IE6.0  用户自定义光标。使用绝对或相对 url 
   <meta name="Keywords" content="">
   <meta name="Description" content="">
   <title>Document</title>
-  
+
 	<style type="text/css">
 		ul{
 			list-style: none;/*去掉列表前面的圆点*/
diff --git a/README.md b/README.md
index 4fc5007..d9dea9f 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 
 
-从零开始学前端，做一个web全栈工程师。持续更新...
+前端入门和进阶教程。从零开始学前端，做一个web全栈工程师。持续更新...
 
 ## HTML
 
diff --git a/推荐链接.md b/推荐链接.md
index 0107535..0a850b7 100644
--- a/推荐链接.md
+++ b/推荐链接.md
@@ -37,4 +37,11 @@
 
 - [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
 
-- [不管做什么，和对的人在一起最重要]()
\ No newline at end of file
+
+
+### 2018-01-10
+
+- [MAC全栈开发环境搭建指南](https://mac.aotu.io/)
+
+今天发现这个网址，感觉还不错。在里面发现了一个比较好的Sublime Text主题。
+