border的部分应用

border做倒三角形图标

1
2
3
4
5
6
7
8

a:after {
	display: block;
	content: "";
	/*美人尖*/
	border: 5px solid;
	border-color: #b00000 transparent transparent; /*上 左右 下*/
	width: 0; 
}

• :after 选择器是在a后插入内容
• 因为边框是楔形，所以当内容为空白,只显示边框时，形成美人尖。

first-child等伪类选择器易错问题

E:first-child {}

• 匹配父元素的第一个子元素E。
• 要使该属性生效，E元素必须是某个元素的第一个子元素，且是E属性。

1
2
3
4
5
6

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

• 若在这时选择第一个p元素，使用p:first-child则会出现错误，因为p的父元素是div，而对于div来说，它的第一个子元素是h1，不是p，所以会出错。
• 同理，E:last-child {} E:only-child {} 与上面的一样，E元素必须是其父元素的最后一个子元素或唯一一个子元素才可以。

E:nth-child(1) {}

• 与E:first-child {}等效，E需要是父元素的第一个子元素。
• 比如： p:nth-child(2) 才可以选中p1

:nth-child(odd/even) {}

• 匹配属于其父元素的第N个子元素，不论元素的类型。

规范

• 可写成 div h1:first-child{} 明确父元素，自然能看到是不是第一个E属性子元素，就不容易犯错。

overflow:hidden 的作用总结

一. 溢出隐藏

• 一般在div中设置后，该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

1

text-overflow: ellipsis;	/* 当对象内文本溢出时可显示省略标记（...）*/

二. 消除浮动

• 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0，下面的元素会顶上去，造成页面的塌陷。

方法一：给父级加overflow: hidden属性

方法二：给父级加::after

1
2
3
4
5

.outDiv::after {
    content: "";
    clear: both;
    display: block;
}

天猫网站前端设计

GitHub同步训练，搭建完成前记录效果截图。

当前进度：node+express 搭建，因没有数据库后台，只是功能上的展示

公共部分

div布局中absolute和relative的区别

在正常流中的位置

relative

• 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。如图1：

inline-block和float的区别

文档流（Document flow）

• 浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

水平位置（Horizontal position）

• 很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

Git中remove操作

Push an existing repository from the command line

1
2
3
4
5

$ cd <file_name>
$ git init
$ git remote add origin git@github.com:Wayne299/x.git
$ git add <file_name>
$ git push -u origin master

Git 语法入门

常用Git指令

Add All

1
2

git add .
git add A

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.

Hexo 语法入门

Create a new post

1
2
3
4

$ hexo new "My New Post"
$ hexo g
$ hexo s
$ hexo d