diff --git a/CNAME b/CNAME
index 8b137891791fe..86900d2159e49 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-
+blog.icodeajk.site
\ No newline at end of file
diff --git a/README.md b/README.md
index 45c202063a374..ba85c6a8ac638 100644
--- a/README.md
+++ b/README.md
@@ -1,120 +1,37 @@
-> March, 2016: If you're on an old version of Jekyll Now and run into a) build warnings or b) syntax highlighting issues caused by [Jekyll 3 and GitHub Pages updates](https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0), just :sparkles:[update your _config.yml](https://github.com/barryclark/jekyll-now/pull/445/files):sparkles: and you'll be set!
+## Welcome to GitHub Pages
 
-# Jekyll Now
+You can use the [editor on GitHub](https://github.com/icodeajk/icodeajk.github.io/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
 
-**Jekyll** is a static site generator that's perfect for GitHub hosted blogs ([Jekyll Repository](https://github.com/jekyll/jekyll))
+Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
 
-**Jekyll Now** makes it easier to create your Jekyll blog, by eliminating a lot of the up front setup.
+### Markdown
 
-- You don't need to touch the command line
-- You don't need to install/configure ruby, rvm/rbenv, ruby gems :relaxed:
-- You don't need to install runtime dependencies like markdown processors, Pygments, etc
-- If you're on Windows, this will make setting up Jekyll a lot easier
-- It's easy to try out, you can just delete your forked repository if you don't like it
+Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
 
-In a few minutes you'll be set up with a minimal, responsive blog like the one below giving you more time to spend on writing epic blog posts!
+```markdown
+Syntax highlighted code block
 
-![Jekyll Now Theme Screenshot](/images/jekyll-now-theme-screenshot.jpg "Jekyll Now Theme Screenshot")
+# Header 1
+## Header 2
+### Header 3
 
-## Quick Start
+- Bulleted
+- List
 
-### Step 1) Fork Jekyll Now to your User Repository
+1. Numbered
+2. List
 
-Fork this repo, then rename the repository to yourgithubusername.github.io.
+**Bold** and _Italic_ and `Code` text
 
-Your Jekyll blog will often be viewable immediately at <https://yourgithubusername.github.io> (if it's not, you can often force it to build by completing step 2)
+[Link](url) and ![Image](src)
+```
 
-![Step 1](/images/step1.gif "Step 1")
+For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
 
-### Step 2) Customize and view your site
+### Jekyll Themes
 
-Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here too.
+Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/icodeajk/icodeajk.github.io/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
 
-Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at <https://yourgithubusername.github.io> - if not, give it ten minutes as GitHub suggests and it'll appear soon
+### Support or Contact
 
-> There are 3 different ways that you can make changes to your blog's files:
-
-> 1. Edit files within your new username.github.io repository in the browser at GitHub.com (shown below).
-> 2. Use a third party GitHub content editor, like [Prose by Development Seed](http://prose.io). It's optimized for use with Jekyll making markdown editing, writing drafts, and uploading images really easy.
-> 3. Clone down your repository and make updates locally, then push them to your GitHub repository.
-
-![_config.yml](/images/config.png "_config.yml")
-
-### Step 3) Publish your first blog post
-
-Edit `/_posts/2014-3-3-Hello-World.md` to publish your first blog post. This [Markdown Cheatsheet](http://www.jekyllnow.com/Markdown-Style-Guide/) might come in handy.
-
-![First Post](/images/first-post.png "First Post")
-
-> You can add additional posts in the browser on GitHub.com too! Just hit the + icon in `/_posts/` to create new content. Just make sure to include the [front-matter](http://jekyllrb.com/docs/frontmatter/) block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md
-
-## Local Development
-
-1. Install Jekyll and plug-ins in one fell swoop. `gem install github-pages` This mirrors the plug-ins used by GitHub Pages on your local machine including Jekyll, Sass, etc.
-2. Clone down your fork `git clone https://github.com/yourusername/yourusername.github.io.git`
-3. Serve the site and watch for markup/sass changes `jekyll serve`
-4. View your website at http://127.0.0.1:4000/
-5. Commit any changes and push everything to the master branch of your GitHub user repository. GitHub Pages will then rebuild and serve your website.
-
-## Moar!
-
-I've created a more detailed walkthrough, [**Build A Blog With Jekyll And GitHub Pages**](http://www.smashingmagazine.com/2014/08/01/build-blog-jekyll-github-pages/) over at the Smashing Magazine website. Check it out if you'd like a more detailed walkthrough and some background on Jekyll. :metal:
-
-It covers:
-
-- A more detailed walkthrough of setting up your Jekyll blog
-- Common issues that you might encounter while using Jekyll
-- Importing from Wordpress, using your own domain name, and blogging in your favorite editor
-- Theming in Jekyll, with Liquid templating examples
-- A quick look at Jekyll 2.0’s new features, including Sass/Coffeescript support and Collections
-
-## Jekyll Now Features
-
-✓ Command-line free _fork-first workflow_, using GitHub.com to create, customize and post to your blog  
-✓ Fully responsive and mobile optimized base theme (**[Theme Demo](http://jekyllnow.com)**)  
-✓ Sass/Coffeescript support using Jekyll 2.0  
-✓ Free hosting on your GitHub Pages user site  
-✓ Markdown blogging  
-✓ Syntax highlighting  
-✓ Disqus commenting  
-✓ Google Analytics integration  
-✓ SVG social icons for your footer  
-✓ 3 http requests, including your avatar  
-
-✘ No installing dependencies
-✘ No need to set up local development  
-✘ No configuring plugins  
-✘ No need to spend time on theming  
-✘ More time to code other things ... wait ✓!  
-
-## Questions?
-
-[Open an Issue](https://github.com/barryclark/jekyll-now/issues/new) and let's chat!
-
-## Other forkable themes
-
-You can use the [Quick Start](https://github.com/barryclark/jekyll-now#quick-start) workflow with other themes that are set up to be forked too! Here are some of my favorites:
-
-- [Hyde](https://github.com/poole/hyde) by MDO
-- [Lanyon](https://github.com/poole/lanyon) by MDO
-- [mojombo.github.io](https://github.com/mojombo/mojombo.github.io) by Tom Preston-Werner
-- [Left](https://github.com/holman/left) by Zach Holman
-- [Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes) by Michael Rose
-- [Skinny Bones](https://github.com/mmistakes/skinny-bones-jekyll) by Michael Rose
-
-## Credits
-
-- [Jekyll](https://github.com/jekyll/jekyll) - Thanks to its creators, contributors and maintainers.
-- [SVG icons](https://github.com/neilorangepeel/Free-Social-Icons) - Thanks, Neil Orange Peel. They're beautiful.
-- [Solarized Light Pygments](https://gist.github.com/edwardhotchkiss/2005058) - Thanks, Edward.
-- [Joel Glovier](http://joelglovier.com/writing/) - Great Jekyll articles. I used Joel's feed.xml in this repository.
-- [David Furnes](https://github.com/dfurnes), [Jon Uy](https://github.com/jonuy), [Luke Patton](https://github.com/lkpttn) - Thanks for the design/code reviews.
-- [Bart Kiers](https://github.com/bkiers), [Florian Simon](https://github.com/vermluh), [Henry Stanley](https://github.com/henryaj), [Hun Jae Lee](https://github.com/hunjaelee), [Javier Cejudo](https://github.com/javiercejudo), [Peter Etelej](https://github.com/etelej), [Ben Abbott](https://github.com/jaminscript), [Ray Nicholus](https://github.com/rnicholus), [Erin Grand](https://github.com/eringrand), [Léo Colombaro](https://github.com/LeoColomb), [Dean Attali](https://github.com/daattali), [Clayton Errington](https://github.com/cjerrington), [Colton Fitzgerald](https://github.com/coltonfitzgerald), [Trace Mayer](https://github.com/sunnankar) - Thanks for your [fantastic contributions](https://github.com/barryclark/jekyll-now/commits/master) to the project!
-
-## Contributing
-
-Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.
-
-You can start by [opening an issue](https://github.com/barryclark/jekyll-now/issues/new) describing the problem that you're looking to resolve and we'll go from there.
-
-I want to keep Jekyll Now as minimal as possible. Every line of code should be one that's useful to 90% of the people using it. Please bear that in mind when submitting feature requests. If it's not something that most people will use, it probably won't get merged. :guardsman:
+Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
diff --git a/_config.yml b/_config.yml
index d4916414195c9..8941f200e85a9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,13 +3,13 @@
 #
 
 # Name of your site (displayed in the header)
-name: Your Name
+name: icodeajk
 
 # Short bio or description (displayed in the header)
-description: Web Developer from Somewhere
+description: 敖景宽的博客
 
 # URL of your avatar or profile pic (you could use your GitHub profile pic)
-avatar: https://raw.githubusercontent.com/barryclark/jekyll-now/master/images/jekyll-logo.png
+avatar: https://raw.githubusercontent.com/icodeajk/icodeajk.github.io/master/images/mePhoto.png
 
 #
 # Flags below are optional
@@ -18,15 +18,15 @@ avatar: https://raw.githubusercontent.com/barryclark/jekyll-now/master/images/je
 # Includes an icon in the footer for each username you enter
 footer-links:
   dribbble:
-  email:
+  email: 1181674815@qq.com
   facebook:
   flickr:
-  github: barryclark/jekyll-now
+  github: /icodeajk
   instagram:
   linkedin:
   pinterest:
   rss: # just type anything here for a working RSS icon
-  twitter: jekyllrb
+  twitter:
   stackoverflow: # your stackoverflow profile, e.g. "users/50476/bart-kiers"
   youtube: # channel/<your_long_string> or user/<user-name>
   googleplus: # anything in your profile username that comes after plus.google.com/
@@ -41,13 +41,13 @@ google_analytics:
 
 # Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co)
 # Used for Sitemap.xml and your RSS feed
-url:
+url: http://icodeajk.github.io
 
 # If you're hosting your site at a Project repository on GitHub pages
 # (http://yourusername.github.io/repository-name)
 # and NOT your User repository (http://yourusername.github.io)
 # then add in the baseurl here, like this: "/repository-name"
-baseurl: ""
+baseurl: "/icodeajk.github.io"
 
 #
 # !! You don't need to change any of the configuration flags below !!
@@ -84,3 +84,5 @@ exclude:
   - LICENSE
   - README.md
   - CNAME
+
+theme: jekyll-theme-cayman
\ No newline at end of file
diff --git a/_posts/2014-3-3-Hello-World.md b/_posts/2014-3-3-Hello-World.md
deleted file mode 100644
index d4665b6d18e9e..0000000000000
--- a/_posts/2014-3-3-Hello-World.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: post
-title: You're up and running!
----
-
-Next you can update your site name, avatar and other options using the _config.yml file in the root of your repository (shown below).
-
-![_config.yml]({{ site.baseurl }}/images/config.png)
-
-The easiest way to make your first post is to edit this one. Go into /_posts/ and update the Hello World markdown file. For more instructions head over to the [Jekyll Now repository](https://github.com/barryclark/jekyll-now) on GitHub.
\ No newline at end of file
diff --git "a/_posts/2018-04-17-CSS\345\261\205\344\270\255\346\226\271\345\274\217.md" "b/_posts/2018-04-17-CSS\345\261\205\344\270\255\346\226\271\345\274\217.md"
new file mode 100644
index 0000000000000..d7a28ca4ecff7
--- /dev/null
+++ "b/_posts/2018-04-17-CSS\345\261\205\344\270\255\346\226\271\345\274\217.md"
@@ -0,0 +1,241 @@
+---
+published: true
+layout: post
+title: CSS居中的方式
+---
+
+### 1 水平居中
+#### 1.1 内联元素水平居中
+
+利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。
+核心代码：
+
+```css
+.center-text {
+	text-align: center;
+}
+```
+
+#### 1.2 块级元素水平居中
+
+通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
+核心代码：
+
+```css
+.center-block {
+	margin: 0 auto;
+}
+```
+
+#### 1.3 多块级元素水平居中
+
+1.3.1 利用inline-block 
+如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
+核心代码：
+
+```css
+.container {
+	text-align: center;
+}
+.inline-block {
+	display: inline-block;
+}
+```
+
+1.3.2 利用display: flex 
+利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
+核心代码：
+
+```css
+.flex-center {
+	display: flex;
+	justify-content: center;
+}
+```
+
+### 2 垂直居中
+#### 2.1 单行内联(inline-)元素垂直居中
+通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
+核心代码：
+
+```css
+#v-box {
+	height: 120px;
+	line-height: 120px;
+}
+```
+
+#### 2.2 多行元素垂直居中
+
+2.2.1 利用表布局（table）
+利用表布局的vertical-align: middle可以实现子元素的垂直居中。
+核心代码：
+
+```css
+.center-table {
+	    display: table;
+}
+.v-cell {
+	display: table-cell;
+	vertical-align: middle;
+}
+```
+
+2.2.2 利用flex布局（flex）
+利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
+核心代码：
+
+```css
+.center-flex {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+```
+
+2.2.3 利用“精灵元素”
+利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
+核心代码：
+
+```css
+.ghost-center {
+	position: relative;
+}
+.ghost-center::before {
+	content: " ";
+	display: inline-block;
+	height: 100%;
+	width: 1%;
+	vertical-align: middle;
+}
+.ghost-center p {
+	display: inline-block;
+	vertical-align: middle;
+	width: 20rem;
+}
+```
+
+#### 2.3 块级元素垂直居中
+
+2.3.1 固定高度的块级元素
+我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
+核心代码：
+
+```css
+.parent {
+	position: relative;
+}
+.child {
+	position: absolute;
+	top: 50%;
+	height: 100px;
+	margin-top: -50px; 
+}
+```
+
+2.3.2 未知高度的块级元素
+当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
+核心代码：
+
+```css
+.parent {
+	position: relative;
+}
+.child {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+}
+```
+
+### 3 水平垂直居中
+#### 3.1 固定宽高元素水平垂直居中
+
+通过margin平移元素整体宽度的一半，使元素水平垂直居中。
+核心代码：
+
+```css
+.parent {
+	position: relative;
+}
+.child {
+	width: 300px;
+	height: 100px;
+	padding: 20px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -70px 0 0 -170px;
+}
+```
+
+#### 3.2 未知宽高元素水平垂直居中
+
+利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
+核心代码：
+
+```css
+.parent {
+	position: relative;
+}
+.child {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+```
+
+#### 3.3 利用flex布局
+
+利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
+核心代码：
+
+```css
+.parent {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+```
+
+#### 3.4 利用grid布局
+
+利用grid实现水平垂直居中，兼容性较差，不推荐。
+核心代码：
+
+```css
+.parent {
+	height: 140px;
+	display: grid;
+}
+.child { 
+	margin: auto;
+}
+```
+
+#### 3.5 屏幕上水平垂直居中
+
+屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
+核心代码：
+
+```css
+.outer {
+	display: table;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+}
+.middle {
+	display: table-cell;
+	vertical-align: middle;
+}
+.inner {
+	margin-left: auto;
+	margin-right: auto; 
+	width: 400px;
+}
+```
+
+
+> [转载原文地址](https://segmentfault.com/a/1190000013966650?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com&share_user=1030000000178452)
diff --git "a/_posts/2018-04-21-\350\241\214\345\206\205\345\205\203\347\264\240\347\251\272\347\231\275\345\244\204\347\220\206.md" "b/_posts/2018-04-21-\350\241\214\345\206\205\345\205\203\347\264\240\347\251\272\347\231\275\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000..c14e0df3dbf7d
--- /dev/null
+++ "b/_posts/2018-04-21-\350\241\214\345\206\205\345\205\203\347\264\240\347\251\272\347\231\275\345\244\204\347\220\206.md"
@@ -0,0 +1,115 @@
+---
+published: true
+layout: post
+title: 行内元素空白处理
+---
+###  html和css如下：
+
+```html
+<p>
+	 <span> Foo </span>
+	 <span> Bar </span>
+</p>
+```
+
+```css
+span { 
+    display:inline-block;
+    width:100px;
+    background-color:palevioletred;
+}
+```
+
+### 效果如下：
+
+![image](https://github.com/icodeajk/icodeajk.github.io/raw/master/images/2018-04-21.png)
+
+SPAN元素之间将会有一个4px宽度的空白。
+如何解决呢？
+
+首先我们需要分析出现这种问题的原因在哪里。
+因为span是行内元素，这意味着就和一个字符一样,而不管两个字符相距多远,对于浏览器来说只会解析为一个空格, 比如上述代码,换了一行,也算是一个空格,那一段空白就是这么来的.
+知道了原因，那么解决的方法就有了。
+
+### 第一种方法：
+**将两个span元素放在同一行，不要换行。**如：
+
+```html
+<p>
+    <span>Foo</span><span>Bar</span>
+</p>
+```
+
+### 第二种方法：
+**将p元素的font-size设置为0，然后将span的font-szie设置为指定像素。**如：
+
+```css
+span { 
+    display:inline-block;
+    width:100px;
+    background-color:palevioletred;
+    font-size:14px;
+}
+p{
+    font-size:0px;
+}
+```
+
+```html
+<p>
+   <span> Foo </span>
+   <span> Bar </span>
+</p>
+```
+
+### 第三种方法：
+**使用display: table;和display: table-cell;属性代替display: inline-block;**
+
+```css
+p {
+  display: table;
+}
+span {
+  width: 100px;
+  border: 1px solid silver; /* added for visualization only*/
+  display: table-cell;
+}
+```
+
+```html
+<p>
+  <span> Foo </span>
+  <span> Bar </span>
+</p>
+```
+
+### 第四种方法：
+**在p元素上加上display: flex属性**
+
+```css
+p {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+span {
+  float: left;
+  display: inline-block;
+  width: 100px;
+  background: blue;
+  font-size: 30px;
+  color: white;
+  text-align: center;
+}
+```
+
+```html
+<p>
+  <span> Foo </span>
+  <span> Bar </span>
+</p>
+```
+
+虽然这些方案都不是很理想,但是如果不这样处理，那你的HTML代码结构可能就非常混乱，成为标准的垃圾代码。
+因为行内元素非常好用,所以这并不是一个小心避免的雷区,作为开发人员,学会处理这种空白问题也是很重要的。
diff --git "a/_posts/2018-04-30-Flex\345\270\203\345\261\200.md" "b/_posts/2018-04-30-Flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000..13d66592d8546
--- /dev/null
+++ "b/_posts/2018-04-30-Flex\345\270\203\345\261\200.md"
@@ -0,0 +1,63 @@
+---
+published: true
+layout: post
+publish: true
+title: Flex布局
+---
+看到了两篇关于Flex布局非常棒的文章，是阮一峰前辈写的，清晰明了
+
+### 容器属性：
+
+```css
+.box{
+  display:flex;  //弹性布局
+  flex-direction:row;
+  ....
+}
+```
+
+flex-direction     //row（默认，主轴水平从左到右）\| row-reverse
+\| column（主轴垂直从上到下）\| column-reverse
+
+flex-wrap        //nowrap（默认，不换行）\| wrap（第一行在上方）
+\| wrap-reverse（第一行在下方）
+
+flex-flow        //[ <'flex-direction'> \| <'flex-wrap'> ]（默认row nowrap）
+
+justify-content     //在主轴上的对齐方式（假设主轴从左到右，默认起点对齐）
+flex-start \| flex-ens \| center \| space-between \| space-around
+
+align-items       //在交叉轴的对齐方式（默认stretch，未设置高度将占满整个容器）
+flex-start \| flex-ens \| center \| stretch \| baseline
+
+align-content      //多根轴线的对齐方式（默认stretch 轴线占满整个容器）
+flex-start \| flex-ens \| center \| stretch \| space-between \| space-around
+
+### 项目属性：
+
+```css
+.item1{
+	order: 1;
+}
+.item2{
+	order: 2;
+}
+```
+
+order： <'integer'>;      //数值越小，排列越靠前（默认为0）
+  
+flex-grow: <'number'>;     //项目放大比例（默认为0，表示不放大）
+  
+flex-shrink：<'number'>;	   //项目缩小比例（默认为1，表示若空间不足则缩小）
+  
+flex-basis：<'length'> \| auto;    //项目占据的主轴空间 （默认为auto，即项目本身大小）
+  
+flex：none \| [ <'flex-grow'> <'flex-shrink'>? \| <'flex-basis'> ]
+（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）
+
+align-self：auto \| flex-start \| flex-end \| center \| baseline \| stretch；     //单个项目的对齐方式
+
+
+> [阮一峰：Flex语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html "link")
+
+> [阮一峰：Flex实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html "link")
diff --git "a/_posts/2018-05-09-ES6\345\270\270\347\224\250\346\226\260\350\257\255\346\263\225\347\211\271\346\200\247.md" "b/_posts/2018-05-09-ES6\345\270\270\347\224\250\346\226\260\350\257\255\346\263\225\347\211\271\346\200\247.md"
new file mode 100644
index 0000000000000..f769e39cdc7e9
--- /dev/null
+++ "b/_posts/2018-05-09-ES6\345\270\270\347\224\250\346\226\260\350\257\255\346\263\225\347\211\271\346\200\247.md"
@@ -0,0 +1,297 @@
+---
+published: true
+layout: post
+title: ES6常用新语法特性
+---
+### 前言
+ES6是即将到来的新版本JavaScript语言的标准，他给我们带来了更“甜”的语法糖（一种语法，使得语言更容易理解和更具有可读性，也让我们编写代码更加简单快捷），如箭头函数`=>`、`class`等等。用一句话来说就是：
+	ES6给我们提供了许多的新语法和代码特性来提高javascript的体验
+不过遗憾的是，现在还没有浏览器能够很好的支持es6语法，点这里查看浏览器支持情况，所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法。
+
+
+### 定义函数
+我们先来看一个基本的新特性，在javascript中，定义函数需要关键字function，但是在es6中，还有更先进的写法，我们来看：
+es6写法：
+
+```javascript
+var human = {
+    breathe(name) {   //不需要function也能定义breathe函数。
+        console.log(name + ' is breathing...');
+    }
+};
+human.breathe('jarson');   //输出 ‘jarson is breathing...’
+```
+
+转成js代码：
+
+```javascript
+var human = {
+    breathe: function(name) {
+        console.log(name + 'is breathing...');
+    }
+};
+human.breathe('jarson');
+```
+
+很神奇对不对？这样一对比，就可以看出es6的写法让人简单易懂。别着急，下面还有更神奇的。
+
+### 创建类
+我们知道，javascript不像java是面向对象编程的语言，而只可以说是基于对象编程的语言。所以在js中，我们通常都是用`function`和`prototype`来模拟类这个概念。
+但是现在有了es6，我们可以像java那样‘明目张胆’的创建一个类了：
+
+```javascript
+class Human {
+    constructor(name) {
+        this.name = name;
+    }
+    breathe() {
+        console.log(this.name + " is breathing");
+    }
+} 
+var man = new Human("jarson");
+man.breathe();    //jarson is breathing
+```
+
+上面代码转为js格式：
+
+```javascript
+function Human(name) {
+    this.name = name;
+    this.breathe = function() {
+        console.log(this.name + ' is breathing');
+    }
+}
+var man = new Human('jarson');
+man.breathe();    //jarson is breathing
+```
+
+所以我们看到，我们可以像java那样语义化的去创建一个类。另外，js中的继承父类，需要用`prototype`来实现。那么在es6中，又有什么新的方法来实现类的继承呢？继续看：
+假如我们要创建一个Man类继承上面的Human类，es6代码：
+
+```javascript
+class Man extends Human {
+    constructor(name, sex) {
+        super(name);
+        this.sex = sex;
+    }
+    info(){
+        console.log(this.name + 'is ' + this.sex);
+    }
+}
+var xx = new Man('jarson', 'boy');
+xx.breathe();   //jarson is breathing
+xx.info();   //arsonis boy
+```
+
+代码很简单，不作赘述，可以使用文章里提到的在线工具去试试效果就能明白了。需要注意的是：`super()`是父类的构造函数。
+
+### 模块
+在ES6标准中，javascript原生支持`module`了。将不同功能的代码分别写在不同文件中，各模块只需导出(export)公共接口部分，然后在需要使用的地方通过模块的导入(import)就可以了。下面继续看例子：
+内联导出
+ES6模块里的对象可在创建它们的声明中直接导出，一个模块中可无数次使用export。
+先看模块文件app.js：
+
+```javascript
+export class Human{
+    constructor(name) {
+        this.name = name;
+    }
+    breathe() {
+        console.log(this.name + " is breathing");
+    } 
+}  
+export function run(){  
+    console.log('i am runing'); 
+}
+function eat() {
+    console.log('i am eating');
+}
+```
+
+例子中的模块导出了两个对象：Human类和run函数， eat函数没有导出，则仍为此模块私有，不能被其他文件使用。
+导出一组对象
+另外，其实如果需要导出的对象很多的时候，我们可以在最后统一导出一组对象。
+更改app.js文件：
+
+```javascript
+class Human{
+    constructor(name) {
+        this.name = name;
+    }
+    breathe() {
+        console.log(this.name + " is breathing");
+    } 
+}  
+function run(){  
+    console.log('i am runing'); 
+}
+function eat() {
+    console.log('i am eating');
+}
+export {Human, run};
+```
+
+这样的写法功能和上面一样，而且也很明显，在最后可以清晰的看到导出了哪些对象。
+Default导出
+导出时使用关键字`default`，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。
+查看导出default对象的语法：
+
+```javascript
+...   //创建类、函数等等
+export default {  //把Human类和run函数标注为default对象导出。
+    Human,  
+    run  
+}; 
+```
+
+### 无对象导入
+如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中，导入之后只执行逻辑。如：
+
+```javascript
+import './module1.js';
+``` 
+
+导入默认对象
+使用`Default`导出方式导出对象，该对象在import声明中将直接被分配给某个引用，如下例中的“app”。
+
+```javascript
+import app from './module1.js'; 
+```
+
+上面例子中，默认`./module1.js`文件只导出了一个对象；若导出了一组对象，则应该在导入声明中一一列出这些对象，如：
+
+```javascript
+import {Human, run} from './app.js'
+```
+
+### let与const
+在我看来，在es6新特性中，在定义变量的时候统统使用`let`来代替`var`就好了，`const`则很直观，用来定义常量，即无法被更改值的变量。
+
+```javascript
+for (let i=0;i<2;i++) {
+    console.log(i);  //输出: 0,1
+}
+```
+
+### 箭头函数
+ES6中新增的箭头操作符`=>`简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：
+
+```javascript
+let arr = [6, 8, 10, 20, 15, 9];
+arr.forEach((item, i) => console.log(item, i));
+let newArr = arr.filter((item) => (item<10));
+console.log(newArr); //[6, 8, 9];
+```
+
+上面的`(item, i)`就是参数，后面的`console.log(item, i)`就是回到函数要执行的操作逻辑。
+上面代码转为js格式：
+
+```javascript
+var arr = [6, 8, 10, 20, 15, 9];
+arr.forEach(function(item, i) {
+    return console.log(item, i);
+});
+var newArr = arr.filter(function(item) {
+    return (item < 10);
+});
+console.log(newArr);
+```
+
+### 字符串模版
+ES6中允许使用反引号 \` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量`${vraible}`。看一下实例就会明白了：
+
+```javascript
+//产生一个随机数
+let num = Math.random();
+//将这个数字输出到console
+console.log(`your num is ${num}`);
+```
+
+### 解构
+若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子：
+
+```javascript
+function getVal() {
+    return [1, 2];
+}
+var [x,y] = getVal(); //函数返回值的解构
+console.log('x:'+x+', y:'+y);   //输出：x:1, y:2 
+```
+
+### 默认参数
+现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
+
+```javascript
+function sayHello(name){
+    var name=name||'tom';   //传统的指定默认参数的方式
+    console.log('Hello '+name);
+}
+//运用ES6的默认参数
+function sayHello2(name='tom'){  //如果没有传这个参数，才会有默认值，
+    console.log(`Hello ${name}`);
+}
+sayHello();//输出：Hello tom
+sayHello('jarson');//输出：Hello jarson
+sayHello2();//输出：Hello tom
+sayHello2('jarson');//输出：Hello jarson
+```
+
+注意： `sayHello2(name='tom')`这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。
+
+### Proxy
+`Proxy`可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。
+
+```javascript
+//定义被监听的目标对象
+let engineer = { name: 'Joe Sixpack', salary: 50 };
+//定义处理程序
+let interceptor = {
+    set(receiver, property, value) {
+        console.log(property, 'is changed to', value);
+        receiver[property] = value;
+    }
+};
+//创建代理以进行侦听
+engineer = new Proxy(engineer, interceptor);
+//做一些改动来触发代理
+engineer.salary = 70;//控制台输出：salary is changed to 70
+```
+
+### 扩展运算符...
+扩展运算符 `spread` 是三个点`...`。它好比 `rest` 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
+对于处理程序，是在被监听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用。
+
+```javascript
+console.log(...[1, 2, 3])  
+// 1 2 3  
+console.log(1, ...[2, 3, 4], 5)  
+// 1 2 3 4 5  
+[...document.querySelectorAll('div')]  
+// [<div>, <div>, <div>]  
+```
+
+该运算符主要用于函数调用。
+
+```javascript
+function push(array, ...items) {  
+array.push(...items);  
+}  
+function add(x, y) {  
+return x + y;  
+}  
+var numbers = [4, 38];  
+add(...numbers) // 42
+```
+
+上面代码中，`array.push(...items)`和`add(...numbers)`这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
+
+扩展运算符与正常的函数参数可以结合使用，非常灵活。
+
+```javascript
+function f(v, w, x, y, z) { }  
+var args = [0, 1];  
+f(-1, ...args, 2, ...[3]);
+```
+
+## 结语
+总的来说，虽然支持es6的情况到目前还不是很乐观，但es6的新语法特性让前端和后端的差异越来越小了，这是一个新时代的开始，我们必须要了解这些新的前沿知识，才能跟上时代的步伐。
diff --git "a/_posts/2018-06-07-\345\205\263\344\272\216jQuery\345\270\270\350\247\201\344\274\230\345\214\226\345\206\231\346\263\225\351\230\205\350\257\273\347\254\224\350\256\260.md" "b/_posts/2018-06-07-\345\205\263\344\272\216jQuery\345\270\270\350\247\201\344\274\230\345\214\226\345\206\231\346\263\225\351\230\205\350\257\273\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000..6461ae95bcf0c
--- /dev/null
+++ "b/_posts/2018-06-07-\345\205\263\344\272\216jQuery\345\270\270\350\247\201\344\274\230\345\214\226\345\206\231\346\263\225\351\230\205\350\257\273\347\254\224\350\256\260.md"
@@ -0,0 +1,172 @@
+---
+published: ture
+title: 关于jQuery常见优化写法阅读笔记
+layout: post
+---
+
+## 推荐一篇非常好的[文章](https://mp.weixin.qq.com/s?__biz=MzU5NzEwMDQyNA==&mid=2247483704&idx=1&sn=4c7c76969248f4debacbedc5b48398f4&chksm=fe59d3dfc92e5ac96a6bae93d602fc208840af61617c6ff4977e15ecf3245ce4b6e8d7ba6c7e&mpshare=1&scene=22&srcid=0626gpZgt2jWBVexebE9Pvo9#rd)
+
+
+
+### 1. ready事件的触发条件是？
+
+
+dom树加载完毕，即document加载完毕，dom和dom元素不一样
+
+
+
+### 2. ready事件的handler适合执行什么操作?
+
+
+在用户还没看到页面和进行交互前，应该执行的操作。如插件初始化，事件绑定
+
+
+
+### 3. ready事件可以用于任何一个元素节点吗？
+
+
+查看了一些别人的博客，有的是错的。只可以作用于DOM树，即document，DOM节点不行。
+
+
+衍生问题：load可以用于任意元素节点吗？
+
+不能，只能用在能引入URL的元素节点，如：img frameset；
+
+
+
+### 4. 它和window对象的load事件有什么区别？
+
+
+ - 触发时机不同：ready是在DOM树加载完毕后执行操作，load是在页面加载完毕再执行，包括DOM树和各个资源。
+
+ - 来源不同：ready时jQuery的自定义事件，而window的load事件是W3C定义的标准事件
+
+ - 适合执行的操作不一样：
+
+
+衍生问题：load和onload的区别？
+
+$(window).load()和body.onload()都是完全加载页面时触发。不推荐用body.onload(),它不能做到JS和HTML完全分离。
+
+
+```html
+<body onload="fn1(),fn2()"></body>
+<!--看起来极其丑陋,如果用$ (window).load()我们可以这样加载多个函数-->
+```
+
+```javascript
+ $(window).load(function() {
+            alert("hello,我是jQuery!");
+  });
+ $(window).load(function() {
+        alert("hello,我也是jQuery");
+ });
+```
+
+
+衍生问题：为什么onload()可以用body?
+
+一般来说，在window上面发生的任何事件都可以在body元素中通过相应的特性来指定，因为在HTML中无法访问window元素。
+
+这样是为了保证向后兼容的权宜之计，但所有浏览器都能很好地支持这种方式。
+
+结论：为了对应上window.onload，body标签才有onload。
+
+
+
+### 5. DOM加载完毕和window加载完毕，二者具体不同在哪里？
+
+
+DOM加载完毕是指加载完DOM树，而window加载完毕指的是页面加载完全（包括资源和DOM树）
+
+
+
+### 6.使用事件委托机制（减少事件监听器的重复绑定）
+
+
+实现原理：基于浏览器的时间传播机制的两个特性：
+
+1.具有嵌套关系的元素，内层元素的可传播事件被触发时，其外层元素的同类型事件也会被触发；
+
+2.由相同的用户行为触发的可传播事件，内外层的handler的event.target始终一致。
+
+
+具体步骤：假设为ul和li，及span
+
+1.从event.target（span）元素开始（包括其自身），向外搜寻，看有没有和给定子元素选择器匹配的元素（li），有则继续，无则退。
+
+2.判断匹配的元素（li）是否包含于被委托了事件监听的外层元素（ul），有则继续，无则退。
+
+3.到达这里说明委托外层元素进行事件处理的子元素（li）的事件确实触发了，此时就可以执行子元素委托给外层元素的handler，并把相应的事件信息，封装到一个事件对象中，一同传给这个handler。
+
+
+
+### 7.提高jQuery选择器的查询效率（指代更准确）
+
+
+1.子元素选择器和上下文选择器的使用次数最好不要超过三个。
+
+2.结构类的选择器，第一个选择器最好是id选择器，其次是class选择器。
+
+
+
+### 8.值和对象的复用
+
+
+使用变量记住$()对象的值，防止重复查询。
+
+
+
+### 9.尽量减少调用DOM元素的操作次数
+
+
+- 回流：当执行元素的增删改，字号调整时，会导致页面结构发生变化，此时浏览器会重新调整页面布局，这个过程被称为回流。
+
+- 重绘：当重新设置修改元素的样式时（页面的结构布局没发生变化），会重新设置元素的显示样式，这个过程称为重绘。
+
+- 双方关系和开销：回流一定引起重绘，而重绘不会引起回流，其中回流开销最大。而一个DOM元素操作如果引起页面结构变化，就会引起页面回流，当操作频繁时，会引发整体性能的下降。
+
+
+
+1.常见的由于DOM结构变化引发的回流优化方案。
+
+添加节点时，先拼接HTML字符串，再去用append，html()和prepend等方法插入；
+
+2.常见的由于DOM元素样式变化引发的会流的优化方案。
+
+通过修改class，统一调整样式。jQuery常用的有addClass(),removeClass()和toggleClass();
+
+
+
+### 10.使用jQuery的data机制给DOM元素怎加自定义属性
+
+
+1. 在特定业务场景，自定义的数据属性，其命名难免会和元素的内置属性名称冲突；
+
+2. 驼峰命名法广泛采用于变量命名，但是html代码不区分大小写，如果在html代码中使用驼峰命名法给自定义属性命名，那么自定义属性中出现的大写字母，也终将被解析为小写字母。
+
+
+为了解决这两个问题，jQuery提供了data机制：
+
+- 在html代码中，规定自定义数据属性需添加data-前缀，以和元素的内置属性区分，进而避免命名冲突；
+
+- 同时，规定自定义属性使用中横线命名法，以应对html代码不区分大小写的问题；
+
+- 在js代码中，使用data(key)来读取自定义数据属性值，其中自定义属性名key采用驼峰命名法。
+
+
+```html
+<ul>
+	<li class="tab-item" data-tab-name="basic">基础配置</li>
+</ul>
+```
+
+```javascript
+$(function(){
+	$('.tab-item').on('click', function(){
+		var name = $(this).data('tabName');  //key采用驼峰命名法
+		alert(name);
+	});
+});
+```
+
diff --git "a/_posts/2018-06-09-js\344\273\243\347\240\201\345\272\224\350\257\245\346\224\276\345\234\250HTML\347\232\204\345\223\252\351\207\214.md" "b/_posts/2018-06-09-js\344\273\243\347\240\201\345\272\224\350\257\245\346\224\276\345\234\250HTML\347\232\204\345\223\252\351\207\214.md"
new file mode 100644
index 0000000000000..d7bf15a0f36ab
--- /dev/null
+++ "b/_posts/2018-06-09-js\344\273\243\347\240\201\345\272\224\350\257\245\346\224\276\345\234\250HTML\347\232\204\345\223\252\351\207\214.md"
@@ -0,0 +1,92 @@
+---
+published: true
+title: js代码应该放在HTML的哪里
+layout: post
+---
+
+
+## 在哪里放置JavaScript代码？
+
+我最近碰到个问题，load和onload的区别。当中在实验代码时发现js代码的放置顺序会影响js代码的执行。于是我就想知道js代码放在那最合适。
+
+
+### 放置于<head>之间
+
+这个是通常做法。由于HTML文档是由浏览器从上到下依次载入的。这样放置就保证了使用js脚本之前，它已经被载入了。
+
+
+```html
+<html>
+<head>
+<script type="text/javascript">
+……
+JavaScript 代码
+……
+</script>
+</head>
+....
+```
+
+
+### 放置于<body>之间
+
+我们假设Javascript代码需要操作HTML元素，而HTML是由浏览器从上到下依次载入的。如果放在<body>的前一部分，就会导致要操作的HTML元素还没载入，以至于报错。因此，我们需要把Javascript代码写在<body>的后一部分。
+
+
+```html
+<html>
+<head>
+</head>
+<body>
+</body>
+<div id="div1"></div>
+<script type="text/javascript">
+document.getElementById("div1").innerHTML="测试文字";
+</script>
+</html>
+```
+
+> 提示：如果 HTML 文档声明为 XHTML ，<script></script> 标签必须在 CDATA 部分内声明，否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：
+
+
+```html
+<html>
+<head>
+<script type="text/javascript">
+<![CDATA[
+JavaScript 代码
+]]>
+</script>
+</head>
+....
+```
+
+
+### 外部引用JavaScript代码
+
+将JavaScript代码单独形成一个 文档，并以js后缀命名。
+
+```html
+<html>
+<head>
+<script type="text/javascript" src="https://github.com/myscript.js"></script>
+</head>
+....
+```
+
+使用优点：
+
+- 1.避免在 JavaScript 代码里使用 <!-- ... //-->
+
+- 2.避免使用难看的 CDATA
+
+- 3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护
+
+- 4.HTML 文档更小，利于搜索引擎收录
+
+- 5.可以压缩、加密单个 JavaScript 文件
+
+- 6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次
+
+
+参考文章：[https://www.jb51.net/article/56337.htm](https://www.jb51.net/article/56337.htm)
diff --git a/_sass/_highlights.scss b/_sass/_highlights.scss
index 57c7b72f07617..45c82ca0cf9b6 100644
--- a/_sass/_highlights.scss
+++ b/_sass/_highlights.scss
@@ -1,17 +1,14 @@
 
-.highlight {
-  background-color: #efefef;
+.highlight .highlight {
   padding: 7px 7px 7px 10px;
-  border: 1px solid #ddd;
-  -moz-box-shadow: 3px 3px rgba(0,0,0,0.1);
-  -webkit-box-shadow: 3px 3px rgba(0,0,0,0.1);
-  box-shadow: 3px 3px rgba(0,0,0,0.1);
   margin: 20px 0 20px 0;
-  overflow: scroll;
+  border: 1px solid #ddd;
+  background-color: #efefef;
+  overflow: auto;
 }
 
 code {
-  font-family:'Bitstream Vera Sans Mono','Courier', monospace;
+  font-family:'Bitstream Vera Sans Mono','Courier',monospace;
 }
 
 .highlight .c { color: #586E75 } /* Comment */
@@ -38,47 +35,4 @@ code {
 .highlight .gu { color: #CB4B16 } /* Generic.Subheading */
 .highlight .gt { color: #93A1A1 } /* Generic.Traceback */
 .highlight .kc { color: #CB4B16 } /* Keyword.Constant */
-.highlight .kd { color: #268BD2 } /* Keyword.Declaration */
-.highlight .kn { color: #859900 } /* Keyword.Namespace */
-.highlight .kp { color: #859900 } /* Keyword.Pseudo */
-.highlight .kr { color: #268BD2 } /* Keyword.Reserved */
-.highlight .kt { color: #DC322F } /* Keyword.Type */
-.highlight .ld { color: #93A1A1 } /* Literal.Date */
-.highlight .m { color: #2AA198 } /* Literal.Number */
-.highlight .s { color: #2AA198 } /* Literal.String */
-.highlight .na { color: #93A1A1 } /* Name.Attribute */
-.highlight .nb { color: #B58900 } /* Name.Builtin */
-.highlight .nc { color: #268BD2 } /* Name.Class */
-.highlight .no { color: #CB4B16 } /* Name.Constant */
-.highlight .nd { color: #268BD2 } /* Name.Decorator */
-.highlight .ni { color: #CB4B16 } /* Name.Entity */
-.highlight .ne { color: #CB4B16 } /* Name.Exception */
-.highlight .nf { color: #268BD2 } /* Name.Function */
-.highlight .nl { color: #93A1A1 } /* Name.Label */
-.highlight .nn { color: #93A1A1 } /* Name.Namespace */
-.highlight .nx { color: #555 } /* Name.Other */
-.highlight .py { color: #93A1A1 } /* Name.Property */
-.highlight .nt { color: #268BD2 } /* Name.Tag */
-.highlight .nv { color: #268BD2 } /* Name.Variable */
-.highlight .ow { color: #859900 } /* Operator.Word */
-.highlight .w { color: #93A1A1 } /* Text.Whitespace */
-.highlight .mf { color: #2AA198 } /* Literal.Number.Float */
-.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */
-.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */
-.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */
-.highlight .sb { color: #586E75 } /* Literal.String.Backtick */
-.highlight .sc { color: #2AA198 } /* Literal.String.Char */
-.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */
-.highlight .s2 { color: #2AA198 } /* Literal.String.Double */
-.highlight .se { color: #CB4B16 } /* Literal.String.Escape */
-.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */
-.highlight .si { color: #2AA198 } /* Literal.String.Interpol */
-.highlight .sx { color: #2AA198 } /* Literal.String.Other */
-.highlight .sr { color: #DC322F } /* Literal.String.Regex */
-.highlight .s1 { color: #2AA198 } /* Literal.String.Single */
-.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */
-.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
-.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
-.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
-.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
\ No newline at end of file
+.highlight .kd { color: #268BD2 } /* Keyword.De */
diff --git a/about.md b/about.md
index bc21f5731bf4b..e5359873849d5 100644
--- a/about.md
+++ b/about.md
@@ -1,15 +1,17 @@
----
+---
 layout: page
-title: About
+title: About Me
 permalink: /about/
+published: true
 ---
+   
+  本人现在大三学生一名，是一名程序猿，中度宅。喜欢看小说（很挑剔，既要文笔好，题材又要新颖，所以经常书荒QAQ），
 
-Some information about you!
-
-### More Information
-
-A place to include any other types of information that you'd like to include about yourself.
-
-### Contact me
+   
+  目前想往前端方面发展，虽然之前参加了一些算法竞赛，但感觉还是喜欢前端这方面。它虽然比算法简单易理解，但是特别有趣。
+   尤其是当写完代码，显示出绚丽的界面时心里就特别高兴
 
-[email@domain.com](mailto:email@domain.com)
\ No newline at end of file
+   我的性格比较随和，不喜欢什么条条框框，喜欢认识新朋友，喜欢和好友一起玩，对生活饮食没什么高要求，不喜欢抽烟喝酒。
+   
+   喜欢玩的游戏有LOL，炉石传说，话说当初拉我玩这两个游戏的室友早就弃坑了。。。。。，
+   不喜欢玩手游，觉得无聊（既没有端游好玩，又容易玩腻）
diff --git a/images/2018-04-21.png b/images/2018-04-21.png
new file mode 100644
index 0000000000000..59d7596b50705
Binary files /dev/null and b/images/2018-04-21.png differ
diff --git a/images/config.png b/images/config.png
deleted file mode 100644
index bdaa9c2f35e52..0000000000000
Binary files a/images/config.png and /dev/null differ
diff --git a/images/first-post.png b/images/first-post.png
deleted file mode 100644
index e6edcc1832b8e..0000000000000
Binary files a/images/first-post.png and /dev/null differ
diff --git a/images/jekyll-logo.png b/images/jekyll-logo.png
deleted file mode 100644
index 66c09a6286a72..0000000000000
Binary files a/images/jekyll-logo.png and /dev/null differ
diff --git a/images/jekyll-now-theme-screenshot.jpg b/images/jekyll-now-theme-screenshot.jpg
deleted file mode 100644
index fa73e7166e976..0000000000000
Binary files a/images/jekyll-now-theme-screenshot.jpg and /dev/null differ
diff --git a/images/mePhoto.png b/images/mePhoto.png
new file mode 100644
index 0000000000000..bd547f2b655e9
Binary files /dev/null and b/images/mePhoto.png differ
diff --git a/images/step1.gif b/images/step1.gif
deleted file mode 100644
index cac698809a308..0000000000000
Binary files a/images/step1.gif and /dev/null differ