开启网页制作之旅

本篇博客主要要记录一些刚开始学习网页制作方面的常用的工具以及使用技巧。

---

使用koala软件来实现增强型css

官方链接http://koala-app.com/
简单说明：koala是一个前端预处理语言图形编译工具，支持less,sass.Compass.ConffeeScript。帮助web开发者更搞笑的使用他们进行开发。
开始使用：

1. 下载&安装

2. 简单配置

简单配置一下使其支持中文：到安装目录下：安装目录下\Koala\rubygems\gems\sass-3.4.9\lib\sass的engine.rb在其中添加代码：```Encoding.default_external = Encoding.find('utf-8')``即可。参考图：

Paste_Image.png

3. 开始使用，新建一个*.scss文件，拖拽到koala中。如图：

Paste_Image.png

拖拽到文件夹中之后，就可以之久编辑.scss文件了，语法同css+特殊的用法。完全支持css。直接写css代码也是可以的。写完之后，点击保存，会自动生成同名css文件。使用过程大概就是这样。下面介绍scss中的特殊写法。

4. 用法简记：

• 更加明显的分类：

  body{
    h1{
      background: #777777;
    }
    &:after{
      text-align: center;
    }
  }

其中的&代表当前元素。等价与css文件：

body h1 {
  background: #777777; }
body:after {
  text-align: center; }

• 定义变量名,普通的css文件是不可以定义变量的，当我们相同的属性值很多的时候，都需要的时候我们只能一个个的修改。而通过变量名来充当属性值就可以很方便的进行修改：

// 后面就可以用toolbar-size代表52px;
$toolbar-size:52px;
//使用示例：
  width: $toolbar-size;
  height: $toolbar-size;

转化呈css后的代码如下：

  width: 52px;
  height: 52px;

• 函数式编程。当我们发现有大量相同的css属性，只是值不同或者是适配的版本不同的时候，可以将其封装成一个函数，然后进行调用即可。

//类似函数，适配不同的浏览器
@mixin  transform-origin($origin){
  -webkit-transform-origin:$origin;
  -moz-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -o-transform-origin: $origin;
  transform-origin: $origin;
}
//进行调用
@include transform-origin(center);

转换成css文件后的代码如下：

 -webkit-transform-origin:center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;

暂时就看到上面的有用的，记录一下。

利用jquery.js导入require.js到工程中

首先给出jquery和requirejs的下载连接。至于为什么要用他们，这里就不赘述了。（我也不知道~）
开始使用：

1. 将下载他们的js文件并放置的工程文件中。

Paste_Image.png

2. 在html文件中body部分导入js文件，形如代码：

前面的js/require.js是require的路径，后面的data-main是requirejs的入口（类似于c语言中的main函数）。

3. 实现自己的方法（或者说是函数）.
   新建一个js文件，eg取名为main.js我们就在这里实现自己的函数。参考代码：

requirejs.config({
    paths:{
    jquery:'jquery.1.11.3.min'
    }
});
requirejs(['jquery'],function ($) {
    $('#backTop').on('click',move);
    $(window).on('scroll',function () {
        checkPosition($(window).height());
    });//这里是将jquery.1.11.3.min取一个别名jquery，方便书写

    checkPosition($(window).height());//实例1。直接在main中书写方法
    function move() {
        $('html,body').animate({
            scrollTop:0
        },800)
    }
    function checkPosition(pos){
        if($(window).scrollTop < pos){
            $('#backTop').fadeIn();
        }else{
            $('#backTop').fadeOut();
        }
    }
});
//eg2 新建其他的js文件进行调用
 requirejs(['jquery','validate'],function ($,validate) {
    // $('body').css('background-color','red');
     console.log(validate.checkLength(2));
 });
///validate.js的代码如下：
define(['jquery'],function ($) {//还是要找到jquery

    return {
  isEmpty:function () {

  },
  checkLength:function(str){//定义并实现方法
    return 100+str;
  }
};
});

---

先记录这么多~