<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zuncle的博客]]></title><description><![CDATA[我不是一个好程序猿，但我却是一个好老公。]]></description><link>https://blog.youkuaiyun.com/zuncle</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zuncle]]></copyright><item><title><![CDATA[【技巧】LESS CSS 框架简介]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/73089217</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/73089217</guid><author>zuncle</author><pubDate>Mon, 12 Jun 2017 11:45:24 +0800</pubDate><description><![CDATA[LESS 原理及使用方式本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：清单 1. LESS 文件@color: #4D926F; 
#heade]]></description><category></category></item><item><title><![CDATA[【技巧】当屏幕宽度更换时变换调用css]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72846588</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72846588</guid><author>zuncle</author><pubDate>Fri, 02 Jun 2017 17:50:55 +0800</pubDate><description><![CDATA[HTML代码如下：<div class="abc"></div>JS代码如下：<script>
    $(function(){
        $(window).resize(function() {
            var ww = $(window).width();
            if( ww > 1000 ){
                $('abc').rem]]></description><category></category></item><item><title><![CDATA[【技巧】font-size:0清除display:inline-block元素换行符间隙]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72820905</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72820905</guid><author>zuncle</author><pubDate>Wed, 31 May 2017 15:49:45 +0800</pubDate><description><![CDATA[看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：HTML代码如下：<div class="abc">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>CSS代码如下：.abc{
  width: 9]]></description><category></category></item><item><title><![CDATA[【CSS3】纯css3悬停文字线条边框动画特效]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72673772</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72673772</guid><author>zuncle</author><pubDate>Wed, 24 May 2017 10:15:25 +0800</pubDate><description><![CDATA[演示效果如下：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮悬停动画</title><style>
html, body {
  color: white;
  background: #323232;
  font-weight: lighter;
}h1, h2, h3, h4 {
  font-family: "Os]]></description><category></category></item><item><title><![CDATA[【JS】可多次使用的jQuery tab选项卡]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72628008</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72628008</guid><author>zuncle</author><pubDate>Mon, 22 May 2017 17:08:55 +0800</pubDate><description><![CDATA[不多说了，看下面的代码吧！<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可多次使用的jQuery tab选项卡代码</title>
    <style type="text/css">
        /*通用样式*]]></description><category></category></item><item><title><![CDATA[【CSS】实现单行、多行文本溢出显示省略号（…）]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72357397</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72357397</guid><author>zuncle</author><pubDate>Wed, 17 May 2017 10:31:15 +0800</pubDate><description><![CDATA[如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出]]></description><category></category></item><item><title><![CDATA[【CSS3】浏览器前缀兼容写法]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/72315891</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/72315891</guid><author>zuncle</author><pubDate>Tue, 16 May 2017 17:35:23 +0800</pubDate><description><![CDATA[Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的C]]></description><category></category></item><item><title><![CDATA[CSS文字左右两横线效果]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/71159105</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/71159105</guid><author>zuncle</author><pubDate>Thu, 04 May 2017 10:54:09 +0800</pubDate><description><![CDATA[演示效果：点我效果一：<style type="text/css" media="screen">
#login_frame .with-line {
    width:300px;font-size: 16px;
    color: #999;
    margin: 0 auto;
    position: relative;
    text-align: center
}#login_]]></description><category></category></item><item><title><![CDATA[css字体大小设置em与rem的区别]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/70811658</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/70811658</guid><author>zuncle</author><pubDate>Wed, 26 Apr 2017 17:58:03 +0800</pubDate><description><![CDATA[em单位em是相对于父元素的，如果父元素没有设置字体大小，那就会追溯到body。比如如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元素box 的28px取代 rem 
 在说rem,因为他是相对于跟元素（html）,所以如果用rem，body里面写任何字体大小都没效果，只能写html在中，比如  
 设置了REM之后，字体大小只看html{}中]]></description><category></category></item><item><title><![CDATA[【问题&解决】fonts/fontawesome-webfont.woff2 404 (Not Found)]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/70608900</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/70608900</guid><author>zuncle</author><pubDate>Mon, 24 Apr 2017 16:59:26 +0800</pubDate><description><![CDATA[问题：虽然网页正常显示和运行，但是有2个字体文件出现404错误。像笔者这种强迫症是接受不了的。解决：因为笔者的服务器是虚拟主机，只需要在主机控制器平台添加对应的MIME类型即可。这样服务器就支持这两种字体文件，不会报错了。参考的解决方案文章全文如下：来源：http://www.yneit.com/2016/06/fontsfontawesome-webfont-woff2-404-not-found]]></description><category></category></item><item><title><![CDATA[【原创】登录和注册页推荐 尊重原创 记得点赞]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/70208974</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/70208974</guid><author>zuncle</author><pubDate>Mon, 17 Apr 2017 11:56:32 +0800</pubDate><description><![CDATA[像小编这样一个比较少动脑筋的人，如果让我设计什么登录或者注册页恐怕要想半天，于是就想到了借鉴别人的设计来改改就是一个作品，下面看内容吧！登录页：1、http://gyl.zyred.com/（背景的云层会动-图片加了定时器）2、http://sso.corp.273.cn/（简单又不简单）3、http://vrm.dangdang.com/（当当网供应商服务平台）4、http://vbooking.]]></description><category></category></item><item><title><![CDATA[SweetAlert – 替代 Alert 的漂亮的提示效果]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/70174502</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/70174502</guid><author>zuncle</author><pubDate>Fri, 14 Apr 2017 17:24:06 +0800</pubDate><description><![CDATA[Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央，不管您使用的是台式电脑，手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择，可以灵活控制。SweetAlert – 替代 Alert 的漂亮的提示效果在线演示      插件下载]]></description><category></category></item><item><title><![CDATA[【CSS3】多款炫酷鼠标悬停图文动画效果]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62892376</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62892376</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 17:24:46 +0800</pubDate><description><![CDATA[演示效果：HTML代码如下：<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-widt]]></description><category></category></item><item><title><![CDATA[【技巧】用console.table()调试javascript]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62890859</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62890859</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 16:25:30 +0800</pubDate><description><![CDATA[演示效果：昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer） 介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。用CONSOLE.LOG()展示数组想象下你构造了如下数组var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{]]></description><category></category></item><item><title><![CDATA[【CSS3】使用:not(:last-of-type)简化你的css代码]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62889568</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62889568</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 15:50:05 +0800</pubDate><description><![CDATA[演示效果：第三个标题没有下边框以前写代码是这样：<style>
.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}
.post:last-child {]]></description><category></category></item><item><title><![CDATA[【CSS3】用纯CSS实现加载中动画效果]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62889170</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62889170</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 15:33:08 +0800</pubDate><description><![CDATA[演示效果：HTML代码：<div class="pswp__preloader__icn">
  <div class="pswp__preloader__cut">
    <div class="pswp__preloader__donut"></div>
  </div>
</div>CSS代码：body{background:#fff;}
.pswp__preloader__icn {]]></description><category></category></item><item><title><![CDATA[【CSS3】8款好看的纯CSS3搜索框]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62888725</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62888725</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 15:14:08 +0800</pubDate><description><![CDATA[演示效果：全部代码如下：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8款纯CSS3搜索框</title>    <link href="ht]]></description><category></category></item><item><title><![CDATA[【技巧】css loading 加载中动画特效39种]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62887308</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62887308</guid><author>zuncle</author><pubDate>Fri, 17 Mar 2017 14:14:17 +0800</pubDate><description><![CDATA[演示效果如下图： 
 
HTML代码如下：<h1>
  CSS LOADERS
</h1>
<div class="box">
  loader-01
  <div class="loader-01">
  </div>
</div>
<div class="box">
  loader-02
  <div class="loader-02">
  </div>
</div>
<div class=]]></description><category></category></item><item><title><![CDATA[【技巧】鼠标移入图片各种酷炫效果]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62429590</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62429590</guid><author>zuncle</author><pubDate>Thu, 16 Mar 2017 17:42:11 +0800</pubDate><description><![CDATA[先看效果：HTML代码如下：<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id="mainwrap]]></description><category></category></item><item><title><![CDATA[【技巧】Bootstrap3表格之实战]]></title><link>https://blog.youkuaiyun.com/zuncle/article/details/62426095</link><guid>https://blog.youkuaiyun.com/zuncle/article/details/62426095</guid><author>zuncle</author><pubDate>Thu, 16 Mar 2017 16:24:18 +0800</pubDate><description><![CDATA[先来看效果：全部代码在下面：<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="in]]></description><category></category></item></channel></rss>