创建圆角框有几种方法，每种方法各有优缺点，对这些方法的选择主要取决于实际情况。

固定宽度的圆角框

固定宽度的圆角框是最容易创建的，我们只需要两个图像分别用作顶部和底部的背景。

1
2
3
4
5
6

<h1>Simple, Fixed Rounded Corner Box</h1>
<div class="box">
  <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet</p>
</div>

用作背景的两张图片：

顶部
底部

将这两张图片作为顶部和底部的背景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box {
  width: 418px;
  background: #effce7 url("bottom.gif") no-repeat left bottom;
  padding-bottom: 1px;
}
.box h2 {
  background: url("top.gif") no-repeat left top;
  margin-top: 0;
  padding: 20px 20px 0 20px;
}
.box p {
  padding: 0 20px;
}

固定宽度的圆角框

本文是我在学习了慕课网教程：瀑布流布局后的学习笔记，具体代码见GitHub。

瀑布流布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

我们可以用多种方法实现瀑布流布局，如纯 JavaScript 方法实现，jQuery 方法以及使用 CSS3 实现。

网页结构与布局

先来看一下需要实现的效果。

可以看出图片之间等宽但不等高，相互之间有间隔，当页面滚动到底部时，加载更多的图片。

今天把我的博客从 Jekyll 转到了 Hexo 上，因为一直用的是 Windows系统，而在 Windows 系统下面安装Ruby和使用 Jekyll 的时候会出现各种奇怪的问题。虽然问题都在Google的帮助下解决了，但是也让我一直不敢修改博客主题，生怕一不小心解决了一个问题又多出来了几十个问题。

最终我决定改用 Hexo 来搭建我的博客。在 GitHub 上看了不少 Hexo 的主题后，发现了几个对我胃口的主题：

• yilia
• NexT
• Pacman

最终我决定使用yilia了。

一、安装Node.js和Hexo

关于安装的教程已经有很多了，不需要赘述，可以参考这些：

使用GitHub和Hexo搭建免费静态Blog
史上最详细的Hexo博客搭建图文教程

我这里就记录一下我遇到的问题。

JavaScript和HTML之间的交互是通过事件实现的。

事件：文档或浏览器窗口中发生的一些特定的交互瞬间。

可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。

1. 事件流

事件流：从页面中接收事件的顺序。

IE和Netscape开发团队提出了差不多是完全相反的事件流的概念。

IE: 事件冒泡流
Netscape： 事件捕获流

1.1 事件冒泡

事件冒泡（event bubbling）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

1.2 事件捕获

事件捕获（event capturing）:不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。

事件捕获的用意在于在事件到达预定目标之前捕获它。

提示框效果（tooltip）是常见的网页特效，它的功能是当用户将指针放置在控件上时为用户显示提示信息。

实现原理

我们将需要显示提示框的部分称为：tooltip 超链接。

当鼠标移动到 tooltip 超链接上时，首先判断是否存在与之对应的提示框元素，如果存在就将其显示；不存在的话就用JavaScript代码创建一个新的 DOM 元素，然后将新建的 DOM 元素附在原来的 tooltip 超链接元素后面。

每个ToolTip提示框都是一个 div 元素，新建 DOM 元素的格式是类似这样的：

1

<div class="tooltip" id="xx"> xxxxxx </div>

这里将用到两个函数：

1
2

document.createElement();   // 创建一个 HTML 元素
.appendChild();     // 添加元素

这是学习了慕课网教程后的学习笔记，最终结果如下：GitHub链接

分析界面结构

因为我们需要实现的是登录浮层，所以为了方便起见，直接将网页的其余部分作为一张背景图片展现出来。

整个登录对话框（dialog）分为两个大的部分，上部的标题（dialogTitle）和下部的内容部分（dialogContent）。当我们点击在标题部分时，将会触发相应的拖拽效果。

最近在试着用Three.js做一个简单的赛车游戏，里面有一个需要解决的问题是如何判断两个物体发生了碰撞，比如赛车是否碰上了障碍物或者获得了奖励物品。

示例

我找了一些资料，发现了两个示例程序：第一个示例、第二个示例。

以上两个程序都是用THREE.Raycaster类来解决问题的。

Raycaster类

Raycaster应该翻译为“光线投射”，顾名思义，就是投射出去的一束光线。

Raycaster的构造函数如下

Raycaster( origin, direction, near, far ) {

origin — 射线的起点向量。
direction — 射线的方向向量，应该归一化。
near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。
far — 所有返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

Three.js是一个很流行的3D JavaScript库。这里有一个three.js的入门教程，在浏览器窗口中画出星空。我按照教程重新实现了一遍，这里的这篇博客把教程大致翻译了一遍。我的demo。

变量

定义全局变量：

1
2
3
4
5
6
7
8
9
10
11

// three.js的主要部分
var camera, scene, renderer,
// 跟踪鼠标位置
mouseX = 0, mouseY = 0,
// 一个数组，用于存储我们的粒子
particles = [];
// 初始化
init();

CSS3提供了一些绘图和动画的功能，我们可以纯粹利用CSS3来画出一个在屏幕上旋转的立方体，demo戳这里。

立方体是由六个面组成的，每个面都是一个<div>元素。我们需要对每个面进行位置和方向的调整，才能组合显示成一个立方体。先来看看CSS3中使用的三维坐标系。

三维坐标系

这里的坐标系与立体几何中的坐标系有所不同。上图中，由左至右为x轴的正方向，而Y轴则是由上至下，Z轴由屏幕内指向屏幕外。

transform属性

transform属性用于向元素应用2D或3D转换，在绘制立方体的过程中用到了旋转和平移这两种。

平移

1
2
3

translateX(200px);    /*向X轴的正方向平移200像素，即从左向右移动*/
translateY(200px);    /*向Y轴的正方向平移200像素，即从上向下移动*/
translateZ(200px);    /*向Z轴的正方向平移200像素，即从屏幕内向外移动*/

Markdown用法

最初编辑时间：2015/3/22

参考网址：

Markdown——入门指南

Markdown中文维基百科

Markdown语法说明

Markdown 是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版。

换行

在文本中输入的换行会从最终生成的结果中删除，浏览器会根据可用空间自动换行。如果想强迫换行，可以在行尾插入至少两个空格。

标题

在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。

# 一级标题
## 二级标题
### 三级标题

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