<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[melody]]></title><description><![CDATA[web前端]]></description><link>https://blog.youkuaiyun.com/m0_37631990</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; m0_37631990]]></copyright><item><title><![CDATA[css3典型动画集合]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/78316616</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/78316616</guid><author>m0_37631990</author><pubDate>Mon, 23 Oct 2017 10:58:48 +0800</pubDate><description><![CDATA[html>
html lang="en">
head>
    meta charset="UTF-8">
    title>css3典型动画集合title>
    link rel="stylesheet" href="css/style.css">
head>
body>
div class="wrap">
    边框划过开始-->
    div id="first" class="d]]></description><category></category></item><item><title><![CDATA[CSS 元素垂直居中的 6种方法]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/78134710</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/78134710</guid><author>m0_37631990</author><pubDate>Fri, 29 Sep 2017 15:56:52 +0800</pubDate><description><![CDATA[水平居中:
行内元素:设置父元素的text-align:center;
块级元素:设置本身的margin: 0 auto;
垂直居中:


Line-Height Method


试用：单行文本垂直居中，demo

代码：

html





1
2
3

div id="parent">
div id="child">Text here/div>
/d]]></description><category></category></item><item><title><![CDATA[redux技术入门（一）]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/71078244</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/71078244</guid><author>m0_37631990</author><pubDate>Tue, 02 May 2017 10:38:21 +0800</pubDate><description><![CDATA[Redux 入门教程（一）：基本用法







一年半前，我写了《React 入门实例教程》，介绍了 React 的基本用法。

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。



代码结构
组件之间的通信


对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
]]></description><category></category></item><item><title><![CDATA[flux架构入门篇]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/71077953</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/71077953</guid><author>m0_37631990</author><pubDate>Tue, 02 May 2017 10:14:46 +0800</pubDate><description><![CDATA[一、Flux 是什么？

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

Flux存在多种实现（至少15种），本文采用的是Facebook官方实现。

二、安装 Demo

为了便于讲解，我写了一个Demo。

请先安装一下。


$ git clone https://github.com/ruanyf/ex]]></description><category></category></item><item><title><![CDATA[Flex实例篇]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70853472</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70853472</guid><author>m0_37631990</author><pubDate>Thu, 27 Apr 2017 14:31:02 +0800</pubDate><description><![CDATA[不管是什么布局，Flex往往都可以几行命令搞定。



我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon
 Schropp的文章和Solved by Flexbox。

一、骰子的布局

骰子的一面，最多可以放置9个点。



下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

]]></description><category></category></item><item><title><![CDATA[Flex布局]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70852369</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70852369</guid><author>m0_37631990</author><pubDate>Thu, 27 Apr 2017 14:03:24 +0800</pubDate><description><![CDATA[一、Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。


.box{
  display: flex;
}



行内元素也可以使用Flex布局。


.box{
  display: inline-flex;
}



Webkit内核的浏览器，必须加上-we]]></description><category></category></item><item><title><![CDATA[sass&compass重写css]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70786845</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70786845</guid><author>m0_37631990</author><pubDate>Wed, 26 Apr 2017 10:22:49 +0800</pubDate><description><![CDATA[最近开始在尝试开始使用Sass来写CSS代码，刚开始虽然还是不太习惯用链式的方式写css，不过这是暂时的阶段。
如果你还不了解Sass，可以看之前发表过的文章来http://caibaojian.com/sass-less-stylus.html，Sass主要有下面这几种特性(主要内容来自这里)

左邊為原始scss檔，右邊為編譯過後的：
1.Variables 变量
使用$作為開頭當參]]></description><category></category></item><item><title><![CDATA[grunt基本介绍]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70767032</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70767032</guid><author>m0_37631990</author><pubDate>Tue, 25 Apr 2017 20:35:31 +0800</pubDate><description><![CDATA[yeoman官网：http://yeoman.io/
bower官网;https://bower.io/
grunt官网：http://www.gruntjs.net/
安装
npm install -g grunt-cli


上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Gru]]></description><category></category></item><item><title><![CDATA[webpack入门篇]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70736069</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70736069</guid><author>m0_37631990</author><pubDate>Tue, 25 Apr 2017 12:38:13 +0800</pubDate><description><![CDATA[webpack官网：http://webpack.github.io/




安装


先装好node和npm，因为webpack是一个基于node的项目。然后

全局安装：npm
install
-g webpack
局部安装：npm install webpack --save-dev




建立项目


建一个文件夹，然后新建一个package.]]></description><category></category></item><item><title><![CDATA[webstorm中配置git]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70598117</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70598117</guid><author>m0_37631990</author><pubDate>Mon, 24 Apr 2017 15:01:30 +0800</pubDate><description><![CDATA[git下载地址：https://git-scm.com/download/win
用webstorm上传代码时，首先要先下载git，网址一搜就可以搜到，然后开始配置webstorm，打开webstorm，在file-settings中直接搜索github，然后输入自己github的账号密码，





点击test，之后就会出来了 connection successful的提示框，]]></description><category></category></item><item><title><![CDATA[compass篇]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70597481</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70597481</guid><author>m0_37631990</author><pubDate>Mon, 24 Apr 2017 14:10:31 +0800</pubDate><description><![CDATA[compass官网：http://compass-style.org
安装compass之前首先安装ruby，安装ruby步奏请看《ruby安装》这篇文章
安装完ruby后直接 打开cmd命令行输入 gem install compass



使用
创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录，运行：compass create  



这个命令]]></description><category></category></item><item><title><![CDATA[安装ruby]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70596485</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70596485</guid><author>m0_37631990</author><pubDate>Mon, 24 Apr 2017 13:36:38 +0800</pubDate><description><![CDATA[ruby官网：http://www.ruby-lang.org/en/downloads/
sass引擎是ruby编写的，所以先安装ruby


rvm是ruby的程序管理工具，是一个命令行工具，可以提供一个便捷的多版本 Ruby 环境的管理和切换。
rvm官网：http://rvm.io
rvm安装：




安装rvm
curl -L get.rvm.io | bash]]></description><category></category></item><item><title><![CDATA[在webstorm中配置sass环境]]></title><link>https://blog.youkuaiyun.com/m0_37631990/article/details/70594278</link><guid>https://blog.youkuaiyun.com/m0_37631990/article/details/70594278</guid><author>m0_37631990</author><pubDate>Mon, 24 Apr 2017 13:00:12 +0800</pubDate><description><![CDATA[webstrom 是我前端开发最喜欢的一个编译工具，因为它集成了许多的插件，安装后就可以在wenstorm中配置就可以轻松进行开发了。

今天想说的是webStorm下如何实现sass自动编译。ok，let's begin

打开settings，可以看到Tools下面有个file watchers选项，点进去如下图




点击加号，选择SCSS或者SASS(根据自己写的格式，]]></description><category></category></item></channel></rss>