标签 前端 下的文章

前言

今天有朋友问了 “KeyMirror” 这个库有什么用的问题,其实这个问题并不难,这里扫一下盲区。

会按照下面这个逻辑来展开,彻底理解一下:

  1. KeyMirror 有什么用?
  2. Google Closure Compiler 是什么?
  3. KeyMirror 解决了什么问题,好处是什么?
  4. KeyMirror 的源码是什么样子?
  5. 用 Gulp 配置一个压缩任务,测试一下 Google Closure Compiler.

- 阅读剩余部分 -

看到个好玩的~哈哈,小志前辈写的,原文地址

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Roller,✨✨</title>
    <style type="text/css" media="screen">
    div, input {
      margin: 0;
      padding: 0;
    }
    .demo {
        width: 100px;
        height: 20px;
        overflow: hidden;
    }
    
    .star_ctrl {
        float: left;
    }
    
    input {
        float: right;
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        border: 0 none;
        background: url(http://ww3.sinaimg.cn/large/006tNbRwgw1fa10606xkoj300k01fdfl.jpg) no-repeat 0 -32px;
        outline: 0 none;
        -webkit-transition: all 100ms linear;
    }
    
    input:checked,
    input:checked ~ input {
        background-position: 0 0;
    }

    .demo_2 input {
      float: left;
    }
    </style>
</head>

<body>
    <div class="demo demo_1">
        <div class="star_ctrl">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
        </div>
    </div>

    <div class="demo demo_2">
        <div class="star_ctrl">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
        </div>
    </div>
</body>

</html>

废话

==晚上失眠了,在网页上看到一个好玩的效果,自己模拟了一下,最开始用SVG写的。。。不多说了,简单记录一下思路和写法。

思路

先贴一下效果图,脑袋里面留下直观印象。录的效果可能不太好,大家可以用代码本地跑起来看真实的效果。

- 阅读剩余部分 -

一、web标准的重要性以及好处

  1. 可以交付到更多的用户代理,也就是可以更好的适应多种浏览网页的容器。
  2. 能够改善性能,也就是可以利用更少的代码实现相同的功能。
  3. 更能够适合浏览器,对于兼容早期浏览器作出的努力更少。
  4. 分离内容和表现。
  5. 能够构建流动式(自适应的)页面。
  6. 流水线式生产,可以让内容和表现的开发分开进行,并且能够无缝地衔接起来。
  7. 使内容具有可访问性。
  8. 减轻维护代码的负担。
  9. 代码可以更好的适应未来。
  10. ...

二、XHTML的理解

在学习XHTML前应该先学习XML的基础知识,这样XHTML理解起来更加容易。

- 阅读剩余部分 -