发表于 | 分类于

CSS系列-2.CSS选择器

写在前面的话

本文包含选择器的其他应用包括画各种图形
为了就仅仅是展示CSS. 以后统一用如下html结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<!-- 告诉浏览器解析标准 -->
<html>
    <head>
        <!-- 告诉浏览器解析类型 -->
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <style>

        </style>
    </head>

    <body>

    </body>
</html>
阅读全文 »

发表于 | 分类于

CSS系列-1.引入CSS

CSS - 引入CSS

引入CSS的方法:

  1. @import引用方法

    1
    2
    3
    <style type="text/css" media="screen">
    @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css") all;
    </style>

  2. HTML中的引用方法

    1
    2
    3
    <head>
    <link rel = "stylesheet" type="text/css" href = ""your css url" />
    </head>

  3. 内联

    1
    <div style="width:600px;"></div>

  4. 在页面中直接写入样式

    1
    2
    <style>
    </style>
外部引入CSS的区别:
  1. 内联与其他两个有优先级关系.
  2. @import加载顺序是在link之后, 故后者可能会覆盖前者. 其他方面, @import的时候, 页面先加载, CSS出来的慢与link, 可能出现不好的体验.
  3. 如果用dom操作, 用JS操作dom的style, 只能用link去引用
  4. @import是CSS 2.1支持的, 一些老浏览器如IE5以下不支持
  5. link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，根据media改变, alternate stylesheet 备选, @import就只能加载CSS了.也可以media 控制
  6. 其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签
  7. 服务对象不一样, @import服务于css文件, link服务于html文件. 这么讲可能不直观..比如说你有10个页面, 每个页面都引用了10个css文件..那么用link一个个写会变得很冗长, 所以可以只引用一个css, 这个css中@import了其余的css.
内部引入CSS的区别:

style标签写在head里面 or 外面?
写在head里面先加载

新增scoped, 只在包含块内生效

upload successful

发表于 | 分类于

设计模式系列-2.构造函数模式

强制执行构造函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Car = function(name, price){
   if(!(this instanceof Car)){ // 防止无限循环
       return new Car(name, price);
   }
   this.name = name;
   this.price = price;
}

Car.prototype.getInfo = function(){
   return this.name + ': ' + this.price;
}

console.log(new Car('voe', 23333);.getInfo());
console.log(Car('ssss', 12312).getInfo());
其实这真的是JS中无处不在的设计模式
1
2
3
var s = new String('Hello world');
var n = new Number(1);
var b = new Boolean(true);

延伸考题 new String() 和直接定义真的一样吗

包装函数可以加属性进去

1
2
s.var_1 = 'var a';
console.log(s.var_1);

原始类型不行, 怎么定义都是undefined

1
2
3
var string = 'abc';
string.aa = 'bcd';
console.log(string.aa); // undefined

发表于 | 分类于

设计模式系列-1.单例模式

为什么要强调设计模式..太重要了这玩意..有的时候反思我为什么看不懂大神写的代码..一方面就是不懂设计模式..或者反应不出来这玩意到底是什么设计模式

阅读全文 »