VioletQQY的任意门
0%

Posted on In

[转载] An Adavnced Guide to HTML & CSS （译文）

本文转载自网络，文章对排版和文字稍作改动，本文著作权归英文原作者和中文译者所有。
转载自译文: [http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html] © w3cplus.com 译者: 大漠
英文原文: [http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning] 作者: Shay Howe

在一个页面上实现布局和定位有几种不同的技术。使用哪种技术，很大程度上取决于页面的内容和目标，在不同情况下总有更好的实现方式。

例如，浮动可以让页面元素并排显示，而且还可以制作一个干净的布局。然而，有时候需要一些严格的定位，这时需要使用其他的定位技术，包括relative和absolute定位。

在这节课中，我们先来介绍一下浮动的使用，接下来详细介绍定位的技巧，包括如何准确的给元素在X轴、Y轴和Z轴定位。

  • 包含浮动
  • 定位属性
  • z-index 属性
Read more »

Posted on In

CSS 居中策略总结

在学习和实践 CSS 的过程中，元素的水平垂直居中是经常会碰到的问题，这里总结了一些常用场景下的居中方案。
更多关于 CSS 的居中问题参考 CHRIS COYIER 写的 Centering in CSS: A Complete Guide 和网站 HOW TO CENTER IN CSS。

一、水平居中

1. 行内元素水平居中（inline or inline-* elements）

居中方案： 

1
2
3
div {
  text-align: center;
}

兼容性：全浏览器兼容

Example:

Read more »

Posted on In

CSS 伪类、伪元素选择器（CSS Pseudo-Class Selectors and Pseudo-Element-Selectors）

“In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element. They are divided into pseudo class selectors and pseudo element selectors.” – From Web Developer Reading List: CSS Pseudo-Class Selectors

CSS 的选择器是学习 CSS 时很重要的一部分。除了基本的标签选择器、ID 选择器、类选择器等，CSS 中还提供的一种伪选择器尤其值得关注。在实践中，伪选择器往往会给我们带来不一样的惊喜。伪选择器分为 伪类选择器 和 伪元素选择器 ：

  • 伪类选择器 - 通常用来描述一个标签在不同的状态下的样式，比如 :hover、:empty 等，
  • 伪元素选择器 - 通常用来控制某块内容的一部分的样式，比如一段文字的第一行或者第一个字母等。
Read more »

Posted on In

Angular 2 学习笔记之 EcmaScript6 & TypeScript

EcmaScript6

Classes

类是在 ES6 一个新功能，用来描述对象的蓝图，使 ECMAScript 中的原型继承模型的功能更像是一个传统的基于类的语言。

1
2
3
4
5
6
7
8
class Hamburger {
  constructor() {
    // This is the constructor.
  }
  listToppings() {
    // This is a method.
  }
}

Object

一个对象是通过使用 new 关键字创建的一个类的实例。

1
2
let burger = new Hamburger();
burger.listToppings();

Refresher on ‘this’

在 Javascript 中， this 的指向一直是个经久不衰的话题。传统的基于类的语言中的 this 关键字通常指向类的当前实例。然而在 Javascript 中， this 则指向当前调用的上下文，因此可能指向任何其他值而不是当前对象。在函数内部，this的值取决于函数被调用的方式。在严格模式下，如果 this未在执行的上下文中定义，那它将会默认为 undefined 。

在一个 Javascript 的类中，我们通常使用 this 关键字来指向当前类的实例。

1
2
3
4
5
6
7
8
9
class Toppings {
  ...

  formatToppings() { /* implementation details */ }

  list() {
    return this.formatToppings(this.toppings);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function() {

  'use strict';

  var myObject = {
    foo: 'bar',
    someMethod: function() {
      console.log(this.foo);
    }
  };

  function someMethod() {
    console.log(this);
  }

  myObject.someMethod(); // myObject
  someMethod(); // undefined

})();
Read more »

Posted on In

Usage of Emmet

Emmet is a good tool when coding that can greatly improve your HTML&CSS workflow. Here’s some commonly used command from Emmet Documentation.

Initial HTML

1
2
3
'!' or 'html:5':  generate a HTML5 document;
      'html:xt':  generate a XHTML document;
      'html:4s':  generate a HTML4 document;

Child: >

You can use > operator to nest elements inside each other: 

1
div>ul>li

…will produce

1
2
3
4
5
<div>
  <ul>
    <li></li>
  </ul>
</div>

Sibling: +

Use + operator to place elements near each other, on the same level:

1
div+p+bq

…will output

1
2
3
<div></div>
<p></p>
<blockquote></blockquote>
Read more »

Posted on In

Using Terminal

sudo

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
sudo - execute a command as another user

usage: sudo -h | -K | -k | -V
usage: sudo -v [-AknS] [-g group] [-h host] [-p prompt] [-u user]
usage: sudo -l [-AknS] [-g group] [-h host] [-p prompt] [-U user] [-u user] [command]
usage: sudo [-AbEHknPS] [-C num] [-g group] [-h host] [-p prompt] [-u user] [VAR=value] [-i|-s] [<command>]
usage: sudo -e [-AknS] [-C num] [-g group] [-h host] [-p prompt] [-u user] file ...

Options:
  -A, --askpass               use a helper program for password prompting
  -b, --background            run command in the background
  -C, --close-from=num        close all file descriptors >= num
  -E, --preserve-env          preserve user environment when running command
  -e, --edit                  edit files instead of running a command
  -g, --group=group           run command as the specified group name or ID
  -H, --set-home              set HOME variable to target user's home dir
  -h, --help                  display help message and exit
  -h, --host=host             run command on host (if supported by plugin)
  -i, --login                 run login shell as the target user; a command may also be specified
  -K, --remove-timestamp      remove timestamp file completely
  -k, --reset-timestamp       invalidate timestamp file
  -l, --list                  list user's privileges or check a specific command; use twice for longer format
  -n, --non-interactive       non-interactive mode, no prompts are used
  -P, --preserve-groups       preserve group vector instead of setting to target's
  -p, --prompt=prompt         use the specified password prompt
  -S, --stdin                 read password from standard input
  -s, --shell                 run shell as the target user; a command may also be specified
  -U, --other-user=user       in list mode, display privileges for user
  -u, --user=user             run command (or edit file) as specified user name or ID
  -V, --version               display version information and exit
  -v, --validate              update user's timestamp without running a command
  --                          stop processing command line arguments
Read more »