《深入浅出ES6》读书笔记1

发表于 2018-06-06 | 分类于读书笔记，深入浅出ES6

:warning:表示ES5和ES6的区别

:seven:表示ES7中的内容

第一章块级绑定

:warning:ES5:存在变量出现undefiend的变量提升、不存在块级声明

let和const的重大区别：
- 试图对之前用const声明的常量进行赋值会抛出错误。但是const声明的对象可以修改，因为const阻止的是对于变量绑定的修改，不是对其中成员值的修改
- let 可以在循环内工作，也可以在for-in和for-of内工作
- const不可以在循环内工作（这是修改const声明的变量），但可以在for-in和for-of中中作（这是对变量的修改）

第二章，字符串与正则表达式

unicode方法

UTF-16中引入代理对解决超出范围代码点表示方法问题，允许使用两个16位码元来表示单个代码点，即用4个字节储存。

:warning:ES5对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符）会认为它们是两个字符。

ES5与unicode相关的方法：
- charAt() 方法可返回指定位置的字符
- charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
- String.fromCharCode方法，用于从码点返回对应字符
at()方法：对应原本的charAt() 方法
codePointAt()方法：对应原来的charCodeAt()方法。可以用于检测一个字符由两个字节还是4个字节组成
1
2
3
function is32Bit(c) {
return c.codePointAt(0) > 0xFFFF;
}
String.fromCodePoint()方法：对应原来的String.fromCharCode方法

子字符串方法

:warning:只有indexOf方法，可以用来确定一个字符串在另一个字符串中具体位置。

ES6新增如下方法
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
- Repeat()：方法返回一个新字符串，表示将原字符串重复n次。

:seven:ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

模板字面量

:warning:改变ES5字符串换行的方式，ES6可以直接包含换行和缩进

正则表达式

:warning:ES5中正则表达式只匹配码元。ES6中引入u标志，即正则表达式会匹配字符而不是码元。

y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始。y修饰符的一个应用，是从字符串提取 token

:warning:在ES5中var regex = new RegExp(/xyz/, 'i');不行，在ES6中可行。

第三章函数

:warning:ES5中给函数参数指定默认值，需要typeof "undefined"，ES6规定了指定默认参数的方式

:warning:ES5非严格模式下，arguments总是会被更新以反映出具名参数的变化，但在严格模式下，不再会反映出具名参数的变化。ES6则和ES5的严格模式一样。

:warning: ES5中的不具名参数操作起来很麻烦，ES6引入rest参数。

:warning:ES5判断函数是不是使用了new来调用，最流行的方式是使用instanceof。但是在var notAPerson=Person.call(person,"Mike")的情况下，无法分辨。ES6引入new.target元属性。

:warning:ES5中在代码块内部函数声明会出现错误，但是ES6中不会

:warning:ES5中尾部调用是一个新的栈帧被创建并推到调用栈智商，用于表示该次函数调用。ES6中用优化会清除当前帧栈并再次利用它，而不是为尾调用创建新的栈帧。

第四章扩展的对象功能

:warning:ES5对象字面量不能有重复属性，但是ES6可以有重复属性，值以最后一个为准

:warning: ES5避免创建新的全局函数，避免在object对象的原型上添加新方法，而是尝试寻找哪些对象应该被添加新方法。ES6提出Object.assign()

:warning:ES5对象的原型在初始化完成后会保持不变，但是ES6通过添加Object.setPrototypeOf()方法改变指定对象的原型。

ES6引入super，是当前对象的原型的一个指针，实际上就是object.getPrototypeOf(this)的值
当有多重继承的时候，object.getPrototypeOf(this)会只想上一级原型，而super会指向最上层的原型

第五章解构：更方便的数据访问

在使用var、let、const进行数组解构时，必须提供初始化器

:warning:ES5中交换变量需要用到第三个变量，但是在ES6中只需要[a,b]=[b,a]

在ES5中clone数组一般用concat()，在ES6可以使用剩余项语法let[...clonedColors]=colors

第六章符号与符号属性

Symbol()：创建符号值
Smybol.for()：创建共享符号值
Symbol.keyFor()：在全局符号注册表中根据符号值搜索出对应的键值
Symbol.hasInstance():判断指定对象是否为本函数的一个实例
Symbol.isConcatSpreadable()：指示对象被添加到数组时应该适用分离的属性值

:warning:ES5想要识别目标对象到底是什么类型的时候，此时对象已经在环境之间经历了传递，就无法正确识别出类型，需要通过以下方式正确识别。

1
2
3

function isArray(value){
    return Object.prototype.toString.call(value)==="[object Array]";
}

在ES6中，Symbol.toStringTag():代表了所有对象的一种属性，定义object.prototype.toString.call()被调用时应该返回什么值。

Symbol.unscopables（）：在Array.prototype上使用，指定哪些属性不孕育在with语句内被绑定。因为ES6添加了values方法，导致with语句内部的values并不会指向局部变量values，而是回想数组的values方法。

第七章 Set和Map

⚠️ES5中使用对象属性模拟Set和Map，会有以下问题：

键有可能会被转换为相同的字符串
在需要布尔值的地方，0也会被转换为false

React文档学习(3)

发表于 2018-06-06 | 分类于学习记录， React

React文档学习(3)

高级指南下半部分

Fragments

可以让你将子元素列表添加到一个分组中，并且不会在DOM中增加额外节点。
key 是唯一可以传递给 Fragment 的属性。<React.Fragment key={item.id}></React.Fragment>

Portals

Portals 提供了一种很好的方法，将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点。
ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或片段(fragment)。第二个参数（container）则是一个 DOM 元素。
一个从 portal 内部会触发的事件会一直冒泡至包含 React tree 的祖先。

Error Boundaries

错误边界是 React 组件，它可以在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。
错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

错误边界(Error Boundaries) 仅可以捕获其子组件的错误。

// error 是被抛出的错误。
// info 是一个含有 componentStack 属性的对象。这一属性包含了错误期间关于组件的堆栈信息。
componentDidCatch(error, info) {
  logComponentStackToMyService(info.componentStack);
}

自 React 16 开始，任何未被错误边界捕获的错误将会卸载整个 React 组件树。
错误边界无法捕获如下错误:
- 事件处理
- 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
- 服务端渲染
- 错误边界自身抛出来的错误（而不是其子组件）

Web组件

Web组件为可重用组件提供了强大的封装能力，而React则是提供了保持DOM和数据同步的声明式库。二者目标互补。

高阶组件

高阶组件是一个函数，能够接受一个组件并返回一个新的组件。
高阶组件不能修改原始组件，而是要将输入组件包裹在容器组件中

高阶组件应该通过props传递那些与特定功能无关的特性。

render() {
  // 过滤掉与高阶函数功能相关的props属性，
  // 不再传递
  const { extraProp, ...passThroughProps } = this.props;

  // 向包裹组件注入props属性，一般都是高阶组件的state状态
  // 或实例方法
  const injectedProp = someStateOrInstanceMethod;

  // 向包裹组件传递props属性
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}

使用高阶组件的注意点
1. 不要在render函数中使用高阶组件
2. 静态方法必须复制
3. Refs不会被传递

代码拆分

打包工具非常强大，但是随着你的应用的增长，你的包文件也会增长。为了避免生成一个很大的包文件，最好开始拆分你的包文件。
代码拆分你的应用程序可以帮助你 “懒加载(lazy-load)” 用户当前需要的东西，这可以显着提高您的应用程序的性能。

React文档学习(1)

发表于 2018-06-05 | 分类于学习记录， React

React文档学习(1)

从去年10月开始使用react，在使用过程中一直不断地更新自己对react的认知，发现很多东西是之前看文档没有注意到的。现在再看一遍文档，用于解答一些自己在项目中的疑惑。
基础篇

函数式组件和类组件

定义组件方式1：JS函数

1
2
3

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

定义组件的方式2：ES6的class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

异步更新State

为了优化性能，有可能会将多个 setState() 调用合并为一次更新。接收一个函数，而不是一个对象。

// 	写法1：es6箭头函数
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
// 写法2：常规函数
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

处理事件

this指向的问题

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 这个绑定是必要的，使`this`在回调中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

以下两种方法可以不用绑定

方法1：属性初始化语法

class LoggingButton extends React.Component {
  // 这个语法确保 `this` 绑定在 handleClick 中。
  // 警告：这是 *实验性的* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

方法2：在回调中使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 这个语法确保 `this` 被绑定在 handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

条件渲染

防止组件渲染

function WaringBanner(props){
    if(!props.warn){
        return null;
    }
}

List和Keys

一个好的经验准则是元素中调用 map() 需要 keys 。
在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。

表单

file input标签

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(
      this
    );
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.files[0].name
      }`
    );
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input
            type="file"
            ref={input => {
              this.fileInput = input;
            }}
          />
        </label>
        <br />
        <button type="submit">
          Submit
        </button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

状态提升

状态提升：同一个数据的变化需要几个不同的组件来反映。我们建议提升共享的状态到它们最近的祖先组件中。

将组件中原本的state改成props，将原本的setState方法改成props传入的方法

handleChange=(e)=> {
    this.props.onTemperatureChange(e.target.value);
  }
<input onChange={this.handleChange} />

在xm项目首页编写应用的组件中，需要在点击组件后，跳到不同的页面

// 原本
homeSource = (e) => {
    e.preventDefault();
    this.props.homeSource(this.props.sourceType);
  }
<Button onClick={this.homeSource}></Button>
// 也可以这样写
homeSource = (e, sourceType) => {
    e.preventDefault();
    this.props.homeSource(sourceType);
  }
 <Button onClick={e => this.homeSource(e, this.props.sourceType)}></Button>

组件元素也是可以作为props进行传递

React编程思想

对于数据，判断应该是state和props的关键点：
1. 是否通过 props(属性) 从父级传入？如果是这样，它可能不是 state(状态) 。
2. 是否永远不会发生变化？如果是这样，它可能不是 state(状态)。
3. 是否可以由组件中其他的 state(状态) 或 props(属性) 计算得出？如果是这样，则它不是 state(状态)。

React文档学习(2)

发表于 2018-06-05 | 分类于学习记录， React

React文档学习(2)

高级指南上半部分

深入JSX

在运行时选择类型

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正确！JSX 类型可以是一个以大写字母开头的变量.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

对 JSX 类型使用点语法

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

在xm项目中，写了很多{条件？<div></div>：<div></div>}这样的大量代码，其实可以写成点语法

JSX中的Children

Functions(函数) 作为 Children(子元素): props.children的值可以是回调函数：

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i)); // i会被作为index传入
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

使用PropTypes进行类型检查

要求单独的 Child

使用 PropTypes.element ，你可以指定仅将单一子元素传递给组件，作为子节点

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // 这里必须是一个元素，否则会发出警告。
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}
MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

静态类型检查

Flow 是一个针对 JavaScript 代码的静态类型检查器。它是在Facebook开发的，经常和React一起使用。它可以让你使用特殊的类型语法来注释变量，函数和React组件，并尽早地发现错误。
TypeScript 是一门由微软开发的编程语言。它是 JavaScript 的一个类型超集，包含它自己的编译器。作为一种类型化语言，Typescript 可以早在您的应用程序上线之前在构建时发现错误和错误。

Refs和DOM

添加Ref

Refs用于在常规数据流外强制修改子元素。被修改的子元素可以是 React 组件实例，或者是一个 DOM 元素。

什么时候使用 refs 的场景:

处理focus、文本选择或者媒体播放
触发强制动画
集成第三方DOM库

ref 属性接受回调函数，并且当组件装载(mounted) 或者卸载(unmounted) 之后，回调函数会立即执行。
React 组件在加载时将 DOM 元素拥有一个current属性，在卸载时则会传入 null。在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行 ref 回调。

创建Refs

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

可以在dom元素和类组件上天界Ref，不能在函数式组件上使用 ref 属性，可以在函数式组件内部使用 ref来引用一个 DOM 元素或者类(class)组件

对父组件暴露DOM节点

从父组件访问子节点的 DOM 节点的途径

适用于类组件和函数式组件。

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

不受控组件

受控组件，表单数据由React组件负责处理
不受控组件，表单数据由DOM元素本身处理

优化性能

可以通过重写生命周期函数 shouldComponentUpdate(nextProps,nextState) 来优化性能。
继承React.PureComponent就不需要手动写shouldComponentUpdate，但是React.PureComponent仅仅会进行浅比较，所以如果 props 或者 state 可能会导致浅比较失败的情况下就不能使用 React.PureComponent 了。

不可变数据

避免浅比较失败的方法是不要突变props或者state的值：

方法1：使用…或者Object.assign({}

// 向数组添加内容
handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};
// 更改对象的值
function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

方法2：使用 Immutable 数据结构

Immutable提供了通过结构共享实现(Structural Sharing)的、不可变的(Immutable)、原来集合在新集合创建之后仍然可用。

// 原本方法，x会因为y的变动而改变
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 新的方法
const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
const z = x.set('foo', 'bar');
x === y; // false
x === z; // true

不使用ES6

mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上，注意这个继承还是有区别的。js是一种只支持单继承的语言，毕竟一个对象只有一个原型，如果想实现多继承，那就简单暴力的把需要继承的父类的所有属性都拷贝到子类上，就是使用mixin。
ES6不支持mixin，createReactClass可以允许使用 mixins 。

一致性比较

无论什么时候，当根元素类型不同时，React 将会销毁原先的树并重写构建新的树。
keys 应该是稳定的、可预测的并且是唯一的。不稳定的 key (类似于 Math.random() 函数的结果)可能会产生非常多的组件实例并且 DOM 节点也会非必要性的重新创建。这将会造成极大的性能损失和组件内state的丢失。

故在项目中采用拼接字符串的形式，而不是random来做

Context

getChildContext()和childContextTypes将方法或者变量写成全局的，子树中的任务组件都可以通过定义contextTypes访问到
如果 contextTypes 在组件中定义，下列的生命周期方法将接受一个额外的参数——context 对象
如果 contextTypes 作为函数的属性被定义,无状态的函数式组件也可以引用 context

Context更新而其组件不更新

API上不建议Context进行更新。
网上查找的博文连接https://blog.csdn.net/liangklfang/article/details/72782920

class ThemeProvider extends React.Component {
 // 当props中的color改变的时候，context会更新
  getChildContext() {
    return {color: this.props.color}
  }
  render() {
    return <div>{this.props.children}</div>
  }
}
// 添加color作为context
ThemeProvider.childContextTypes = {
  color: React.PropTypes.string
}

class ThemedText extends React.Component {
  render() {
    return <div style={{color: this.context.color}}>
      {this.props.children}
    </div>
  }
}
// 从context获得color渲染自己的组件
ThemedText.contextTypes = {
  color: React.PropTypes.string
}

// 组件TodoList从props中获得todos属性，从而渲染出ThemedText组件
class TodoList extends React.PureComponent {
  render() {
    return (<ul>
      {this.props.todos.map(todo => 
        <li key={todo}><ThemedText>{todo}</ThemedText></li>
      )}
    </ul>)
  }
}

const TODOS = ["Get coffee", "Eat cookies"]
class App extends React.Component {
  constructor(p, c) {
    super(p, c)
    this.state = { color: "blue" } 
  }
  render() {
    return (
         {/*ThemeProvider将color放到context中*/}
         <ThemeProvider color={this.state.color}>
              <button onClick={this.makeRed.bind(this)}>
                 {/*ThemedText通过this.context.color获取到父组件的color属性设置style*/}
                <ThemedText>Red please!</ThemedText>
              </button>
              <TodoList todos={TODOS} />
        </ThemeProvider>
        )
  }
  //rewrite color attr in state
  makeRed() {
    this.setState({ color: "red" })
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("container")
)

当点击按钮的时候，按钮本身颜色发生变化，但是TodoList这个组件没有变化。因为它继承了React.PureComponent，组件的props没有发生变化，shouldComponentUpdate返回了false，不管是TodoList还是他的子组件都不会重新渲染。因此，我们的TodoList里面的所有的组件颜色都不会发生变化
更加糟糕的是，我们也不能在TodoList中手动实现shouldComponentUpdate(nextProps, nextState, nextContext)，因为SCU根本就不会接收到context数据(只有当它的state或者props修改了才能接收到，getChildContext才会调用)。
因此，shouldComponentUpdate如果返回false，那么所有的子组件都不会接收到context的更新。如这里的TodoList组件返回了false,那么TodoList下所有的ThemedText从context中获取到的color都不会更新。

《精通CSS》读书笔记5

发表于 2018-06-04 | 分类于读书笔记，精通css

第9章 bug和修复bug

常见的CSS问题

特殊性和分类次序问题

.content p{} 和 .intro{} intro包含在content类内，无效，因为前一个选择器特殊性更强，应该改成.content p{} 和 .content .intro{}
外边距叠加

如果元素没有垂直边框或内边距，那么它的高度就是它保函的子元素的顶部和底部边缘之间的距离。

外边距叠加的问题，可以通过添加一点内边距或与元素北京颜色相同的小边框进行修复。
1
2
3
<div class="box">
<p>this</p>
</div>
1
2
3
4
5
6
7
8
9
.box {
margin: 10px;
background: red;
padding:1px; /*添加以后外边距不会叠加*/
}
p {
margin: 20px;
background: black;
}

拥有布局

IE使用布局概念控制元素的尺寸和定位

拥有布局的元素负责本身及其子元素的尺寸设置和定位。
没有布局的元素的尺寸和位置由最近的拥有布局的祖先元素控制。
可以用js函数hasLayout查看一个元素是否拥有布局

第10章实例研究

text-overflow

当文字超过div大小的时候，显示…，在鼠标hover的时候全部显示

p {
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
}
p:hover{
  white-space: normal;
  overflow: visible;
  text-overflow: inherit;
}

Ajax

异步的服务器通信，通常通过XMLHttpRequest实现
通过操纵DOM进行动态显示和交互
使用js把所有部分组合在一起

jQuery

在DOM中移动
修改页面的外观
动态地修改页面的内容

感受：终于把《精通CSS》一书看完。这本书写的很混乱，前几章还算是零碎地介绍了一些知识，后面两章实例只是对前面知识点的应用而已，但组合出来的代码让人看得一头雾水。翻译不够通顺，许多知识点都过于陈旧，还在分析IE6的bug。实在不建议阅读，但是作为经典推荐书，看了也不亏。

《精通CSS》读书笔记4

发表于 2018-06-03 | 分类于读书笔记，精通css

第7章对表单和数据表格应用样式

复杂的表单布局

复选框两列布局

<fieldset id="favoriteColor">
  <legend>Your Content Details</legend>
  <h2>Favorite Color:</h2>
  <div class="col">
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="red" name="red" type="checkbox" value="red">red</label>
    </div>
  </div>
  <div class="col">
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
    <div>
      <label>
        <input class="checkbox" id="orange" name="orange" type="checkbox" value="orange">orange</label>
    </div>
  </div>
</fieldset>

#favoriteColor{
  width:30em;
}
#favoriteColor h2{
  float:left;
  font-size: 1em;
  font-weight: normal;
  width:10em;
}
#favoriteColor .col{
  float:left;
  width:8em;
}

7-1

第8章布局

两列的浮动布局

<div class="content">
    <div class="primary">
    </div>
    <div class="secondary">
    </div>
</div>

.content .primary{
  width:650px;
  margin-right:20px;
  float:right;
  height:500px;
  background: green;
}
.content .secondary{
  width:230px;
  float:left;
  background:red;
  height:100px;
}
.content{
  width:920px;
  margin:auto;
  height:800px;
  background: gray;
}

8-1

固定宽度、流式和弹性布局

流式布局相对于浏览器宽度设置元素的宽度，弹性布局相对于字号设置元素的宽度

固定宽度布局的缺点：

无论窗口的尺寸多大，它们的尺寸总是不变的，无法充分利用可用空间。
只适合于浏览器默认文本字号，将文本字号增加几级，边栏就会挤满空间并且行长太短。

流式布局缺点：

窗口较小时，行变得很窄，很难阅读。——>添加以像素或em为单位的min-width，防止布局变得太窄。
如果设计横跨整个浏览器窗口，行变得很长，很难阅读。——>不要横跨浏览器，而只跨越宽度的一部分。

弹性布局缺点：

和固定宽度布局一样不能充分利用空间
字号增加时整个布局会加大，比浏览器窗口宽，导致水平滚动条出现。

流式和弹性图像

如果使用流式和弹性布局，宽度减小，图像可能会相对移动，且超过包含的元素。
解决方式：

需要跨越大区域的图像，使用背景图像background
如果用作图像元素，将容器宽度设置为100%并且overflow:hidden。(敲代码尝试后无效)
设置max-width为图像尺寸

高度相等的列

给每个框设置大的底内边距，然后数值相思的负外边距消除这个高度，列溢出容器元素的部分，就overflow:hidden

<div class="wrapper">
    <div class="box">
      <h1>Andy Budd</h1>
      <p>Andy Budd</p>
      <div class="bottom"></div>
    </div>

    <div class="box">
      <h1>Andy Budd</h1>
      <p>qw e r ty u i op a s  df g h j k l z xc v b nm</p>
      <div class="bottom"></div>
    </div>

    <div class="box">
      <h1>Andy Budd</h1>
      <p>1 2 3 45 6 7 8 9 0q w e rt y u i o as d f g h j k l z xc v b nm q w e r t y u io p a s d fg  hj k </p>
      <div class="bottom"></div>
    </div>
  </div>

.wrapper{
  width:100%;
  overflow: hidden; 
}

.box{
  width:250px;
  padding-left:20px;
  padding-right:20px;
  padding-top:20px;
  padding-bottom:520px;
  margin-bottom:-500px; /*给每个框设置大的底内边距，然后数值相思的负外边距消除这个高度*/
  margin-left:20px;
  float:left;
  display:inline;
  background:red;
}

8-2

《精通CSS》读书笔记3

发表于 2018-05-29 | 分类于读书笔记，精通css

第6章对列表应用样式和创建导航条

基本的垂直导航条

被选中的时候，可以使用.selected类，不用特意添加该类
书中P105在导航条中突出显示当前页面栏尝试后发现无效

<p>
    <ul class="nav">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Service</a></li>
    </ul>
</p>

ul.nav{
  margin:0;
  padding:0;
  list-style-type: none;
  width:8em;
  background-color: #8BD400;
  border: 1px solid #486B02;
}
ul.nav a{
  display: block;
  color:#2B3F00;
  text-decoration: none;
  border-top:1px solid #E4FFD3;
  border-bottom:1px solid #486B02;
  background: url(http://image.jiantuku.com/18-5-29/61418708.jpg?e=1527597610&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:VuddFX_hD4gL3h6S3XEqb0MJw5Q=)
  no-repeat 5% 50%;
  padding:0.3em 2em;
}
ul.nav :last-child a{
  border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
  color:#E4FFD3;
  background-color:#6DA203;
}

6-1

创建简单的水平导航条

在css中用到字符的时候可以查询HTML字符（Glyphs）收集

<ol class="pagination">
    <li><a href=# rel="prev">Prev</a></li>
    <li><a href=#>1</a></li>        
    <li><a href=#>2</a></li>
    <li><a href=#>3</a></li>
    <li><a href=#>4</a></li>
    <li><a href=#>5</a></li>
    <li><a href=# rel="next">Next</a></li>
</ol>

ol.pagination{
  margin:0;
  padding:0;
  list-style-type:none;
}
ol.pagination li{
  float:left;
  margin-right: 0.6em;
}
ol.pagination a{
  display:block;
  padding:0.2em 0.5em;
  border:1px solid #ccc;
  text-decoration: none;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected{
  background-color:#C4261D;
  color:white;
}
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"]{
  border:none;
}
ol.pagination a[rel="prev"]:before{
  content:'\00AB';
  padding-right:0.5em;
}
ol.pagination a[rel="next"]:after{
  content:'\00BB';
  padding-left:0.5em;
}

6-2

导航条

<p>
    <ul class="nav">
    <li><a href=#>Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Service</a></li>
    </ul>
</p>

ul.nav{
  margin:0;
  padding:0;
  list-style-type: none;
  width:29em;
  overflow: hidden;
  background-color: #FAA819;
}

ul.nav li{
  float:left;
}
ul.nav a{
  display: block;
  text-decoration: none;
  padding:0 3em;
  color:#fff;
  line-height: 2.1em;
  border-left:1px solid #fff;
}
ul.nav :last-child a{
  border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
  color:#000;
}

6-3

Suckerfish下拉菜单

先将二级导航栏设置成position: absolute; left:-999em; 这时可以看不见该二级导航栏
再:hover ul{left:auto;}就可以实现鼠标放在上面的时候出现二级导航栏

<ul class="nav">
    <li><a href=#>Home</a></li>
    <li><a href=#>Products</a>
        <ul>
        <li><a href=#>Silver</a></li>
        <li><a href=#>Font</a></li>
        </ul>
    </li>
    <li><a href=#>Service</a>
        <ul>
        <li><a href=#>Design</a></li>
        <li><a href=#>Development</a></li>
        <li><a href=#>Consultancy</a></li>                
        </ul>
    </li>
</ul>

ul.nav, ul.nav ul{
  margin:0;
  padding:0;
  list-style-type: none;
  overflow: hidden;
  background-color: #8BD400;
  border:1px solid #486B02;
}
/* 一级标题样式 */
ul.nav li{
  float:left;
  width:8em;
}
/* 二级标题样式 */
.nav li ul{
  width:8em;  
  position: absolute;
  left:-999em;
}
/* 在父元素上添加悬停伪选择器 */
ul.nav :hover ul{
  left:auto;
}
/* 一级标题内容样式,直接写在ul.nav li中是无效的 */
ul.nav a{
  display: block;
  color:#2B3F00;
  text-decoration: none;
  padding:0.3em 1em;
  border-right:1px solid #486B02;
  border-left:1px solid #E4FFD3;
}
/* 二级标题内容样式 */
ul.nav li li a{
  border-top:1px solid #E4FFD3;
  border-bottom:1px solid #486B02;
  border-left:0;
  border-right:0;
}
/* 去除表格中最后一行的样式 */
ul.nav li ul li:last-child a{
  border-bottom:0;
}
ul a:hover,
ul a:focus,
.nav .selected{
  color:#E4FFD3;
  background-color: #6DA203;
}

6-4

CSS图像映射

div设置position:relative; div内部的元素设置position: absolute; 就可以相对于div进行定位

<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527738010&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:uIqUdMVcXfP68LD2eMepOjTWC2I="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>Mountain</a>
        </li>
        <li class="tree">
       		<a href=#>tree</a>
        </li>
    </ul>
</div>

.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a{
  position: absolute;
  display:block;
  width:50px;
  height:50px;
  text-indent:-1000em;
}
.imagemap .mountain a{
  top:100px;
  left:400px;
}
.imagemap .tree a{
  top:400px;
  left:50px;
}
.imagemap a:hover,
.imagemap a:focus{
  border:1px solid #fff;
}

6-5

flickr风格的图像映射

如果要让上下两个框垂直居中，上框宽度为a，下框宽度为b，将下框设置{left:a/2; margin-left:-b/2}
transparent表示背景色透明

<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527770410&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:Ilwl9dMq0UL6Oij6srSG5Mb04q0="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>
            <span class="outer">
              <span class="inner">
                <span class="note">
                    Mountain
                </span>
              </span>
            </span>
          </a>
        </li>
        <li class="tree">
       		<a href=#>
              <span class="outer">
                  <span class="inner">
                    <span class="note">
                      tree
                    </span>
                  </span>
              </span>
          </a>
        </li>
    </ul>
</div>

.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a{
  position: absolute;
  display:block;
  color:#000;
  text-decoration: none;
  border:1px solid transparent;
}
.imagemap a .outer{
  display:block;
  border:1px solid transparent;
}
.imagemap a .inner{
  display: block;
  width:80px;
  height:60px;
  border:1px solid transparent;
}
.imagemap .mountain a{
  top:100px;
  left:350px;
}
.imagemap .tree a{
  top:350px;
  left:50px;
}
.imagemap a:hover .outer,
.imagemap a:focus .outer{
  border-color:#d4d82d;
}
.imagemap a:hover .inner,
.imagemap a:focus .inner{
  border-color:#fff;
}
.imagemap a .note{
  position:absolute;
  bottom:-3em; /* 前面a是absolute的，note的位置相对于a */
  width:7em;
  padding:0.2em 0.5em;
  text-align:center;
  background-color:#ffc;
  left:-1000px; 
  margin-left:-4em; /*计算 note宽度/2=8 /4*/
}
.imagemap a:hover .note,
.imagemap a:focus .note{
  left:40px; /*计算 a框宽度/2=80/40*/
}

6-6

远距离翻转

<div class="imagemap">
    <img src="http://image.jiantuku.com/18-5-23/38797635.jpg?e=1527770410&token=el7kgPgYzpJoB23jrChWJ2gV3HpRl0VCzFn8rKKv:Ilwl9dMq0UL6Oij6srSG5Mb04q0="
    width="500" height="500"/>
    <ul>
        <li class="mountain">
       		<a href=#>
             <span class="hotspot"></span>
             <span class="link">&raquo; mountain</span>
          </a>
        </li>
        <li class="tree">
       		<a href=#>
            <span class="hotspot"></span>
            <span class="link">&raquo; tree</span>
          </a>
        </li>
    </ul>
</div>

.imagemap{
  width:500px;
  height:500px;
  position:relative;
}
.imagemap ul{
  margin:0;
  padding:0;
  list-style-type: none;
}
.imagemap a .hotspot{
  position: absolute;/*相对于整个图片的位置*/
  width:80px;
  height:50px;
}
/* 框在图片中的位置 */
.imagemap .mountain a .hotspot{
  top:100px;
  left:350px;
}
.imagemap .tree a .hotspot{
  top:350px;
  left:50px;
}
.imagemap a .link{
  position: absolute;/*相对于整个图片的位置*/
  display: block;
  width:10em;
  right:-11em;
  cursor:pointer;
  color:#000;
}
/* 文字相对于框的位置 */
.imagemap .mountain a .link{
  top:0;
}
.imagemap .tree a .link{
  top:1.2em;
}
.imagemap a:hover .hotspot,
.imagemap a:focus .hotspot{
  border:1px solid #fff;
}
.imagemap a:hover .link,
.imagemap a:focus .link{
  color:#0066FF;
}

6-7

《精通CSS》读书笔记2

发表于 2018-05-24 | 分类于读书笔记，精通css

第4章背景图像效果

4.1背景图像基础

设置背景图片位置的方式

background-position:left center;
// 像素定位是将图像左上角定位到父元素距离20px的位置
background-position:20px 20px;
// 百分数定位是将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置
background-position:20% 20%;

4.2圆角框

border-image属性详细了解

http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/

px、em、rem的区别：
px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
rem 的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数。

第5章对链接应用样式

5.6用CSS3实现翻转

1
2
3

<body>
   <a href=#>book</a>
</body>

a {
 display:block;
 width:6.6em;
 height:1.4em;
 line-height:1.4;
 text-align:center;
 text-decoration:none;
 border:1px solid #66a300; 
 background-color:#8cca12;
 -moz-border-radius:6px;
  -webkit-border-radius:6px;
  color:#fff;
  text-shadow:2px 2px 2px #66a300;
  -moz-box-shadow:2px 2px 2px #ccc;
  -webkit-box-shadow:2px 2px 2px #ccc;
  box-shadow:2px 2px 2px #ccc;
  background-image:-webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));
}
-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));

有倒影的按钮

5.7纯CSS工具提示

<p>
 <a href="http://www.andybudd.com/"  class="tooltip">
 Andy Budd<span>(This website rocks)</span></a>is a web developer based in Brighton England.
</p>

a.tooltip{
  position:relative;
  }
a.tooltip span {
  display: none;
}
a.tooltip:hover span {
  display: block;
  position: absolute;
  width:200px;
  top: 1em;
  left: 2em;
  padding:0.2em 0.6em;
  border:1px solid #996633;
  background-color: #FFFF66;
  color:#000;
}

工具提示

《精通CSS》读书笔记1

发表于 2018-05-22 | 分类于读书笔记，精通css

第2章为样式找到应用目标

2.1 层叠和特殊性

层叠采用以下重要度次序：

标有！important的用户样式
标有！important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式

选择器的特殊性分为4个登记：a、b、c、d

如果是行内样式，a=1
b是ID选择器的总数
c等于类、伪类和属性选择器的数量
d等于类型选择器和伪元素选择器的数量

伪元素和伪类的区别

伪类用于向某些选择器添加特殊的效果。

伪元素用于将特殊的效果添加到某些选择器。

总结：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

链接： https://segmentfault.com/a/1190000000484493

第3章可视化格式模型

3.1外边距叠加

只有普通文档流中的块框的垂直外边距才会发生外边距叠加。
行内框、浮动框或绝对定位框之间的外边距不会叠加。

行内框和行框：

链接：http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

元素对行高的影响

对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。
padding会覆盖；margin-top和margin-bottom将重置为0
padding、border、margin-left、margin-right可用。
img元素会影响行高
设置行内元素的padding、border和margin并不会撑大外层元素的高度

3.2 浮动

浮动元素脱离文档流，无法包裹

1
2
3

<div class="news">
  <p>Some text</p>
</div>

.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}

脱离文档

方案1：添加一个有clear的空元素

<div class="news">
  <p>Some text</p>
  <br class="clear">
</div>

.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}
.clear{
  clear:both;
}

添加clear元素

方案2：将div容器浮动

若没有设置长度，这样的方式，会让父元素的长度改变，和其他方案的效果不同。

1
2
3

<div class="news">
  <p>Some text</p>
</div>

.news{
  background-color:gray;
  border:solid 1px black;
  float:left;
}
.news p{
  float:right;
}

父元素浮动

方案3：overflow元素

.news{
  background-color:gray;
  border:solid 1px black;
  overflow:hidden;
}
.news p{
  float:right;
}

效果同方案2

方案4：使用after伪类

1
2
3

<div class="news clear">
  <p>Some text</p>
</div>

.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}
.clear:after{
  content:'.';
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

效果同方案2

JS能力测评经典题11-20

发表于 2018-02-17 | 分类于编程题， JS能力测评

11.计数

统计数组 arr 中值等于 item 的元素出现的次数

示例1

输入

1	[1, 2, 4, 4, 3, 4, 3], 4

输出

//常规
function count(arr, item) {
    var count=0;
    for(var i=0;i<arr.length;i++){
        if(arr[i]===item){
            count++;
        }
    }
    return count;
}
//filter
function count(arr, item) {
    return arr.filter(function(a){
        return (a==item);
    }).length;
}

12.查找重复元素

找出数组 arr 中重复出现过的元素

示例1

输入

1	[1, 2, 4, 4, 3, 3, 1, 5, 3]

输出

[1, 3, 4]

我写的

function duplicates(arr) {
    var a=[];
    for(var i=0;i<arr.length/2;i++){
        for(var j=i+1;j<arr.length;j++){
            if((arr[i]==arr[j])&&(a.indexOf(arr[i])==-1)){
                a.push(arr[i]);
            }
        }
    }
    return a;
}

讨论区：

function duplicates(arr) {
     //声明两个数组，a数组用来存放结果，b数组用来存放arr中每个元素的个数
     var a = [],b = [];
     //遍历arr，如果以arr中元素为下标的的b元素已存在，则该b元素加1，否则设置为1
     for(var i = 0; i < arr.length; i++){
         if(b[arr[i]]){
            b[arr[i]]++;
        }else{
            b[arr[i]]=1;
        }
     }
     //遍历b数组，将其中元素值大于1的元素下标存入a数组中
     for(var i = 0; i < b.length; i++){
         if(b[i] > 1){
             a.push(i);
         }
     }
     return a;
 }
 //解决数组中某一数值过大，导致数组浪费问题，可以使用对象
 function duplicates(arr) {
    var obj = {};
    var repeatList = [];
    //遍历数组，将数组的值作为obj的索引，出现次数为值
    arr.forEach(function(item){
        if(obj[item]){
            obj[item] +=1;
        }else{
            obj[item] = 1;
        }
    });
    //获取对象自身属性
    var propertyNames = Object.getOwnPropertyNames(obj);
    //遍历对象，将重复出现的元素取出
    propertyNames.forEach(function(item){
        if(obj[item] > 1){
            repeatList.push(parseInt(item));
        }
    });
    return repeatList;
}
//方法3
function duplicates(arr) {
 var result = [];
    arr.forEach(function(elem){
       if(arr.indexOf(elem) !=arr.lastIndexOf(elem) && result.indexOf(elem) == -1){
           result.push(elem);
       }
    });
    return result;
}

13.求二次方

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

示例1

输入

1	[1, 2, 3, 4]

输出

1	[1, 4, 9, 16]

我写的：

function square(arr) {
    var a=[];
    arr.forEach(function(item,index,arr){
        a.push(item*item);
    })
    return a;
}

//map会返回数组，forEach不会
function square(arr) {
    return arr.map(function(item,index,arr){
       return item*item;
    });
}

14.查找元素位置

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

示例1

输入

1	'abcdefabc'

输出

[0, 6]

function findAllOccurrences(arr, target) {
    var a=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]==target){
            a.push(i);
        }
    }
    return a;
}

15.避免全局变量

给定的 js 代码中存在全局变量，请修复

function globals() {
    var myObject = {
      name : 'Jory'
    };

    return myObject;
}

16.正确的函数定义

请修复给定的 js 代码中，函数定义存在的问题

示例1

输入

true

输出

题目：

function functions(flag) {
    if (flag) {
      function getValue() { return 'a'; }
    } else {
      function getValue() { return 'b'; }
    }

    return getValue();
}

修改后：

function functions(flag) {
    if (flag) {
      var getValue = function () { return 'a'; }
    } else {
      var getValue = function () { return 'b'; }
    }
    return getValue();
}

17.正确地使用praseInt

修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例

示例1

输入

'12'

输出

示例2

输入

'12px'

输出

示例3

输入

'0x12'

输出

1
2
3

function parse2Int(num) {
    return parseInt(num，10);
}

18.完全等同

判断 val1 和 val2 是否完全等同

1
2
3

function identity(val1, val2) {
    return val1===val2;
}

19.计时器

实现一个打点计时器，要求
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
3、第一个数需要立即输出

function count(start, end) {
  //立即输出第一个值,记得第一个值要加上1
  console.log(start++);
     var timer = setInterval(function(){
         if(start <= end){
             console.log(start++);
         }else{
             clearInterval(timer);
         }
     },100);
    //返回一个对象，其中cancel是对象的一个属性
     return {
         cancel : function(){
             clearInterval(timer);
         }
     };
 }

20.流程控制

实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
2、如果 num 能被 3 整除，返回字符串 fizz
3、如果 num 能被 5 整除，返回字符串 buzz
4、如果参数为空或者不是 Number 类型，返回 false
5、其余情况，返回参数 num

示例1

输入

输出

fizzbuzz

function fizzBuzz(num) {
    if(num%3==0&&num%5==0){
        return "fizzbuzz";
    }else if(num%3==0){
        return "fizz";
    }else if(num%5==0){
        return "buzz";
    }else if(num===null|| typeof num != "number"){
        return false;
    }else{
        return num;
    }
}

Xyy

I want to get ahead in a step-by-step

第一章 块级绑定

第二章，字符串与正则表达式

unicode方法

子字符串方法

模板字面量

正则表达式

第三章 函数

第四章 扩展的对象功能

第五章 解构：更方便的数据访问

第六章 符号与符号属性

第七章 Set和Map

React文档学习(3)

Fragments

Portals

Error Boundaries

Web组件

高阶组件

代码拆分

React文档学习(1)

函数式组件和类组件

异步更新State

处理事件

条件渲染

List和Keys

表单

file input标签

状态提升

React编程思想

React文档学习(2)

深入JSX

在运行时选择类型

对 JSX 类型使用点语法

JSX中的Children

使用PropTypes进行类型检查

要求单独的 Child

静态类型检查

Refs和DOM

添加Ref

对父组件暴露DOM节点

不受控组件

优化性能

不可变数据

不使用ES6

一致性比较

Context

Context更新而其组件不更新

第9章 bug和修复bug

常见的CSS问题

拥有布局

第10章 实例研究

text-overflow

Ajax

jQuery

第7章 对表单和数据表格应用样式

复杂的表单布局

第8章 布局

两列的浮动布局

固定宽度、流式和弹性布局

流式和弹性图像

高度相等的列

第6章 对列表应用样式和创建导航条

基本的垂直导航条

创建简单的水平导航条

导航条

Suckerfish下拉菜单

CSS图像映射

flickr风格的图像映射

远距离翻转

第4章 背景图像效果

4.1背景图像基础

4.2圆角框

第5章 对链接应用样式

5.6用CSS3实现翻转

5.7纯CSS工具提示

第2章 为样式找到应用目标

2.1 层叠和特殊性

第3章 可视化格式模型

3.1外边距叠加

3.2 浮动

11.计数

第一章块级绑定

第三章函数

第四章扩展的对象功能

第五章解构：更方便的数据访问

第六章符号与符号属性

第10章实例研究

第7章对表单和数据表格应用样式

第8章布局

第6章对列表应用样式和创建导航条

第4章背景图像效果

第5章对链接应用样式

第2章为样式找到应用目标

第3章可视化格式模型