webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update css 02

Browse Source
This commit is contained in:
qianguyihao 2018-01-10 22:01:18 +08:00
parent 7ce3cb81a8
commit 06dc274003
5 changed files with 95 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
00-前端工具/01-Sublime Text在前端中的使用.md
View File

@ -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)
我自己整理的。

19
01-html/02-html标签图文详解（二）.md
View File

@ -1,5 +1,4 @@
> 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。 > 以下是正文。
@ -107,7 +106,7 @@
例如： 例如：
```html ```html
<ol > <ol >
<li>呵呵哒1</li> <li>呵呵哒1</li>
<li>呵呵哒2</li> <li>呵呵哒2</li>
<li>呵呵哒3</li> <li>呵呵哒3</li>
@ -124,25 +123,25 @@
举例： 举例：
```html ```html
<ol type="1"> <ol type="1">
<li>呵呵</li> <li>呵呵</li>
<li>呵呵</li> <li>呵呵</li>
<li>呵呵</li> <li>呵呵</li>
</ol> </ol>
<ol type="a"> <ol type="a">
<li>嘿嘿</li> <li>嘿嘿</li>
<li>嘿嘿</li> <li>嘿嘿</li>
<li>呵呵</li> <li>呵呵</li>
</ol> </ol>
<ol type="i" start="4"> <ol type="i" start="4">
<li>哈哈</li> <li>哈哈</li>
<li>哈哈</li> <li>哈哈</li>
<li>哈哈</li> <li>哈哈</li>
</ol> </ol>
<ol type="I" start="10"> <ol type="I" start="10">
<li>么么</li> <li>么么</li>
<li>么么</li> <li>么么</li>
<li>么么</li> <li>么么</li>
@ -503,7 +502,7 @@ int leixing de bianliang guocheng shi yizhon
- `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。 - `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。
颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
- `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。 - `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
- `name`：给框架起一个名字。 - `name`：给框架起一个名字。
利用`name`这个属性，我们可以在框架里进行超链。 利用`name`这个属性，我们可以在框架里进行超链。
@ -633,7 +632,7 @@ POST方式：
昵称：<input value="哈哈" readonly=""><br> 昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br> 名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><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="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭 爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="sleep">睡觉
@ -769,7 +768,7 @@ text就是“文本”，area就是“区域”。
<fieldset> <fieldset>
<legend>其他信息</legend> <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="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭 爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="sleep">睡觉
@ -816,7 +815,7 @@ text就是“文本”，area就是“区域”。
```html ```html
<input type="checkbox" id="kk" /> <input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label> <label for="kk">10天内免登陆</label>
``` ```

132
02-CSS/02-CSS属性.md
View File

@ -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 - 鼠标的属性cursor
- 滤镜的介绍 - 滤镜的介绍
## CSS的单位 ## CSS的单位
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font> <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 - `in`：英寸Inches (1 英寸 = 2.54 厘米)
`mm`：毫米Millimeters - `cm`：厘米Centimeters
`pt`：点Points，或者叫英镑 (1点 = 1/72英寸) - `mm`：毫米Millimeters
`pc`：皮卡Picas (1 皮卡 = 12 点) - `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
- `pc`：皮卡Picas (1 皮卡 = 12 点)
- **相对单位：** - **相对单位：**
`px`：像素 `px`：像素
`em`：印刷单位相当于12个点 `em`：印刷单位相当于12个点
`%`：百分比，相对周围的文字的大小 `%`：百分比，相对周围的文字的大小
@ -43,6 +47,7 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
## 字体属性 ## 字体属性
css样式中，常见的字体属性有以下几种： css样式中，常见的字体属性有以下几种：
```html ```html
p{ p{
font-size:50px; /*字体大小*/ font-size:50px; /*字体大小*/
@ -52,17 +57,19 @@ p{
font-variant:small-caps; /*小写变大写*/ font-variant:small-caps; /*小写变大写*/
} }
``` ```
另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。 另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。
## 文本属性 ## 文本属性
CSS样式中，常见的文本属性有以下几种： CSS样式中，常见的文本属性有以下几种：
- `letter-spacing:0.5cm ;` 单个字母之间的间距 - `letter-spacing:0.5cm ;` 单个字母之间的间距
- `word-spacing:1cm;` 单词之间的间距 - `word-spacing:1cm;` 单词之间的间距
- `text-decoration:overline;` 字体修饰：underline下划线、line-through中划线、overline上划线 - `text-decoration:underline;` 字体修饰：**underline下划线**、line-through中划线、overline上划线
- `text-transform:lowercase;` 单词字体大小写。uppercase大写、lowercase小写 - `text-transform:lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色 - `color:red;` 字体颜色
- `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify - `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
- `text-transform:lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写） - `text-transform:lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
这里来一张表格的图片吧，一览无遗： 这里来一张表格的图片吧，一览无遗：
@ -73,15 +80,6 @@ CSS样式中，常见的文本属性有以下几种：
CSS样式中，常见的背景属性有以下几种：（经常用到，要记住） CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
现在，我们把上面的比较重要的属性挑选出来，如下：
- `background-color:#ff99ff;` 设置元素的背景颜色。 - `background-color:#ff99ff;` 设置元素的背景颜色。
- `background-image:url(images/2.gif);` 将图像设置为背景。 - `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) ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-21.png)
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。 其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
（4）属性值为`repeat-y`（纵向平铺）时： （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、用单词描述属性值：** **2、用单词描述属性值：**
@ -172,11 +174,12 @@ PS：padding的区域也是有背景图的。
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的： 打开“暗黑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>。背景图如下： 检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
20170812_1950.jpg ![](http://img.smyhvae.com/20170812_1950.jpg)
实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可： 实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
@ -194,7 +197,10 @@ PS：padding的区域也是有背景图的。
很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示： 很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
20170813_1102.gif ![](http://img.smyhvae.com/20170813_1102.gif)
正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下： 正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
@ -207,12 +213,11 @@ PS：padding的区域也是有背景图的。
} }
``` ```
上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会霸占整行）。效果如下： 上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（让宽度自动霸占整行即可）。效果如下：
20170813_1119.gif ![](http://img.smyhvae.com/20170813_1119.gif)
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向）。
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
### background-attachment属性 ### background-attachment属性
@ -221,11 +226,9 @@ PS：padding的区域也是有背景图的。
- `fixed`（背景就会被固定住，不会被滚动条滚走）。 - `fixed`（背景就会被固定住，不会被滚动条滚走）。
- `scroll`（与fixed属性相反，默认属性） - `scroll`（与fixed属性相反，默认属性）
`background-attachment:fixed;`的效果如下： `background-attachment:fixed;`的效果如下：
20170813_1158.gif ![](http://img.smyhvae.com/20170813_1158.gif)
### background综合属性 ### background综合属性
@ -347,7 +350,7 @@ IE盒子模型：
</style> </style>
</head> </head>
<body> <body>
<div>有生之年</div> <div>有生之年</div>
@ -358,6 +361,7 @@ IE盒子模型：
</html> </html>
``` ```
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下： 上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png) ![](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的属性值可以是absolute、relative。
position定位分为绝对定位和相对定位： position定位分为绝对定位和相对定位：
- `position:absolute;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。 - `position:absolute;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
@ -433,7 +438,7 @@ position定位分为绝对定位和相对定位：
width: 200px; width: 200px;
height: 200px; height: 200px;
border: 1px solid red; border: 1px solid red;
} }
</style> </style>
</head> </head>
@ -477,10 +482,11 @@ position定位分为绝对定位和相对定位：
### 4、overflow属性：超出范围的内容要怎么处理 ### 4、overflow属性：超出范围的内容要怎么处理
`overflow`属性的属性值可以是： `overflow`属性的属性值可以是：
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。 - `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 - `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。 - `hidden`：不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。 对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
- `scroll`：总是显示滚动条。 - `scroll`：总是显示滚动条。
针对上面的不同的属性值，我们来看一下效果： 针对上面的不同的属性值，我们来看一下效果：
@ -533,6 +539,7 @@ position定位分为绝对定位和相对定位：
``` ```
效果： 效果：
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png) ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png)
@ -554,11 +561,13 @@ position定位分为绝对定位和相对定位：
## 鼠标的属性cursor ## 鼠标的属性cursor
鼠标的属性`cursor`有以下几个属性值： 鼠标的属性`cursor`有以下几个属性值：
- `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下： 比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
```html ```html
p:hover{ p:hover{
cursor: pointer; cursor: pointer;
@ -566,23 +575,24 @@ p:hover{
``` ```
另外还有以下的属性：（不用记，需要的时候查一下就行了） 另外还有以下的属性：（不用记，需要的时候查一下就行了）
all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 - all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
crosshair :　 简单的十字线光标。 - col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
default :　 客户端平台的默认光标。通常是一个箭头。 - crosshair :　 简单的十字线光标。
hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 - default :　 客户端平台的默认光标。通常是一个箭头。
move :　 十字箭头光标。用于标示对象可被移动。 - hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
help :　 带有问号标记的箭头。用于标示有帮助信息存在。 - move :　 十字箭头光标。用于标示对象可被移动。
no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 - help :　 带有问号标记的箭头。用于标示有帮助信息存在。
not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 - no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 - not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 - progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。 - row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 - text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 - vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
*-resize :　 用于标示对象可被改变尺寸方向的箭头光标。 - wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize - *-resize :　 用于标示对象可被改变尺寸方向的箭头光标。
url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 - 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浮动属性来把无序列表做成一个简单的导航栏吧，效果如下： 现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
@ -641,7 +651,7 @@ url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url
<meta name="Keywords" content=""> <meta name="Keywords" content="">
<meta name="Description" content=""> <meta name="Description" content="">
<title>Document</title> <title>Document</title>
<style type="text/css"> <style type="text/css">
ul{ ul{
list-style: none;/*去掉列表前面的圆点*/ list-style: none;/*去掉列表前面的圆点*/

2
README.md
View File

@ -1,6 +1,6 @@
从零开始学前端，做一个web全栈工程师。持续更新... 前端入门和进阶教程。从零开始学前端，做一个web全栈工程师。持续更新...
## HTML ## HTML

9
推荐链接.md
View File

@ -37,4 +37,11 @@
- [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/) - [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
- [不管做什么，和对的人在一起最重要]()
### 2018-01-10
- [MAC全栈开发环境搭建指南](https://mac.aotu.io/)
今天发现这个网址，感觉还不错。在里面发现了一个比较好的Sublime Text主题。