My Blog

CSS3学习笔记

2018-04-16T00:00:00+00:00

css3--笔记

属性选择器

E[attr=val] eg. inoput[type=”text”]
E[attr~=val] 表示一个单独的属性值，这个属性值是以空格分隔的
**E[attr =val]** 要么表示一个单独的属性值，要么这个属性值是以’-‘隔的
E[attr*=val] 表示的属性值里包含val字符并且在任意位置
E[attr^=val] 表示的属性值里包含val字符并且在开始位置
E[attr$=val] 表示的属性值里包含val字符并且在结束位置

伪类选择器

E:first-child //相对于E元素的父级作参考，“所有”子元素的最后一个子元素,并且位置要对应
E:last-child //相对于E元素的父级作参考，“所有”子元素的第一个子元素,并且位置要对应
E:first-of-type //相对于E元素父级作参考，“特定类型元素E”的第一个子元素
E:last-of-type //相对于E元素父级作参考，“特定类型元素E”的最后一个子元素
E:nth-of-type(n) //选中第n个(n>=1,当n作为系数时n的取值可以为0)

E:nth-last-child(n) //以最后一个元素为起点,规定属于其父元素的第二个子元素的每个 p 元素

关于n的取值范围：
1. 当n作为一个独立的值时，n取值为>=1,例如nth-child(n)
2. 当n做一个系数时，n取值为n>=0或者n<0，例如nth-child(2n+1)、nth-child(-n+5)此处需要理解2n+1或者-n+5作为一个整体不嫩小于1;

E:only-child //选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素
E:only-of-type //是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素
E:empty //匹配没有任何子元素（包括text节点）的元素E
E:target //URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素
E:before/E:after //在每个 <p> 元素的内容之前/之后插入新内容(content:””; //必须要加！！)
E:selection //能定义被选择时的background-color，color及text-shadow样式
E:placeholder //用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色

颜色

opacity:1 //透明度（子元素会继承父元素的透明度）
background:transparent //完全透明
rgba(0,0,0,0.3) //rgb加透明度
hsla(0~360,0~100%,0~100%,0~1);

文字

text-shadow:h-shadow v-shadow blur color //基础的文本阴影效果

h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色。参阅 CSS 颜色值

text-overflow: ellipsis //单行文本溢出,需要配合overflow: hidden;white-space: nowrap

边框圆角

做重合圆环时，第二个圆环的位置需绝对定位，left top值需设置成圆环border-width的值的负数，以便完美重合

border-radius 可分别设置长（纵轴）、短（横轴1）半径，以“/”进行分隔，遵循“1，2，3，4”规则
border-color 4个值也可以分别设置
表格运用圆角需要border-collapse:separate
当圆角半径小于或等于边框宽度时，元素內解是直角

边框阴影

box-shadow:h-shadow v-shadow blur (扩展量) color

//水平偏移量：正值向右，负值向左，垂直：正值向下，负值向上
//偏移量和扩展是可以数学运算的（扩展量是扩展4个方向上的）
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离//从一个颜色值在一定距离内进行一个渐变至透明的过程
color	可选。阴影的颜色。参阅 CSS 颜色值

box-shadow:inset h-shadow v-shadow blur (扩展量) color //内阴影

背景

background-clip: content-box;//默认的背景填充区域，只填充内容
background-clip: padding-box;//从padding处开始填充背景
background-clip: border-box;//从border处开始填充背景
background-origin: content-box;//背景填充定位原点
background-size: 100% auto;//背景图片大小
background-repeat: no-repeat;//不平铺

Flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性
- 任何一个容器都可以指定为Flex布局
```
.box{
display: flex;
}
```
- 行内元素也可以使用Flex布局
```
.box{
display: inline-flex;
}
```
  注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为Flex项目（Flex item），简称“项目。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction属性
  
  #### flex-direction属性决定主轴的方向（即项目的排列方向）
```
 .box-direction{
   flex-direction: row | row-reverse | column | column-reverse
 }
```

其属性值为：

+ row（默认值）：主轴为水平方向，起点在左端。 + row-reverse：主轴为水平方向，起点在右端。 + column：主轴为垂直方向，起点在上沿。 + column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap属性 #### 默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
css .box{ flex-wrap: nowrap: nowrap | wrap | wrap-reverse; }

1. nowrap(默认):不换行
2. wrap: 换行，第一行在上方
3. wrap:-reverse:换行，第一行在下方

3. flex-flow
#### flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。     ```css
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
```

4. justify-content属性
#### justify-content属性定义了项目在主轴上的对齐方式。
```css
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
```
<img src="/images/flex/7.png"><br>

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右:

+ flex-start（默认值）：左对齐 + flex-end：右对齐 + center：居中 + space-between：两端对齐，项目之间的间隔都相等。 + space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性
#### align-items属性定义项目在交叉轴上如何对齐。
```css
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```
<img src="/images/flex/8.png"><br>

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下:

+ flex-start：交叉轴的起点对齐。 + flex-end：交叉轴的终点对齐。 + center：交叉轴的中点对齐。 + baseline: 项目的第一行文字的基线对齐。 + stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content属性
#### align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
```css
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```
<img src="/images/flex/9.png"><br>

该属性可能取6个值:

+ flex-start：与交叉轴的起点对齐。 + flex-end：与交叉轴的终点对齐。 + center：与交叉轴的中点对齐。 + space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 + space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 + stretch（默认值）：轴线占满整个交叉轴。

项目的属性
以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order属性 #### order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
```
  .item{
    order: <integer>;
  }
```
2. flex-grow属性 #### flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
```
  .item{
    flex-grow: <number>; /* default 0 */
  }
```
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3. flex-shrink属性 #### flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
```
  .item{
    flex-shrink: <number>;/* default 1 */
  }
```
  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
4. flex-basis属性 #### flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
```
  .item {
    flex-basis: <length> | auto; /* default auto */
  }
```
  它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5. flex属性 #### flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
```
  .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  }
```
  - 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  - 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
6. align-self属性 #### align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
```
  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
```
  该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

过渡

transition: property duration timing-function delay

transition-property //规定设置过度效果的CSS属性的名称
transition-duration //规定完成过度效果需要多少秒或毫秒
transition-timing-function //规定速度效果的速度曲线
1. linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
2. ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
3. ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1))
4. ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
5. ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
transition-delay //定义过度效果何时开始

旋转

transform: rotate; // 2D旋转
transform: rotateX/rotatrY/rotateZ; // 3D旋转
可以配合 perspective: 100px; 使用
1. perspective-origin: 50% 50%; //默认
2. 当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。
3. 属性只影响3D转换元素
4. 取值为none或不设置，就没有真3D空间
5. 取值越小，3D效果就越明显
6. 值无穷大，或值为0时与取值为none效果一样
transform-style: flat(平面的)/preserve-3d(表示所有子元素在3D空间中呈现)/preserve(保持原状)
transform: scale(1,1); // 括号里填倍数 2D缩放
transform: scaleX/Y/Z(1) //3D缩放

动画

animation-name: // 动画名称
animation-duration: // 动画持续时间
animation-play-state: // 动画状态
animation-iteration-count: // 动画播放次数
animation-fill-mode: // 动画终止时的状态
animation-direction: //动画执行的顺序
animation-timing-function: // 动画过度曲线
animation-delay: // 动画延时

/*动画序列*/
@keyframes change//名字{
  0%{

  }
  50%{

  }
  100%{

  }
}

判断鼠标进入容器方向

$("div").on("mouseenter mouseleave",function(e) {
     var w = $(this).width(); // 得到盒子宽度
     var h = $(this).height();// 得到盒子高度
     var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
     // 获取x值
     var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
     // 获取y值
     var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
     // 将点的坐标对应的弧度值换算成角度度数值
     var dirName = new Array('上方','右侧','下方','左侧');
     if(e.type == 'mouseenter'){
         $(this).html(dirName[direction]+'进入');
     }else{
         $(this).html(dirName[direction]+'离开');
     }
});

一文了解GitHub上人气最高的十大JS框架

2018-04-16T00:00:00+00:00

在这篇文章中，我们将介绍GitHub上人气最高的十大JavaScript框架

JavaScript是一种高级的解释型编程语言，与HTML、CSS一起被认为是互联网内容工程的三大核心技术，它可用于生成交互式动态网页，并能够提供视频游戏等在线程序。

React JS

React JS是由Facebook创建的代码库，可以用于生成强有力的可重用用户界面组件。
使用React的好处之一在于通过使用可帮助提高应用程序性能的虚拟DOM，来隐藏编程的复杂性。
React JS的功能包括：语法扩展，单向数据流，组件等等。

Vue JS

与React一样，Vue是构建用户喜爱的界面的另一个框架。
随着时间的推移，这个渐进式框架的设计变得越来越容易采用。因此这个代码库可以很简单地与其他项目集成，并随时使用。
Vue JS以其简单性而广为人知，除此之外，此代码库很轻，包含完整的文档，并且在开发过程中具有灵活性。
Vue鼓励开发人员编写“简单的JavaScript”。

Node JS

Node JS是有史以来最好的服务器端开发框架之一，它大大提高了JavaScript在服务器端脚本项目中受欢迎程度。Node JS引入了包管理工具NPM，帮助了许多程序员更加轻松地工作。
开发人员也喜欢它，是因为它提供了非阻塞（I / O）模型，可用于开发实时Web应用程序，易于学习，并且拥有大型社区。
用node.js可以写爬虫

Atom 中文社区

Atom是迄今为止最好的文本编辑器之一。GitHub桌面版默认使用编辑器。
与sublime text和visual studio相比，它拥有强大的功能，并能自动补齐，还继承了拼写检查，因为非常易于使用。然而，刚开始使用Atom可能会有些不便，因为你需要花费时间设置插件，才能体验其伟大之处。
不过，在Linux上安装Atom并不是那么难。

HTML 5 Boilerplate 中文文档

网页的开发变得越来越复杂。迫于生产力的压力，我们不得不压缩日常的工作。而采用HTML 5 Boilerplate的项目，开发过程可以变得更加愉快。
这款最流行的前端样板框架有助于快速构建强健、适应性很强的web应用程序。
这款框架包括Normalize.css、jQuery、基于Modernize的自定义人脸识别代码库、并且拥有很高的性能。

Three JS 中文基础教程

Three JS是3D计算机图形学框架之一。
Three JS利用WebGL引擎，在Web浏览器中创建漂亮的3D计算机图形。它拥有很多十分受欢迎的功能，其中包括特效和场景、相机、蒙皮网格（SkinnedMesh）和变形混合网格（morphblendmesh）动画、灯光等等。
其庞大的社区集合了大量程序员和用户，非常的活跃，因此这个项目将会稳步发展。
很棒的一个作品
React VR

Meteor JS 易百教程

论及为所有平台构建应用程序的框架，Meteor JS应该是迄今为止最好的应用程序之一。
Meteor JS支持实时Web开发，简化了客户端、服务器端乃至数据库应用程序的开发，初学者可以很轻松地入门，且该框架拥有庞大的开发人员社区。

Express JS

Express JS是一个灵活的Node JS Web应用程序框架，可以用于开发高质量的Web和移动应用程序。
Express JS主要用于构建Web应用程序和API，在JavaScript社区中非常流行。接触过该系统的人都可能听说过MEAN栈（MongoDB、Express、AngularJS 和Node.js），Express正式该栈的后台。
Express JS加快了开发过程，易于配置和定制，并继承了大量模板引擎，可以很简单地与数据库连接。

Chart JS

对于大数据来说，数据的可视化非常重要，不仅仅是统计人员，而且对web开发人员来说也是如此。
通过Chart JS，可以在网页上显示精美的图表，从而保证数据在可视化之前不会受环境变化的影响。
Chart JS很轻很快，可用于创建响应式图表，具有清晰的文档，并支持8种图表类型。此外，Chart JS还拥有庞大的用户社区，所以可以很快找到问题的解决方法。

Yarn

这是一个JavaScript包管理工具，有助于简化开发过程。
与React一样，Yarn是由Facebook开发的，可以认为它是NPM工具的改良版，因为它支持并行操作，这是npm所没有的功能，且可以更有效地利用了网络。
Yarn受欢迎的原因包括：更快地的执行速度、强大的工作系统、许可检查功能、以及与NPM和和Bower软件包管理工具的完美兼容。

转载自：CSDN
译者：弯月，编辑：言则
查看原文
我自己添加了各框架的文档链接地址

HTML5学习笔记

2018-04-16T00:00:00+00:00

html5--笔记

避免变量名污染的方式

html5 自执行函数
```
(function(){
...
})();
```
jQuary $
```
$(function(){
...
});
```

input-type类型

button(单机按钮)
checkbox(复选框)
file(文件上传)
hidden(隐藏的输入字段)
image(图像形式的提交按钮)
password(密码字段)
radio(单选按钮)
reset(重置按钮)
submit(提交按钮)
text(文本)
html5中type类型：

email

(email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。)

url

(url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。)

number

(number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：Points: <input type="number" name="points" min="1" max="10" step="2" value="6"/> (value为默认值 step为步长))

range

(range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：<input type="range" name="points" min="1" max="10" />)

date pickers:

date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间（小时和分钟）
datetime 选取时间、日、月、年（UTC 时间）
datetime-local 选取时间、日、月、年（本地时间）

search

(search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。)

.dataset[] 获取自定义数据集

event.prenventDefault(); 取消事件的默认动作

SVG

Scalable Vector Graphics 可缩放矢量图形

优势：体积小，质量高，效果好，可控程度高

以文件方式载入方式：
1. **<iframe src="demo.svg" frameborder="0"></iframe>
2. <object data="demo.svg" type=""></object>
3. <embed src="demo.svg" type=""></embed>
直接把svg代码复制进html中

html5 新选择器

返回第一个满足选择器条件的元素，一个dom对象 document.querySelector(selector);
返回所有满足该条件的元素，一个元素类型是dom类型的数组 document.querySelectorAll(selector);

类比jQuery的$('.item')是返回一个jQuary对象(dom元素的数组) 本质上jQuery方式和querySelector方式都是获取DOM数组，只不过jQuery会多一些其他成员 dom数组的每一个成员注册事件不能像jQuery一样直接注册，需要遍历每个子元素分别注册

h5就是将我们经常需要的操作又包装了一层

添加事件监听

element.addEventListener('click',function(e){
  ...
  e.perventDefault();//阻止默认事件
});

Element.classList

输出Element拥有的class的数组

Element.classList.add('classAttr');//添加类
Element.classList.remove('classAttr');//移除类
Element.classList.toggle('classAttr',true/false);//切换事件,true为添加、false为删除
ELement.classList.contains('classAttr')//判断当前classlist中有没有classAttr这个属性;

访问历史API

在此之前可以使用window.对象实现前进、后退和刷新之类的操作

标准键值?key=val

window.history.forword();//前进
window.history.back();//后退
window.history.go();//刷新（可传入url不写是本页面）
新加入的APIwindow.history.pushState(state,title,url);//url='?+t'+title

//当我们在伪造访问历史记录的前进或后退时会执行一个popstate事件
window.addEventListener('popstate',function(e){
  //e.state = title;
});
//第一次请求过来，获取地址栏中的t参数
var title = window.location.search.split('=')[1];
title = decodeURI(title);//decodeURI作用是将URL编码转换到之前的状态

全屏API

var element = 需要全屏的元素;
fi(elememt.webkitRequestFullScreen){
  element.webkitRequestFullScreen();
}
else if(element.mozRequestFullScreen){
  element.mozRequestFullScreen();
}
// 标准函数：
else if(element.requestFullScreen){
  element.reuqestFullScreen();
}

css/js注入内容

css使用::before ::after伪类注入（before是元素开始的时候，在元素内部）

body::before{
  content: 'css注入的内容';
}

js

document.write("js注入的内容");

应用缓存

<html lang="en" manifest="cache.manifest">

需要创建一个cache.manifest文件

CACHE MANIFEST
# version 1.0.0

CACHE:			//缓存的文件
  index.html
  script.js
  style.css
			//这一行有一个Tab缩进
NETWORK:		//联网状态下可访问的文件
  *

Web Storage 网页存储

localStorage本地存储 sessionStorage会话存储

var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click',function(){
  if(window.localStorage)
    //txtValue.value = localStorage.getItem('key1');获取一个不存在的键，返回空字符串
    txtValue.value = localStorage['key1'];//获取一个不存在的键，返回undefined
});
btnSet.addEventListener('click',function(){
  localStorage['key1'] = txtValue.value;
});

文件API

提供客户端本地操作文件的可能

对于表单里的input来说：可以直接通过name找到元素//document.form[0].input_file

<form action="">
  <input type="file" name="input_file" id="input_file" multiple>//multiple可多选文件
</form>

拖拽操作

drag&drop 拖&放

var target = document.querySelector('#target');//找到拖拽目标框
target.addEventListener('dragenter',function(){
  //添加拖拽进去事件
});
target.addEventListener('dragleave',function(){
  //添加拖拽离开事件
});
target.addEventListener('dragover',function(e){
  //如果想要捕获drop事件，就一定要在该事件中阻止默认事件
  e.preventDefault();
  e.stopPropagation();//阻止事件冒泡
});
target.addEventListener('drop',function(e){
  //把元素放在该对象中
  if(e.dataTransfer.files.length){
  //拖拽文件
    var files = e.dataTansfer.files;
    for(var i = 0;i < files.length;i++){
      var li = document.createElement('li');
      li.setAttribute('class','list-group-item')
      li.innerHTML = '<h5 class="list-group-item-heading">'
        + files[i].name + '</h5><p class="list-group-item-text">'
	+ files[i].lastModifiedDate.toLocaleDateString() + ' '
	+ files[i].lastModifiedDate.toLocaleTimeString() + ' '
	+ (files[i].size / 1024).toFixed(2) + 'KB</p>';
      fileList.appendChild(li);
    }
  }else{
    //var data = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text/uri-list');//短路运算
    var data = e.dataTransfer.getData('text/plain');
    if(data){
      //拖入的是文本
      target.innerHTML = data;
    }else{
      //拖入的是图片
      var img = document.createElement('img');
      img.src = e.dataTransfer.getData('text/uri-list');

      e.preventDefault();
      e.stopPropagation();
    }
  }
});

使用Jekyll和GitHub搭建个人博客

2018-04-15T00:00:00+00:00

写在前面的话

搭建这个小博客的目的一是为了记录自己学习全栈开发的过程和遇到的问题，二是为了将无意看到的比较好的文章收录下来，方便以后能很快的找到并查看。

使用的技术

GitHub Pages 是可以将静态网页托管在GitHub上的技术。用户可以使用GitHub Pages提供的或者一些开源主题来显示自己的GitHub Pages主页，当然也可以自己设计。
- 可以将自己的静态html文件托管在GitHub上，在这个Repository的网址前加上http://htmlpreview.github.io/?便可在线查看页面。eg.点我查看dome
Jekyll 将纯文本转化为静态网站和博客。
So Simple Theme 一个简单的Jekyll主题，可以为自己的文章和图片文章提供清晰的排版，响应式布局，完美适配了移动端。

过程

首先在电脑上安装Windows上运行的Jekyll 这里是官方教程
克隆主题

有3个安装主题的方法

如果正在运行Jekyll v3.5 + 自行托管，则可以快速将主题安装为Ruby gem。
1. 将以下代码添加到自己的jekyll网站Gemfile
```
ruby gem "jekyll-theme-so-simple"
```
2. 将以下代码添加到自己的jekyll网站的_config.yml文件中
```
yaml theme: jekyll-theme-so-simple
```
3. 然后运行Bundler来安装 theme gem 和依赖关系
```
terminal bundle install
```
可以安装为远程主题

GitHub Pages增加了对任何GitHub托管主题的全面支持。
1. 替换gem "jekyll"为：
```
ruby gem "github-pages", group: :jekyll_plugins
```
2. 运行bundle update并验证所有gem安装正确
3. 添加remote_theme: "mmistakes/so-simple-theme"到_config.yml文件并删除任何其他theme:或remote_theme:条目
直接将所有主题文件复制到项目中可以删除不必要的文件和文件夹：
- .github
- docs
- example
- .editorconfig
- .gitattributes
- banner.js
- CHANGELOG.md
- Gemfile
- jekyll-theme-so-simple.gemspec
- package.json
- Rakefile
- README.md
- README-OLD.md
- screenshot.png

#### 我用的第三种方法，直接复制粘贴直接复制粘贴后需要在根目录下添加index.html文件，这里就可以使用/example/index.htmlexample目录中的index.html文件，并且如果需要其他如post、categories、tags、search等页面，就直接把example目录中对应的md文件复制进项目根目录中。其他修改项就根据README.md提供的教程自定义修改、添加自己想要的功能

将项目托管于GitHub
- 申请github账号
- 创建名称为USERNAME.github.io(USERNAME为自己的用户名)的仓库
- 用GitHub桌面版Push到新建的仓库中
将写好的md格式的文章存储在根目录下的_post文件夹中
- 文件名格式：yyyy-mm-dd-标题

总结

经过一个周末的倒腾，尝试了很多主题，最后选择了这个界面简洁明了的开源主题。
在安装本地Jekyll环境，和迁移这个主题的过程中遇到了很多困难。
因为对整个主题的结构不熟悉，又看到那么长篇幅的英文说明文档，从而失去了耐心。
但是这个主题深深吸引了我，非常喜欢这种简洁明了的风格，因此沉住气仔细阅读了READEME说明。
经过仔细了解主题整体结构，踩过很多坑后，终于成功将网页搭建起来。
修改了一些小内容，为的是自己看起来舒服些。
END

这个Jekyll主题有很多可选功能，类似基于Disqus的评论功能，还有在文章中加入目录的插件。详细参考README.md说明。在此感谢此主题的维护者们。

My Blog

CSS3学习笔记

css3--笔记

目录

属性选择器

伪类选择器

颜色

文字

边框圆角

做重合圆环时，第二个圆环的位置需绝对定位，left top值需设置成圆环border-width的值的负数，以便完美重合

边框阴影

背景

Flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性

flex-direction属性

以下6个属性设置在项目上。

过渡

transition: property duration timing-function delay

旋转

动画

判断鼠标进入容器方向

一文了解GitHub上人气最高的十大JS框架

JavaScript是一种高级的解释型编程语言，与HTML、CSS一起被认为是互联网内容工程的三大核心技术，它可用于生成交互式动态网页，并能够提供视频游戏等在线程序。

HTML5学习笔记

html5--笔记

目录

避免变量名污染的方式

input-type类型

html5中type类型：

email

url

number

range

date pickers:

search

.dataset[] 获取自定义数据集

SVG

Scalable Vector Graphics 可缩放矢量图形

优势：体积小，质量高，效果好，可控程度高

html5 新选择器

h5就是将我们经常需要的操作又包装了一层

添加事件监听

Element.classList

输出Element拥有的class的数组

访问历史API

在此之前可以使用window.对象实现前进、后退和刷新之类的操作

标准键值?key=val

全屏API

css/js注入内容

css使用::before ::after伪类注入（before是元素开始的时候，在元素内部）

js

应用缓存

Web Storage 网页存储

localStorage本地存储 sessionStorage会话存储

文件API

提供客户端本地操作文件的可能

拖拽操作

drag&drop 拖&放

使用Jekyll和GitHub搭建个人博客

写在前面的话

使用的技术

过程

总结

END