CSS3 学习笔记

  • 一 l  CSS 基础
    • （一）CSS 介绍
      • 1、CSS 教程
      • 2、CSS 编写规范
    • （二）CSS 基础语法
  • 二 l  CSS 选择器
    • （一）元素选择器
    • （二）选择器分组（多个选择器使用同一个样式）
    • （三）类选择器
      • 1、全选相同类名
      • 2、结合元素选择器（选择指定标签下的指定类名）
      • 3、多类选择器（通过多个类名选择）
    • （四）id选择器
    • （五）属性选择器
    • （六）补充与扩展
      • 1、补充
      • 2、【扩展】派生选择器（后代选择器）（速度快）
      • 3、【补充】子元素选择器
      • 4、【补充】相邻兄弟选择器（不常用）
  • 三 l  CSS 样式
    • （一）CSS 常用样式
    • （二）CSS 背景
    • （三）CSS 文字样式（字体、文本、链接）
      • 1、字体
      • 2、文本
      • 3、链接
        • （1）链接的四种状态（都是选择器名）
        • （2）常见的链接样式
    • （四）CSS 文字外样式（列表、表格、轮廓）
      • 1、列表
      • 2、表格
      • 3、轮廓
    • （五）CSS 定位
      • 1、定位属性
      • 2、浮动属性
    • （六）CSS 盒子模型
  • 四 l  CSS 动画
    • （一）2D、3D转换
      • 1、2D转换方法
      • 2、3D转换方法
    • （二）过渡
    • （三）动画
    • （四）多列
  • 五 l  CSS 常用操作
    • （一）对齐操作
    • （二）尺寸操作
    • （三）分类操作
    • （四）导航栏简单示例
    • （五）图片页简单示例
    • （六）图片页瀑布流简单示例

 

一 l  CSS 基础

（一）CSS 介绍

CSS指层叠样式表，堆叠样式的工具

小范围的样式定义层级高于大范围的样式定义

1、CSS 教程

本文参考教程：[H5+CSS+JS视频教程]
一般当字典用：[CSS 教程（菜鸟教程）]

2、CSS 编写规范

[CSS 规范易读版]
[Google HTML/CSS 规范]
 
 

（二）CSS 基础语法

/* 单属性 */
selector {property: value;
}/* 多属性 */
selector {property1: value1;property2: value2;
}

 
 
 
 
 

二 l  CSS 选择器

（一）元素选择器

选择页面的某种元素

body {}

示例解释：选择器选择了body元素

 

（二）选择器分组（多个选择器使用同一个样式）

selector1,
selector2,
selector3 {property: value;
}

示例解释：这里选择了3个选择器

* {}

示例解释：这里使用通配符选择了所有元素 【规范代码中不允许使用】

 

（三）类选择器

类选择器以".类名"选择元素

类选择器可以和派生选择器一起用，将标签名换成".类名"就好

1、全选相同类名

<div class="divclass">hello css</div>

.divclass {color: #f00;
}

2、结合元素选择器（选择指定标签下的指定类名）

<div class="classname">div</div>
<a class="classname">a</a>

a.classname {color: #f00;
}

示例解释：这里只选择了a标签的classname，没有选择div标签 【规范代码中不推荐使用】

3、多类选择器（通过多个类名选择）

<p class="p1">sthis is my web page</p>
<p class="p2">this is my web page</p>
<p class="p1 p2">this is my web page</p>

.p1 {color: blue;
}
.p2 {font-size: 30px;
}
.p1.p2 {font-style: italic;
}

示例解释：当类定义为"p1 p2"时，会同时拥有两个类定义的效果，此时定义独属于自己的样式时要调用".p1.p2"

 

（四）id选择器

id选择器以"#id名"来定义，为标有id的HTML元素指定样式

id选择器可以和派生选择器一起用，将标签名换成"#id名"就好

<div id="divid">hello css</p>

#divid {color: #f00;
}

 

（五）属性选择器

对带有指定属性的HTML元素设置样式

<div title="t">hello css</p>

[title] {}
[title="te"] {}
[title~="te"] {}

示例解释：[title]选择设置了title属性的HTML元素；[title="te"]选择设置了title="te"属性的HTML元素；[title~="te"]选择设置了title="X"且X包含"te"属性的HTML元素

 

（六）补充与扩展

1、补充

补充1：继承（小标签如果没定义样式，会自动使用大标签的css配置）

body {color: #f00;
}

示例解释：<body>内的标签如果没有定义，都会默认使用红色。

补充2：id选择器与class选择器差别
id选择器：名称 不可重复 ，通常在搭建框架时使用，先加载 内容 再加载 样式，不能结合使用，使用js时会用到id
class选择器：名称 可重复 ，通常在具体实现时使用，先加载 样式 再加载 内容，可以结合使用（指定有多个class的元素）

2、【扩展】派生选择器（后代选择器）（速度快）

通过依据元素在其位置的上下文关系来定义样式，选择某元素后代的元素，允许跨代

<p>a<strong>b<i>c</i>d</strong>e</p>

/* 查找子代，bcd会变为红色 */
p strong {color: #f00;
}
/* 跨代查找，c会变为红色 */
p i {color: #f00;
}
/* 等价于p i，c会变为红色 */
p strong i {color: #f00;
}

3、【补充】子元素选择器

子元素选择器只能选择作为某元素子元素的元素，跨代需要查找多次

<p>a<strong>b<i>c</i>d</strong>e</p>

/* 查找子代，bcd会变为红色 */
p > strong {color: #f00;
}
/* 跨代查找，报错 */
p > i {color: #f00;
}
/* c会变为红色 */
p > strong > i {color: #f00;
}

4、【补充】相邻兄弟选择器（不常用）

可选择紧接在另一个元素后的元素，且二者有相同父元素

<div><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol>
</div>

li + li {font-weight: bold;
}

示例解释：选择前面有<li>的<li>，所每个 List item 2 和 List item 3 都会加粗，因为它们之前都有<li>标签

 
 
 
 
 

三 l  CSS 样式

样式是大括号中的内容

（一）CSS 常用样式

下文中几乎所有Xpx都可以改为Xem、X%、auto

常用样式属性 解释
width: Xpx; 设置样式宽度
heigth: Xpx; 设置样式高度
padding: Xpx; 设置样式外边框大小（内边距）
margin: (四周Xpx) / (上下Xpx 左右Xpx); 设置样式外边距大小
text-align: left / center / right; 设置文本对齐方式（左 / 中 / 右）
color: 颜色X; 设置文本颜色（会继承给子标签）
background-color: 颜色; 设置背景颜色

 

（二）CSS 背景

允许纯色、图片等创建背景

背景样式属性 解释
background-attachment: scroll(默认) / fixed; 设置背景图像位置（固定页面绝对位置 / 固定浏览器绝对位置）
background-color: 颜色; 设置背景颜色
background-image: url(图片地址); 设置背景图片
background-position: 显示位置 (显示中心); 设置背景图片的起始位置 （只填写显示位置时，显示中心默认为center）
显示位置 (显示中心)表示法用英文如right top表示；
左上端点定位法用像素右下偏移量如100px 100px表示或50% 50%表示。
background-repeat: no-repeat / repeat(默认) / repeat-x / repeat-y; 设置背景图片是否及如何重复（不允许 / 允许(默认) / 允许x轴 / 允许y轴）
背景样式属性（CSS3） 解释
background-size: 宽度px 高度px; 设置背景图片的尺寸
background-origin 设置背景图片的定位区域
background-clip 设置背景的绘制区域

 

（三）CSS 文字样式（字体、文本、链接）

1、字体

字体样式属性 解释
font-family: 字体名; 设置字体系列
font-size: Xpx; 设置字体尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本
font-weight 设置字体的粗细

外部引入字体（CSS3）【不推荐】：

@font-face {font-family: 字体名（可以自定义）;src: url(字体链接);
}

2、文本

文本样式属性 解释
color: 颜色X; 设置文本颜色（会继承给子标签）
text-align: left / center / right; 设置文本的对齐方式（左 / 中 / 右）
text-indent: Xem / X%; 设置文本的首行缩进
text-transform: capitalize / lowercase / uppercase; 设置字母大小写转换（首字母大写 / 全小写 / 全大写）
direction 设置文本方向
line-height 设置行高
letter-spacing 设置字符间距
text-decoration 设置文本修饰
unicode-bidi 设置文本方向
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
文本样式属性（CSS3） 解释
text-shadow: 阴影向右偏移Xpx 阴影向下偏移Xpx 阴影模糊度Xpx 阴影背景颜色#ff0000; 设置文本阴影
word-wrap 设置文本换行

3、链接

（1）链接的四种状态（都是选择器名）

/* 普通的、未被访问的链接*/
a:link {}/* 用户已访问的链接 */
a:visited {}/* 鼠标指针位于链接的上方 */
a:hover {}/* 链接被点击的时刻 */
a:active {}

（2）常见的链接样式

链接样式属性 解释
text-decoration 设置链接是否显示下划线（默认显示 / 不显示none）
background-color: 颜色; 设置背景颜色

 

（四）CSS 文字外样式（列表、表格、轮廓）

1、列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

列表样式属性 解释
list-style 简写列表项
list-style-type 设置列表项行头显示类型（实心圆、空心圆等）
list-style-image: url(图片地址); 设置列表项行头显示图片
list-style-position: inside / outside; 列表标志位置（上一个元素缩进加一 / 一缩进）

2、表格

CSS表格属性可以帮助我们极大的改善表格的外观。

表格样式属性 解释
border: 粗细Xpx 外边框solid 边框颜色X; 设置表格边框
border-collapse: collapse; 设置折叠边框（将两条平行线合并）
width: Xpx;
heigth: Xpx; 		设置表格总宽高【非表格独有样式】
text-align: left / center / right; 设置表格文本对齐（左 / 中 / 右）【非表格独有样式】
background-color: 颜色; 设置表格颜色【非表格独有样式】
padding: Xpx; 设置表格内边距【非表格独有样式】

3、轮廓

轮廓样式属性 解释
outline 设置轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outine-width 设置轮廓的宽度

 

（五）CSS 定位

改变元素在页面上的位置。

CSS定位机制：
 普通流：元素按照其在HTML中的位置顺序决定排布的过程
 浮动：在单独的浮动层
 绝对布局：固定在浏览器或网页的固定位置

1、定位属性

定位样式属性 解释
position: static / relative / absolute / fixed; 【定位】static静态的（不能重叠，偏移量不起效果）、
relative相对的（可以重叠，偏移量起效果）、
absolute绝对的（可以重叠，固定在页面绝对位置，不会与其他元素顺序排列）、
fixed固定的（固定在浏览器绝对位置，不会与其他元素顺序排列）
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对齐方式
z-index: X; 设置元素的堆叠顺序（X越大显示越在前面）

2、浮动属性

  浮动是将元素设置在浮动画布上（显示在其他元素之前），浮动元素会跟浮动元素排列，浮动元素的父元素也会有浮动性质，浮动可以用来实现文字环绕的效果。

浮动样式属性 解释
float: left / right / none / inherit; 【浮动】（向左浮动 / 向右浮动 / 不浮动 / 继承父级浮动设置）
clear: left / right / both / inherit; 【去除浮动】（去除左浮动 / 去除右浮动 / 去除两边浮动 / 继承父级去除浮动设置）

 

（六）CSS 盒子模型

  每一个元素外面包裹着由内到外为内边距padding(默认无值)、边框border(默认无值)、外边距margin(默值不同但透明)三层结构的盒子。

内边距样式属性 解释
padding: Xpx; 设置四周内边距，样式扩展
（设置上边距padding-top、设置下边距padding-bottom、
设置左边距padding-left、设置右边距padding-right）
边框样式属性 解释
border: 边框粗度Xpx 外边框solid 边框颜色X; 设置边框粗细
border-width: 边框宽度Xpx; 设置边框宽度，样式扩展：
（设置上边框宽度border-top-width、设置下边框宽度border-bottom-width、
设置左边框宽度border-left-width、设置右边框宽度border-right-width）
border-style: 边框样式; 设置四周边框样式，样式扩展：
（设置上边框样式border-top-style、设置下边框样式border-bottom-style、
设置左边框样式border-left-style、设置右边框样式border-right-style）
border-color: 边框颜色X; 设置四周边框颜色，样式扩展：
（设置上边框颜色border-top-color、设置下边框颜色border-bottom-color、
设置左边框颜色border-left-color、设置右边框颜色border-right-color）
border-radius: 圆角程度Xpx; 设置圆角边框
box-shadow: 向右移动Xpx 向下移动Xpx 透明度Xpx 颜色X; 设置边框阴影
border-image 设置边框图片
外边距样式属性 解释
margin: Xpx; 设置四周外边距（单参数设置四周边距，双参数设置左右边距和上下边距），样式扩展：
（设置上边距margin-top、设置下边距margin-bottom、
设置左边距margin-left、设置右边距margin-right）

注意：
两元素间的外边距不会叠加，只会取两者外边距较大值。

 
 
 
 
 

四 l  CSS 动画

（一）2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

transform样式属性可以使用如下方法：

safari / chrome浏览器使用：-webkit-transform: xxx;
IE浏览器使用：-ms-trans form: xxx;
opera浏览器使用：-o-transform: xxx;
Firefox浏览器使用：-moz-transform: xxx;

1、2D转换方法

转换方法 解释
translate(右移Xpx, 下移Xpx) 平移
rotate(顺时针旋转Xdeg) 顺时针旋转（deg：度）
scale(宽度倍数X, 高度倍数X) 缩放
skew(x轴旋转角度Xdeg, y轴旋转角度Xdeg) 倾斜
matrix() 矩阵

2、3D转换方法

转换方法 解释
rotateX(Xdeg) X轴旋转
rotateY(Xdeg) Y轴旋转

 

（二）过渡

CSS3过渡是元素从一种样式转换成另一种样式

过渡样式属性 解释
transition: width Xs(水平过渡时间), height Xs(垂直过渡时间), transform Xs(平移时间); 设置四个过渡属性
transition-property 设置过渡的名称
transition-duration 设置过渡效果花费的时间
transition-timing-function 设置过渡效果的时间曲线
transition-delay: Xs(延时时间); 设置过渡效果延时开始时间 
/* 原矩形100px*100px，蓝色填充，动画时间2秒 */
div {width: 100px;height: 100px;background-color: #00f;-webkit-transition: width 2s,height 2s,-webkit-transform 2s;transition: width 2s, height 2s, transform 2s;
}
/* 鼠标放在矩形上后变为200px*200px；顺时针旋转360度 */
/* 鼠标挪走后，会执行相反的动画返回之前的状态 */
div:hover {width: 200px;height: 200px;transform: rotate(360deg);-webkit-transform: rotate(360deg);
}

 

（三）动画

CSS3的动画需要遵循@keyframes规则，即需要规定动画的名称和时长

动画样式属性 解释
animation: X(动画名称) Xs(动画时长) infinite(无限次) alternate(带反向动画); 定义动画
animation-name 设置需要绑定到选择器的keyframe名称
animation-duration 设置完成动画所花费的时间，以秒或室秒计
animation-timing-function 设置动画的速度曲线
animation-delay 设置在动画开始之前的延迟
animation-iteration-count 设置动画应该播放的次数
animation-direction 设置是否应该轮流反向播放动画

定义完样式属性后需要定义一个@keyframes X的选择器，具体示例如下：

/* 动画名为"anim"，动画时间为5秒；-webkit-浏览器前缀 */
div {width: 100px;height: 100px;background-color: #f00;position: relative;animation: anim 5s infinite alternate;-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {0%{background: #0f0;left: 0;top: 0;}25%{background: #00f;left: 200px;top: 0;}50%{background: #cfc;left: 200px;top: 200px;}75%{background: #0ff;left: 0;top: 200px;}100%{background: red;left: 0;top: 0;}
}
@-webkit-keyframes anim {0%{background: #0f0;left: 0;top: 0;}25%{background: #00f;left: 200px;top: 0;}50%{background: #cfc;left: 200px;top: 200px;}75%{background: #0ff;left: 0;top: 200px;}100%{background: red;left: 0;top: 0;}
}

 

（四）多列

自动将行排布的元素改为列排布（即超过一定长度自动换列）

多列样式属性 解释
column-count 设置分列数量
column-gap 设置列间距
column-rule 设置列间隔线属性 
<body><div class="div1">假装有很多很多句子</div>
</body>

/* 分为3列；列间隔50px；间隔线粗5px，颜色为红色 */
.div1 {column-count: 3;column-gap: 50px;column-rule: 5px outset #f00;
}

 
 
 
 
 

五 l  CSS 常用操作

（一）对齐操作

margin：

/* 居中对齐 */
selector {margin-left: auto;margin-right: right;
}
/* 居中对齐 */
selector {margin: 0 auto;
}

position：

/* 向左对齐 */
selector {position: absolute;left: 0;
}
/* 向右对齐 */
selector {position: absolute;right: 0;
}

float：

/* 向左对齐 */
selector {float: left;
}
/* 向右对齐 */
selector {float: right;
}

 

（二）尺寸操作

尺寸样式属性 解释
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
min-height 设置元素最小高度
width 设置元素宽度
max-width 设置元素最大宽度
min-width 设置元素最小宽度

 

（三）分类操作

分类样式属性 解释
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
float 设置元素向哪个方向浮动
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 设置指向某元素之上时显示的指针形状
display 设置是否及如何显示元素（如将列表变为横向排布作为导航栏）
visibility: visible / hidden; 设置元素是否可见或不可见（可见 / 不可见）

 

（四）导航栏简单示例

HTML代码：

<body><ul><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li><li><a href="#">导航4</a></li></ul>
</body>

垂直导航栏的CSS代码：

/* 内外边距为0，列表去除项头标记 */
ul {margin: 0;padding: 0;list-style-type: none;
}
/* 未点击和点击过时；展示为块；宽度为50px；字体颜色为白色，居中，去除下划线；背景颜色为红色 */
a:link, a:visited {display: block;width: 50px;color: #fff;text-align: center;text-decoration: none;background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {background-color: #00f;
}

水平导航栏的CSS代码：

/* 内外边距为0，列表去除项头标记 */
ul {margin: 0;padding: 0;list-style-type: none;
}
/* 未点击和点击过时；宽度为50px；字体颜色为白色，居中，去除下划线；背景颜色为红色 */
a:link, a:visited {width: 50px;color: #fff;text-align: center;text-decoration: none;background-color: #f00;
}
/* 鼠标放上选项后为蓝色 */
a:active, a:hover {background-color: #00f;
}
/* 水平摆放 */
li {display: inline;
}

 

（五）图片页简单示例

HTML代码：

<body><div class="container"><div class="image"><!-- 跳转自己 --><a href="#" target="_self"><!-- 注释为“风景” --><img src="1.jpg" alt="风景" width="200px" height="200px"></a><!-- 文本为“8月份的维多利亚” --><div class="text">8月份的维多利亚</div></div></div>
</body>

CSS代码：

body{margin: 18px auto;width: 70%;height: auto;
}
.image{float: left;border: 1px solid #f00;margin: 5px;width: auto;height: auto;text-align: center;
}
img {margin: 5px;opacity: 1;
}
.text {margin-bottom: 5px;font-size: 12px;
}

 

（六）图片页瀑布流简单示例

HTML代码：

<body><div class="container"><div><img src="img/1.jpg"></div><div><img src="img/2.jpg"></div><div><img src="img/3.jpg"></div><div><img src="img/4.jpg"></div><div><img src="img/5.jpg"></div><div><img src="img/6.jpg"></div><div><img src="img/7.jpg"></div><div><img src="img/8.jpg"></div><div><img src="img/9.jpg"></div></div>
</body>

CSS代码：

/* 每列宽度为250px；列间距为5px */
.container {column-width: 250px;column-gap: 5px;
}
/* 每个图片固定宽度为250px；上下外边距5px，左右外边距0px */
.container div {width: 250px;margin: 5px 0;
}

【CSS3】CSS3 学习笔记（1w字+）相关推荐

  1. 11.16 HTML5，CSS3，学习笔记

    hhHTML5,CSS3,学习笔记 html笔记 1.html的基本格式 <!--文档声明,声明当前网页的版本--> <!DOCTYPE html> <!--html的根 ...

  2. 如何写好科研论文（学习笔记2000字）

    如何写好科研论文(学习笔记2000字) 通过本课程的学习,我学习到了许多如何写好科研论文的方法,接下来我将具体阐述我的收获. 一.在第一章中,主要学习了如何造就一篇优秀的学术论文. (一)标题要起得好 ...

  3. 网络工程师(软考)学习笔记8--数字调制技术及脉冲编码调制

    笔者在早些时候已经通过了软件考试的网络工程师,因为以前学习的时候比较赶,当时也是备考研究生入学考试,很多概念也是模糊不清的,现在想重新复习网络工程师的教程,理清概念,同时也是为了下一阶段网络规划师打好 ...

  4. h5(html5),css3入门学习笔记

    萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜 目录 HTML 一.语法规范 二.基本结构标签(骨架标签) 三.vscode工具生成骨架标签新增代码(一定要写): 四.常用标签 ...

  5. 1.html5+css3基础学习笔记(上)

    1 HTML简介 1.1 W3C标准 伯纳斯李1994年建立万维网联盟( W3C ),W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果.所以,我们需要制订我们编写的网页都 ...

  6. HTML5+CSS3基础学习笔记：2

    文档的使用 <!-- 文档的声明,声明当前网页的版本 --> <!DOCTYPE html> <!-- html的跟标签(元素),网页的所有内容都是写跟元素的里边 --& ...

  7. css3的学习笔记1

    一.   边框 1.  border-color border-color是设置边框的颜色.包括border-top-color,border-left-color,border-right-colo ...

  8. css3动画学习笔记

    2021 年 7 月 14 日 行间属性 placeholer 可以实现 input 属性聚焦消失文字 input::placeholer 可以改变 input 中文字的颜色 ::selection ...

  9. CSS3入门学习笔记

    背景样式 <body><P>中皆可放 颜色 <body style="background -color: pink"> 颜色 #FF0000 ...

  10. 前端HTML5/HTML+CSS3/CSS学习笔记(六)

    表单的应用 认识表单 创建表单 认识表单 注:表单"是网页上用于输入信息的区域,用来实现网页与用户的交互.沟通.例如注册页面中的用户名和密码输入.性别选择.提交按钮等都是用表单相关的标记定义 ...

最新文章

  1. 基础设计模式：单例模式+工厂模式+注册树模式
  2. 照片换色 使用Python 或者 java
  3. php 图片处理库 Imagick 代替 gd
  4. python编程输入标准-Python中的输入与输出
  5. 掌握这 11 个方法论，搞定一场完美技术面试！
  6. 二等水准测量记录数据_公路水准测量培训道路放样测量学习
  7. SparkProgrammingRDDs
  8. HttpRequest 类
  9. 中间介（MiddleWare）
  10. [leetcode] Excel Sheet Column Title
  11. 理论物理考研攻略!!!
  12. 聊聊六位半万用表电路（一）——保护
  13. 思科路由器配置命令大全
  14. Python之网络数据采集入门常用模块初识
  15. 三星研究院：发现腾讯的“阿喀琉斯之踵”，互联网营销
  16. vue 使用animate动画
  17. 关于企业邮箱服务器经常被spamhaus反垃圾邮件组织拦截的排错方法分享
  18. 使用Sbert预训练的TTS模型《Expressive Text-to-Speech using Style Tag》
  19. Rasa 文档 中英文翻译版本 3 - Tutorial: Building Assistants
  20. vlc-for-android

热门文章

  1. 验证多个手机号、固定电话，电话之间用英文逗号隔开
  2. ng-zorro自定义主题
  3. flash：uboot下sf（nor flash）的流程
  4. 前端生成pdf并导出，解决了图片不能绘制的问题.（一）
  5. LeanCloud使用入门（android），leancloudandroid
  6. kmeans聚类分析——Python实现
  7. 有关运算符详解补充（想起来就补一补！）
  8. 理解__unsafe_unretained
  9. 行列式求三角形以及任何四边形周长和面积
  10. Pycharm上传工程到远程服务器