udate img

06-HTML5和CSS3/07-CSS3属性详解：Web字体.md

@@ -60,7 +60,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
 
 打开网站<http://iconfont.cn/webfont#!/webfont/index>，如下：
 
-20180220_1328.png
+![](http://img.smyhvae.com/20180220_1328.png)
 
 上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。
 
@@ -68,11 +68,11 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
 
 解压后如下：
 
-20180220_1336.png
+![](http://img.smyhvae.com/20180220_1336.png)
 
 上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的**使用步骤**：
 
-20180220_1338.png
+![](http://img.smyhvae.com/20180220_1338.png)
 
 （1）第一步：使用font-face声明字体
 
@@ -172,11 +172,11 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
 
 打开网站<http://iconfont.cn/>，找到想要的图标，加入购物车。然后下载下来：
 
-20180220_1750.png
+![](http://img.smyhvae.com/20180220_1750.png)
 
 压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
 
-20180220_1755.png
+![](http://img.smyhvae.com/20180220_1755.png)
 
 **举例1**：（图标字体引用）
 
@@ -224,7 +224,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
 
 效果如下：
 
-20180220_1800.png
+![](http://img.smyhvae.com/20180220_1800.png)
 
 
 **举例2**：（伪元素的方式使用图标字体）
@@ -290,7 +290,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
 
 效果如下：
 
-20180220_1815.png
+![](http://img.smyhvae.com/20180220_1815.png)
 
 
 工程文件：
@@ -331,11 +331,11 @@ SVG素材：
 
 打开如下网站：<http://www.bootcss.com/p/font-awesome/>。
 
-20180223_2100.png
+![](http://img.smyhvae.com/20180223_2100.png)
 
 如上图所示，下载字体后，进行解压：
 
-20180223_2105.png
+![](http://img.smyhvae.com/20180223_2105.png)
 
 使用步骤如下：
 

06-HTML5和CSS3/09-HTML5详解（二）.md

@@ -12,7 +12,8 @@
 
 ## 拖拽
 
-20180223_2130.gif
+
+![](http://img.smyhvae.com/20180223_2130.gif)
 
 如上图所示，我们可以拖拽博客园网站里的图片和超链接。
 
@@ -49,7 +50,7 @@
 
 效果如下：
 
-20180223_2140.gif
+![](http://img.smyhvae.com/20180223_2140.gif)
 
 上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。
 
@@ -117,11 +118,11 @@
 
 效果如下：
 
-20180223_2201.gif
+![](http://img.smyhvae.com/20180223_2201.gif)
 
 打印结果：
 
-20180223_2213.png
+![](http://img.smyhvae.com/20180223_2213.gif)
 
 
 ### 2、目标元素
@@ -208,11 +209,11 @@
 
 效果演示：
 
-20180223_2240.gif
+![](http://img.smyhvae.com/20180223_2240.gif)
 
 注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：
 
-20180223_2245.gif
+![](http://img.smyhvae.com/20180223_2245.gif)
 
 如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。
 
@@ -309,7 +310,7 @@
 
 效果如下：
 
-20180224_2050.gif
+![](http://img.smyhvae.com/20180224_2050.gif)
 
 ## 历史
 
@@ -368,7 +369,7 @@
 
 对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
 
-20180224_2110.png
+![](http://img.smyhvae.com/20180224_2110.gif)
 
 
 ### 隐私
@@ -597,9 +598,9 @@ HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的
 <script>
     var box = document.querySelector('.box');
     document.querySelector('.box').onclick = function () {
-//            box.requestFullscreen();   //直接这样写是没有效果的
+    // box.requestFullscreen();   //直接这样写是没有效果的
 
-//            开启全屏显示的兼容写法
+        // 开启全屏显示的兼容写法
         if (box.requestFullscreen) {  //如果支持全屏，那就让元素全屏
             box.requestFullscreen();
         } else if (box.webkitRequestFullScreen) {
@@ -616,7 +617,7 @@ HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的
 
 效果如下：
 
-20180224_2130.gif
+![](http://img.smyhvae.com/20180224_2130.gif)
 
 
 

06-HTML5和CSS3/10-HTML5详解（三）.md

@@ -129,7 +129,7 @@ sessionStorage 的 API 举例：
 
 效果如下：
 
-20180224_2200.gif
+![](http://img.smyhvae.com/20180224_2200.gif)
 
 如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
 
@@ -308,7 +308,8 @@ HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只
 
 格式举例1：
 
-20180224_2240.png
+![](http://img.smyhvae.com/20180224_2240.png)
+
 
 格式举例2：
 

06-HTML5和CSS3/CSS3的常见边框汇总.md

@@ -509,7 +509,7 @@
 
 效果如下：
 
-20180208_1730.png
+![](http://img.smyhvae.com/20180208_1730.png)
 
 
 ## 爱心
@@ -565,11 +565,11 @@
 
 效果如下：
 
-20180208_1737.png
+![](http://img.smyhvae.com/20180208_1737.png)
 
 它其实是下面这两个盒子叠起来的：
 
-20180208_1738.png
+![](http://img.smyhvae.com/20180208_1738.png)
 
 改变 `.heart::after` 的 left值，即可叠起来。