春风十里

发表于 分类于

说明：

  1. CentOS 7 自带的有Git，只是版本较低，好像是版本1.8.3.1，这里介绍最新版本的安装方法，如果你想更新到最新版本，可以参考这篇文档；
  2. 以下所有代码均为在命令行输入的命令，$符号后的为一条完整命令，依次输入即可；
  3. 在连接到服务器之后，从用户根目录开始执行下面的操作。

  1. 安装依赖库。依次运行下列命令:
    $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
    $ yum install gcc perl-ExtUtils-MakeMaker
    $ yum -y groupinstall "Development Tools"

  2. 卸载旧版本的Git。运行下面的命令：
    $ yum remove git

  3. 下载最新版Git到服务器
    $ wget https://github.com/git/git/archive/v2.14.0.tar.gz

  4. 解压文件，进入文件夹
    $ tar zxvf v2.14.0.tar.gz
    $ cd git-2.14.0

  5. 编译安装
    $ make configure
    $ ./configure --prefix=/usr/local/git --with-iconv=/usr/local/libiconv
    $ make all doc
    $ sudo make install install-doc install-html

  6. 修改环境变量，编辑/etc/profile文件
    $ sudo vim /etc/profile

  7. 在文件最后一行添加以下代码（按”i”进入编辑模式，输入）
    $ export PATH=/usr/local/git/bin:$PATH
    输入完成后，按ESC键退出编辑模式，然后输入:wq 并回车，保存生效

  8. 输入下面这条命令
    $ source /etc/profile

  9. 查看是否安装成功，使用下面这条命令：
    $ git --version

  10. 如果显示 git version 2.14.0，说明Git 2.14.0 安装成功

发表于 分类于

功能介绍

今天要跟大家分享搭建一个简单的Express服务器并实现HTTP请求，同时在服务器端获取到请求数据。文章主要关注服务器搭建、HTTP请求的模拟实现以及请求数据的获取，至于数据的后续操作和对请求的响应不在今天的讨论范围之内。

服务器搭建

由于整个环境需要建立在node.js的大环境之下，所以下边的所有操作均是在node环境下进行的。

如果你还没有安装node，请自行安装。这里就不再单独介绍node.js的具体安装步骤了，需要的请自行百度。

创建项目

这里演示的时候，我是在桌面创建项目。因此，首先在终端使用终端命令创建一个项目文件夹，取个名字，就叫test吧。

  1. 在桌面创建项目文件夹，并进入文件夹，创建一个名字叫public的文件夹。在终端依次输入下面的命令：
1
2
3
4
$ cd desktop
$ mkdir test
$ cd test
$ mkdir public
  1. 初始化项目。在终端输入下面的命令：
1
$ npm init -y
阅读全文 »

发表于 分类于

当我们在浏览器输入url地址并按下回车键以后，从前端角度讲，大概会经历下面几个处理过程：

  1. 在浏览器的地址栏输入URL并按下回车;

  2. 浏览器首先会检查本地是否存在当前请求页面的缓存，并查看缓存是否过期；

    1. 如果存在该请求页面的缓存且缓存未过期，则直接加载缓存；
    2. 如果不存在该请求页面的缓存或者缓存已过期，则进入步骤3

  3. DNS根据输入的URL地址解析对应的服务器IP地址；

  4. 根据获取的IP地址建立TCP连接（三次握手）；
    TCP

阅读全文 »

发表于 分类于

写在前面

好久没跟新博客了。最近一直忙着恶补JavaScript的知识，没办法，小白就要多练多看。这两天写了个简单的视频播放器，实现了一些简单的功能。今天就把这个简单的播放器分享出来，仅供参考。希望能对大家有点帮助。。。尽管这个写的比较low。。

效果功能

效果预览

效果如下图：

实现功能

播放器是用原生js写的，实现了一些基本的功能：

  • 播放/暂停、停止、空格键暂停/播放；
  • 音量加减、支持拖动调节音量以及上下方向键调整音量；
  • 支持静音、全屏播放；
  • 支持发送弹幕，弹幕颜色随机、出现位置随机；
  • 支持播放列表点击切换、支持自动循环列表播放。
阅读全文 »

发表于 分类于

构思

这是一个简单的练手demo。我要实现的是一个简单的猜拳游戏，游戏双方分别为用户和电脑（严格来说是浏览器，暂且这么叫吧），电脑出拳随机，用户选择出拳后，电脑停止滚动，同时显示电脑和用户出拳结果，判断胜负关系，同时统计用户成绩。

其实要实现的效果很简单，直接说我的思路吧。

  1. 首先，将三种出拳的图片列出，获取元素到数组；
  2. 然后生成一个随机数，使用随机数作为数组下标，获取电脑出拳结果；
  3. 设置定时器让电脑快速出拳并滚动显示；
  4. 定义函数实现用户点击出拳，并将结果显示在出拳显示区域；
  5. 获取双方出拳结果，定义函数，判定胜负关系；
  6. 统计胜负关系，重置游戏至下一轮。
阅读全文 »

发表于 分类于

写在前边

在平时写页面布局的时候，我们经常会遇到设置元素水平居中或者垂直居中的情况，这时，我们就需要根据遇到的实际情况选择处相应的更为合适的设置元素居中的方法。经过查阅资料，集合自己的理解，特意把元素居中的内容整理出来，分享给大家。但愿可以对大家有所帮助。

一、水平居中

  1. inline或者inline-*元素

    对于父元素是块级元素的内联元素来说，你只需要这么做：

    1
    2
    3
    .center-children {
      text-align:center
    }

    这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

  2. 单个块级元素

    当某个块级元素的宽度width已知的时候，可以通过设置其左外边距margin-left和右外边距margin-right值为auto来实现元素的水平居中。例如我们经常会使用的：

    1
    2
    3
    .wrapper{
      margin: 0 auto;
    }

    当块级元素宽度未知时，也可以利用定位先让其向右移动其父元素高度的一半，然后再向左移动自身宽度的一半即可。

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    另外：请注意，不要使用float把一个元素居中！尽管，这儿有个小技巧

阅读全文 »

发表于 分类于

CSS样式的分类

我们都知道CSS样式分为三种，一种是直接写在标签上的行内样式，一种是写在页面头部<head></head>标签内部的style标签内部的内部样式，最后一种是单独写在CSS文件里需要在头部使用link标签引用的外部样式。而且这三种样式具有不同的优先级别，离标签最近的样式具有更高的优先级别，即三者的优先级别由高到低的顺序为：行内样式>内部样式>外部样式。

关于CSS样式覆盖

绝大多数时候我们使用的是外部样式。

我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上添加新样式覆盖它们。
那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？这就涉及到CSS样式的优先级别了。

在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先，会覆盖掉之前的同优先级别的样式。

阅读全文 »

发表于 分类于

清除浮动

当一个容器中的所有元素都设置浮动后，一定要记得清除浮动。如果不清除浮动，会造成页面坍塌（即某些元素尺寸会消失）。

常用清除浮动代码：

1
2
3
clear:both;  /*清除所有浮动*/
clear:left;  /*清除左浮动*/
clear:right;  /*清除右浮动*/

伪类

CSS伪类是用来添加一些选择器的特殊效果的。

常用伪类

a标签的伪类

a标签伪类在使用时需要注意先后顺序，否则设置可能不会生效。

阅读全文 »

发表于 分类于

关于Font Awsome 字体图标

Font Awsome是一款开源的字体图标库，拥有大量简洁优雅的图标(Version 4.7.0已经拥有675个图标)，是一款强大、丰富、简单、好用的字体图标库。

Font Awsome的特点

  • 完全开源、免费
  • 字体库强大、丰富
  • 无需JavaScript支持
  • 矢量图标可缩放，扩展性强
  • css控制，使用方便
  • 完美兼容Retina屏
  • 兼容所有框架、兼容桌面级应用
阅读全文 »

发表于 分类于

Emmet插件介绍

Emmet插件(前身为Zen Coding)是一个能大幅度提高前端开发效率的一个工具。

基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能在运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。

阅读全文 »
0%