add file：CSS基础练习：JD首页的制作（顶部和底部）

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

@@ -55,7 +55,7 @@
 
 - [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
 
-在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomplete](https://github.com/alienhard/SublimeAllAutocomplete)
+在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
 
 
 ### JS代码格式化：JsFormat
@@ -67,6 +67,33 @@
 
 
 
+### 代码快速生成
+
+
+（1）`>`符号的技巧：
+
+
+输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
+
+```html
+        <div>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+        </div>
+    </div>
+```
+
+
+
+
+
 
 ## sublime text 快捷键
 

00-前端工具/WebStorm的使用.md

@@ -0,0 +1,183 @@
+
+
+
+## WebStorm的简单设置
+
+#### 1、主题修改
+
+可能大家会觉得软件的界面不太好看，我们可以换一下主题。选择菜单栏“File--settings--apperance--theme”，主题选择Darcula：
+
+![](http://img.smyhvae.com/20180118_1600.png)
+
+#### 2、导入第三方主题
+
+系统提供的两种主题可能都不太好看，我们可以进入网站<http://color-themes.com/>来获取第三方主题，这里推荐两个主题，大家二选一即可：
+
+- [Sublime](https://github.com/y3sh/Intellij-Colors-Sublime-Monokai)
+
+- [Material](https://github.com/ChrisRM/material-theme-jetbrains)
+
+![](http://img.smyhvae.com/20180118_1636.png)
+
+![](http://img.smyhvae.com/20180118_1637.png)
+
+上图中，在网站<http://color-themes.com/>中将主题下载之后，是一个jar包。那怎么导入到WebStorm呢？
+
+别着急，回到WebStorm，选择菜单栏“ File-Import Settings”，将下载好的jar包导入即可。
+
+
+
+#### 3、代码字体修改
+
+选择菜单栏“File--settings--Editor--Font”：
+
+![](http://img.smyhvae.com/20180118_1627.png)
+
+上图中，点击红框部分，然后弹出如下界面：
+
+![](http://img.smyhvae.com/20180118_1628.png)
+
+我们在上图中修改代码的字体。
+
+修改完之后发现 WebStorm 的一些默认字体（比如侧边栏的工程目录的字体）并没有发生变化，如果想改的话，也可以改（我个人一般是不改的）。
+
+
+
+#### 4、关闭更新
+
+如下图所示：
+
+![](http://img.smyhvae.com/20180118_1646.png)
+
+#### 5、快捷键习惯的修改
+
+
+
+
+#### 7、配置代码的自动提示
+
+
+### 新建一个空的项目
+
+配置完成后，可以开始新建一个项目文件夹（站点），项目通常包含如下内容：
+
+- 首页：index.html
+
+- 样式：css文件夹
+	- index.css
+	- 相同样式：全局样式、公共样式。起名为：base.css（基本样式）或者 global.css (全局样式)
+
+- 图片：images文件夹、文件
+
+- 特效：js文件夹、js文件
+
+**步骤如下：**
+
+新建一个空的项目：
+![](http://img.smyhvae.com/20180118_1720.png)
+
+然后新建一个html文件：
+
+![](http://img.smyhvae.com/20180118_1602.png)
+
+新建一个空的文件夹，命名为`css`：
+
+![](http://img.smyhvae.com/20180118_1725.png)
+
+然后在这个css文件夹中，新建样式表：（比如index.css\base.css）
+
+![](http://img.smyhvae.com/20180118_1730.png)
+
+最后新建一个images文件夹，用于存放土片。这样的话，一个基本的项目结构就搭建好了：
+
+![](http://img.smyhvae.com/20180118_1733.png)
+
+接下来，开始运用起你们的前端知识吧。
+
+
+
+## 使用技巧
+
+
+
+#### 多光标编辑
+
+我们可以按住鼠标不松手，选中多个光标，然后同时编辑：
+
+
+#### 随时在浏览器中看代码效果
+
+20180118_1658.png
+
+如上图所示，我们可以点击右上角的浏览器图标，在各个浏览器中看效果。
+
+
+#### 实时查看颜色
+
+写代码时如果想输入颜色，会自动提示颜色的预览。
+
+![](http://img.smyhvae.com/20180118_1702.png)
+
+点击最左侧的颜色预览，还能弹出调色板：
+
+![](http://img.smyhvae.com/20180118_1710.gif)
+
+
+
+
+
+
+## tab键的代码补齐
+
+
+（1）在html文档中，输入`div*10`，弹出的效果如下：
+
+```html
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+```
+
+
+
+（2）在html文档中，输入如下部分：
+
+```
+.search-logo+.search-input+.search-car+.search-moreA
+```
+
+按tab键后，弹出的效果如下：
+
+```html
+        <div class="search-logo"></div>
+        <div class="search-input"></div>
+        <div class="search-car"></div>
+        <div class="search-moreA"></div>
+```
+
+你看，京东的搜索框就包含了这几个div：
+
+20180122_1045.png
+
+
+
+## 常用快捷键
+
+#### 标签环绕
+
+输入一段字符后，按住`Ctrl + Alt + T`，可以用标签将这段字符环绕：
+
+![](http://img.smyhvae.com/20180118_1719.gif)
+
+
+
+
+
+