发表于 | 分类于 |

CSS3新特性

1.CSS3选择器

属性选择器：

  • E[attr] 只要有属性名
  • E[attr=value] 属性名=属性值
  • E[attr~=blue] 包含这个blue整个单词就可以
  • E[attr^=c] 以这个字母c开头的
  • E[attr$=b] 以这个字母b结尾的
  • E[attr*=a] 只要包含a这个字母就行
  • E[attr|=z] 只要以字母z-开头的或者就是字母z的

结构性伪类选择器：

  • E:nth-child(n) 第n个子节点
  • div:nth-child(odd) 奇数行
  • div:nth-child(even) 偶数行
  • div:nth-child(2n) 2的倍数
  • E:nth-last-child(n) 倒数第n个

其他：

  • E:empty 空元素
  • E:first-child 第一个子节点、和 E:nth-child(1)等价
  • E:last-child 倒数第一个、和 E:nth-last-child(1)等价
    • 注意不能有其他兄弟节点
  • E:target 锚点元素的样式
  • div:target{width:100px;}
  • 只要锚点有#div1那上面的target样式就会生效
  • E:disabled 表单元素设置disabled
  • E:enabled 可点击的表单元素
  • E:checked 表示已经选中的checkbox或者radio
  • 文本新增伪类：
  • E:first-line 第一行
  • E:first-letter 第一个字
  • E::selection 选中文本的时候
  • E::before E标签前面添加东西,需要配合content来用
  • E::after E标签后面添加东西
  • E:before E:after单引号也能用
  • E:not(s) 不包括s
  • h1:not(.red) 排除有class为red的h1元素
  • E~F E后面的F兄弟节点
    阅读全文 »

发表于 | 分类于 |

1.WebSocket 前世今生

众所周知，Web应用的交互过程通常是客户端通过浏览器发出一个请求，服务器端接收请求后进行处理并返回结果给客户端，客户端浏览器将信息呈现。

这种机制对于信息变化不是特别频繁的应用尚可，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在当前业界移动互联网蓬勃发展的趋势下，高并发与用户实时响应是 Web 应用经常面临的问题，比如金融证券的实时信息，Web 导航应用中的地理位置获取，社交网络的实时消息推送等。

传统的请求-响应模式的Web开发在处理此类业务场景时，通常采用实时通讯方案，常见的是：

  • 轮询，原理简单易懂，就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求，来保持客户端和服务器端的数据同步。问题很明显，当客户端以固定频率向服务器端发送请求时，服务器端的数据可能并没有更新，带来很多无谓请求，浪费带宽，效率低下。
  • 基于 Flash，AdobeFlash 通过自己的 Socket 实现完成数据交换，再利用Flash暴露出相应的接口为 JavaScript 调用，从而达到实时传输目的。此方式比轮询要高效，且因为Flash安装率高，应用场景比较广泛，但在移动互联网终端上 Flash的支持并不好。IOS 系统中没有 Flash 的存在，在 Android 中虽然有 Flash 的支持，但实际的使用效果差强人意，且对移动设备的硬件配置要求较高。2012年Adobe官方宣布不再支持 Android4.1+系统，宣告了Flash在移动终端上的死亡。

从上文可以看出，传统Web模式在处理高并发及实时性需求的时候，会遇到难以逾越的瓶颈，我们需要一种高效节能的双向通信机制来保证数据的实时传输。在此背景下，基于 HTML5 规范的、有 Web TCP 之称的 WebSocket 应运而生。

阅读全文 »

发表于 | 分类于 |

理解观察者模式：

什么是观察者模式？

观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，同时观察者通过订阅这些事件来观察该主体，发布者和订阅者是完全解耦的，彼此不知道对方的存在，两者仅仅共享一个自定义事件的名称。

阅读全文 »

发表于 | 分类于 |

Task8:响应式网格（栅格化）

1.目标：

使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。

2.参考链接

Creating Your Own CSS Grid System

栅格化设计：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 07</title>
    <style type="text/css">
     *{margin: 0px;padding: 0px;}
      
      /*-- http://j4n.co/blog/Creating-your-own-css-grid-system  栅格化设计-- */ 
      /*-- The Container -- */ 
      .grid-container{
          width: 100%; 
          max-width: 1200px;   
      }
      /*-- The Row -- */ 
      /*-- our cleafix hack -- */ 
      .row:before, 
      .row:after {
          content:"";
          display: table ;
          clear:both;
      }
       
      /*-- The Column , Column Positioning , Column Widths , Column Gutters -- */ 
      .grid-container *{
          box-sizing: border-box;  /*-- setting border box on all elements inside the grid --*/
      }
      
      [class*='col-'] { /* a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。*/
          float: left; 
          min-height: 1px; 
          width: 16.66%; 
          /*-- Column gutter -- */
          padding: 12px; 
          background-color: #FFDCDC;
      }
      .col-1{ width: 16.66%; }
      .col-2{ width: 33.33%; }
      .col-3{ width: 50%;    }
      .col-4{ width: 66.66%; }
      .col-5{ width: 83.33%; }
      .col-6{ width: 100%;   }
      .outline, .outline *{
          outline: 1px solid #F6A1A1; 
      }
      /*-- some extra column content styling --*/
      [class*='col-'] > p {
       background-color: #FFC2C2; 
       padding: 0;
       margin: 0;
       text-align: center; 
       color: white; 
      }
    </style>
  </head>
<body>
    <div class="grid-container outline">
        <div class="row">
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
            <div class="col-1"><p>col-1</p></div> 
        </div> 
        <div class="row">
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
            <div class="col-2"><p>col-2</p></div> 
        </div> 
        <div class="row">
            <div class="col-3"><p>col-3</p></div> 
            <div class="col-3"><p>col-3</p></div> 
        </div> 
    </div>
</body>
</html>

阅读全文 »

发表于 | 分类于 |

Task3:三栏式布局

1.三栏式布局方法

方法一：inline-block方法

1
2
3
4
left,center,right{ display：inline-block} /* 包裹作用，不会塌陷 */ 
left{width:200px}
right{width:120px}
center{width:calc(100%-200px-120px-40px)} /* 动态计算中间盒子的宽度 */

方法二：float布局

1
2
3
4
5
6
7
<div class="left">
<div class="right">  /* 这里将right提到center前面 */
<div class="center">
.left{float:left}
.center{ margin-left: 220px; margin-right: 140px; }
.right{float: right;}

方法三：Flex布局（新）

1
2
3
4
5
6
7
8
.middle{display: flex;}
.left,.right{width: 100px;}
.right{order: 2;}
.main{
    order: 1;
    flex: 1; /*让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容*/ 
    margin: 0 20px;
}

阅读全文 »

发表于 | 分类于 |

Task1:零基础HTML编码

1.新标签

  在学习html5的过程中，知道了一些新的标签，能够更清晰的表达文档的结构（原来都是用div，可能加上id或者class来划分）。

  • header 页面头部／标题／logo／搜索表单 等等
  • nav 任何有导航性质的标签都可以用到，比如页面中的导航，可以有多个
  • aside 和主要内容不相关的内容，工具内容／广告什么的
  • article 表示独立的可重复的结构：论坛的帖子／博客的评论
  • section 表示文档中的一个区域：一般会带一个标题　相临的section之间是有相关性的，article则不相关，是独立的
  • footer 章节的尾部：版权信息／相关文档／一些独立内容的尾部也可以用到
阅读全文 »

发表于 | 分类于 |

1.标题

  标题是每篇文章都需要也是最常用的格式，在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。

1
2
3
# 一级标题
### 三级标题
#### 四级标题

以此类推，总共六级标题，建议在井号后加一个空格，这是最标准的 Markdown 语法。

阅读全文 »

发表于 |

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment