Articles in the Web category

  1. RequireJS使用笔记

    RequireJS的项目地址在:http://requirejs.org/

    RequireJS常用的方法: 1. requirejs.config 给模块指定别名 2. requirejs 引入模块 3. define 编写模块

    入口文件

       <script src="js/require.js" type="text/javascript" data-main="js/main"></script>
    

    requirejs加载完之后,立即引入的文件由data-main来定义。这里文件为js/main.js

    我们创建的main.js如下:

    //定义别名
    requirejs.config({
        paths:{
            jquery: 'jquery-1.11.3.min'
        }
    })
    //引用模块
    requirejs(['jquery ...
  2. CSS3扁平化风格博客

    1. 页面整体分析

    做一个网页或者网站,第一步就是先定义网页与网站的结构,这是所有任务的前提。


    2 准备工作

    在这个案例中,我们将使用Gulp, SASS和Compass来创建。

    2.1 安装Gulp

    Gulp是为了后期进行自动化工作而做的。

    • 如果电脑没有安装node,那么第一步就是下载node,并且安装。
    • 安装http-server来查看网页: npm install -g http-server
    • 全局安装gulp:sudo npm install -g gulp
    • 初始化项目:npm init
    • 安装gulp及常用库
    npm install gulp --save-dev
    npm install gulp-concat --save-dev
    npm install gulp-uglify --save-dev
    npm install gulp-rename --save-dev
    npm install ...
    Tagged as : CSS3
  3. Gulp笔记

    1. 准备工作

    • 安装nodejs
    • 安装http-server: npm install -g http-server
    • 初始化项目:npm init
    • 安装gulp: npm install gulp --save-dev 安装到依赖中

    2. 第一个Gulp Task

    创建一个gulpfile.js,gulp会自动发现这个文件。

    'use strict'; //使用严格的编译方法
    
    var gulp = require('gulp');
    
    //定义task,第一个参数是任务名
    gulp.task("hello", function(){
      console.log("Hello");
    })
    

    运行任务:

    $ gulp hello
    [09:40:32] Using gulpfile G:\git ...
    Tagged as : Gulp
  4. JS笔记-变量与对象

    1. 变量声明

    var a = a || 7; //如果a有值(严格来说是某个可以被转换为true的值),就直接使用,否则把7赋值给a
    

    对比,下面的代码在变量b声明的情况下是对的,如果没有声明,就会引起ReferenceError异常。

    var a = b || 7; //可能引起ReferenceError异常的危险代码
    

    2. 对象是否存在检验

    //第一种方法
    var a = a || 7;
    
    //第二种方法
    var a;
    var b = a || 7;
    
    //第三种方法(根据第二种改进)
    var a;
    var b = a !== undefined ? a : 7;
    
    //第四种方法
    if(typeof a !== 'undefined'){
        var b ...
    Tagged as : JavaScript
  5. CSS3笔记03-变形transform

    1. 缩放scale

    transform:scale(1.2);
    

    transform-origin:缩放开始位置

    transform-origin: bottom left;
    

    2. box-shadow 阴影

    用法同text-shadow

    3. 旋转rotate

    transform:scale(1.2)rotate(-10deg)
    

    4. 倾斜skew

    transform:scale(1.2)skew(-5deg, 30deg);
    

    skew的参数分别是x坐标角度和y坐标角度,也可以给相同的角度skew(30deg)

    5. 平移translate

    transform:scale(1.2)translate(20px, 40px ...
    Tagged as : css3 compass sass
  6. CSS3笔记02-悬停效果

    1. 首先需要了解几个伪类:

    • :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式;
    • :active选择器:当所指定的元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式;
    • :focus选择器:当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用.

    2. rgba

    color: #eee;
    color: rgba(255, 255, 255, 0.7);
    

    rgba增加了透明度,在上面例子中多添加一个color:#eee;是为了使不支持rgba的浏览器仍然有color可用。

    3. 文本阴影(text-shadow)

    a{
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    }
    

    text-shadow的属性如下:

    text-shadow: h-shadow v-shadow blur color ...
    Tagged as : css3 compass sass
  7. CSS3笔记01-过渡transition

    使用compass:

    @import "compass/css3/transition";
    div.foo{
        width: 50px;
        padding: 5px 10px;
        background: #9f3;
        @include transition-property(background, width);
        @include transition-duration(0.5s);
        @include transition-timing-function(ease-in);
    }
    
    div.foo:hover{
        background: #690;
        width: 100px;
    }
    

    对应的css3:

    div.foo {
      width: 50px;
      padding: 5px 10px ...
    Tagged as : css3 compass sass
  8. JS补遗-数据处理篇

    String转JSON

    var arr_from_json = JSON.parse( json_string );
    

    也可以使用json2.js

    值转JSON字符串

    JSON.stringify()
    

    把值转化为JSON字符串 详细说明:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

    Tagged as : JavaScript

Page 2 / 5