Skip to content

Instantly share code, notes, and snippets.

View Sunpeiming's full-sized avatar

孙培明 Sunpeiming

13 followers · 14 following
View GitHub Profile
@Sunpeiming
Sunpeiming / 什么是JavaScript
Created January 27, 2019 05:35
1.了解JavaScript 2.了解JavaScript发展史 3.掌握JavaScript的引入方式 4.和其他语言的区别
# JavaScript是什么？ #
JavaScript，也称ECMAScript，是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。
最早是在HTML上使用的，用来给HTML网页添加动态功能，由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题及响应用户的各种操作，为客户提供更流畅的浏览效果。因为当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。然而现在JavaScript也可被用于网络服务器，如Node.js。
![博客_什么是JavaScript.jpg](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAEEAeADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ
@Sunpeiming
Sunpeiming / css3动画 animation+关键帧
Last active January 27, 2019 02:28
1.了解animation 2.认识关键帧 3.animation的用法
# css3 animation #
css3 animation是css3的样式属性，它有animation-name（动画名）、animation-duration（持续时间）、animation-timing-function（播放方式）、animation-delay（开始时间）、animation-iteration-count（循环次数）、animation-direction（播放方向）、animation-play-state（播放状态）、animation-fill-mode（时间外属性）共8个子属性。
**css3 animation属性**
**兼容性**
animation属性目前得到了众多现代浏览器的支持，不过和很多css3属性一样，需要添加浏览器的私有前缀。
**与transition属性**
@Sunpeiming
Sunpeiming / css3动画 transform
Created January 27, 2019 02:10
1.transform怎么用 2.什么是关键帧 3.组合用法
# CSS3动画属性Transform解读 #
无论你是前端还是设计师，相信你在网页二维空间上的操作早已经得心应手，JS处理时间线的动画也早已经 烂熟于胸。从今天开始，我跟大家分享一些“新”的东西，网页的第三个维度，以及纯CSS实现的动画。限于篇幅，从初级到比较复杂的3D动画大概会说个三四 个回合，我们就从最初级的东西开始说，由于这些知识大部分都是我个人根据文档所理解的，主要是当笔记。所以，也许会跟不少同学所理解的不太一样，甚至相 悖，我希望大家可以在文章下面指出不对的地方，我们共同来学习。
在我们以前使用绝对定位的时候就已经初步接触过Z轴，那时候只是简单的层叠，现在介绍一个更强大的属性：Transform 。
从字面上就能看出，Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。
这次我主要拿 rotate 来写例子，因为他能更好的配合后面3D的部分，其他的几个参数大家只需要挨个替换一下，就能明白他们的用法。
3D Transform 中 rotate 有三种方法，rotateX(angle) X轴旋转，rotateY(angle) Y轴旋转，rotateZ(angle) Z轴旋转。
@Sunpeiming
Sunpeiming / css3动画 transition
Created January 27, 2019 01:57
1.css3动画是什么 2.讲解 transition
# 什么是动画 #
在学习CSS3动画之前，我们必须先介绍一个什么是动画，动画都具有哪些特性。
动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应。
**CSS3动画效果之transition**
CSS3中有两种方式实现动画，transition和animation+@keyframe
两者的作用机制不一样：transition定义在可能要进行动画的元素上，对某些CSS属性进行监听，一旦CSS改变则进行动画；animation定义在马上要进行动画的元素上，一旦定义动画即进行。
@Sunpeiming
Sunpeiming / table表格
Created January 27, 2019 01:33
1.认识table表格 2.table表格的用法
**表格标签**
HTML的 table 元素表示表格数据
*标签省略 不允许，开始标签和结束标签都不能省略*
HTML <tr> 元素定义表格中的行。
*标签省略 不允许，开始标签和结束标签都不能省略*
@Sunpeiming
Sunpeiming / 定位
Created January 26, 2019 02:58
1.什么是定位 2.定位分哪几种 3.定位应该怎样用
position 属性指定了元素的定位类型。
position 属性的五个值：
- static
relative
fixed
absolute
sticky
@Sunpeiming
Sunpeiming / 浮动
Created January 26, 2019 02:30
1.什么是浮动 2.浮元素浮动后会遇到哪些问题 3.问题的解决方法
**浮动(float)**
在css样式中我们就提到了浮动，有很多人不知道什么是浮动那么我们今天就来聊聊什么是浮动和浮动会带来的那些问题及解决方法。
正常情况下设置两个div```<div class="a"></div><div class="b"></div>
```正常情况类名叫b的div会在类名叫a的div下面显示这个叫文档正常流。但设置浮动后元素就会脱离文档正常流就像一块漂浮物一样，当一个元素浮动时，其他内容会“环绕”该元素。
float属性有四个值：left，right分别浮动元素到相应的方向，none（默认），使元素不浮动，inherit将从父级元素获取float值
**float用处**
@Sunpeiming
Sunpeiming / CSS样式讲解
Last active January 26, 2019 02:06
1.什么是css样式样式的作用 2.css基础样式 3.部分组合样式讲解
简单地讲，CSS样式全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表有被我们称为CSS样式或认知的div css样式，而CSS就是Cascading Style Sheets英文单词开头字母缩写，CSS样式是一种制作网页样式的新技术也就是本DIVCSS5介绍主题。
**作用：**
css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。
**字体属性：(font)**
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
@Sunpeiming
Sunpeiming / 深谈css选择器
Created January 25, 2019 05:31
1.了解选择器 2.掌握选择器的用法
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS的选择器分为两大类：基本选择题和扩展选择器。
基本选择器：
- 标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用)
@Sunpeiming
Sunpeiming / css盒模型
Created January 25, 2019 02:27
1.了解盒模型。 2.解决和模型中常见的一些问题。 3.用盒模型画三角形。
**css盒模型理解**
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。
**一，css盒模型概念**
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
![博客_css盒模型.gif](data:image/gif;base64,R0lGODlh9AH0AdUAAP////b7/Pr68e32+fL09OTy9u3v59vt8+bq6+np4eXp6tLp8OHl3snk7dje38Dg6tnZ0dTa1Lfb58zU1a7X5MjQy6XS4cjIwb/JypzO3rvFwZPK27K+wIrF2K+7t7e3sYHB1aWztXe80qKwrm+4z6enoZioq5ampIudoImbm5aWkX6Sln2RkYWFgXGHi3CGh39/f2V9gWR8fnV1cFhydldxdGRkYEtna0tnbD5cYVNTUENDQDIyMCEhIBEREAAAACH5BAAHAP8ALAAAAAD0AfQBAAb/QIBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq/b7/i8fs/v+/+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t44TIRxhHCETuMHCoiE5LmEuOSHDzM2ZxcdgycvO1daP0MjKYj9E3UXfP+Lj39fm503Z0ttf4UPuQvBG5ej19tAOKC4owEQKIS5chFAw5F8IAgAJAuCwwoUJBdMKAhRIYEiIgRxcYGhSrhu5cQA+hiT3zp5JdMVw5Fi50sQQDixZ8gIwYWWMlcBuxlRJDSYO/xc0csSoCMDmSmpK6HmLVzJk06UnozorlgMFAYQ4ASg4epUqwZo5aHCY8C8HDl4KUBzVatYBAAIRi5r95XZJOHryxDllCk6q30cxAwseTLhwDiLFaBBJ5tKEscU5XILtB+AmUgBB