前端开发中常用的 CSS 样式整理(经历之谈)

这是一些经验之谈,虽然本博客里的文章几乎都可以称得上是经验之谈,但本文章更接地气,更实用,你可以把它当做一个字典来用,因为下面所收集的css样式真的很常用。 CSS文件中引入CSS文件 @import url("base.css");  角标实现 div{ vertical-align:super } 小三角实现 .triangle{ display:block; width:0; height:0; border-width:0 8px 8px; border-style:solid; border-colo...

2016
12-29

window 10 下安装nodejs及npm

装上了 window 10 系统后,对于我们这些做前端开发的人来说重新装上开发环境是必不可少的。但新的东西往往会给你带来不少麻烦。比如这篇文章要介绍的Nodejs的安装和npm的安装就是一个不争的事实。 为什么用了window 10 后麻烦事就来了呢?因为也非常简单,那就是window 10 目前还不支持.msi后缀的安装文件,因此你无法从Nodejs官方下载.msi格式的文件进行安装,于是你只能下载.exe的安装包。 .msi格式的安...

2016
12-14

AngularJS 操作JSON文件数据

前言 由于移动端的火爆,AngularJS 也自然而然的流行了起来,不可否认,虽然不能说现如今不能没有AngularJS,毕竟还有其它一些同样棒的MVVC框架,但有AngularJS会让我们的前端世界变得更加多姿多彩。AngularJS 的数据双向绑定可谓是其一大亮点。下面我们变来看一个AngularJS 操作JSON文件数据的例子。 写JSON文件数据(PHP) 不多说,直接上代码。 HTML代码 <!DOCTYPE html> <html ng-app=...

2016
11-20

CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

JavaScript 常用的排序方法

前言 Javascript 中排序可以说是非常常见的,不管是在平时的开发还是面试中排序都或多或少出现过。虽然说不算多,但是必不可少是肯定的。那么下面我们就来看看Javascript 中的排序方法都有哪些,在这里就不全列出,只把非常常用的分享给大家,其它的其实我觉得你知道有这个方法,并且知道在什么情况下可以用或者在什么情况下不能用就可以了。 原生sort sort() 方法用于对数组的元素进行排序,在原数组...

2016
10-28

JavaScript 实现数组去重的方法

前言 JavaScript 实现数组去重,一个在面试时常常会碰到的问题。如果你还像我那么不关注,不了解,不研究,那么你下次面试注定会失败,因为我可能就是败给了“去重”。下面我就把去重的方法都整理出来,下面的这些方法都来源于网络,但为了让你看得更清楚明了,我对方法中的代码稍稍作了下修改,但整体的思路还是不变的。 首先我们假定要对如下数组进行去重 var array=['true',true,false,'1',1,'','sss',"...

2016
10-22

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

立即执行函数(function ( ){……})( )

前言 我不相信你没有看这像标题里的函数书写方法,如果你说没有,那只能说明你才刚刚进入了 JavaScrpt 世界,那这种写法是什么意思,又有什么好处呢?下面我们就一步一步走进立即执行函数世界。 传统与简式 下面我们先来看一个极简单的传统与简式的例子,简单得一看就懂。 传统 我们最常见的函数执行方式就是,先定义一个函数,然后再调用它,如: /*执行函数*/ demo(); /*定义函数*/ function ...

2016
10-17

nodejs+express+mongodb+ejs 数据渲染实例

前言 nodejs+express+mongodb+ejs 的搭配相信很多朋友都不会陌生了,但对于初学者来说,这可以是一道不可逾越的鸿沟。比如:怎么从数据库中读取数据并渲染到页面中?这是一个前端总是会遇到的问题,下面我就给大家分享下如何实现数据的渲染。为了不让你有过多的负担,我这里只把关键代码贴出来,但也足以解决你的问题了。 例子 ejs 模板代码 <!DOCTYPE html> <html> <head> ...

2016
10-08

connect-flash 用法详解

前言 说到 connect-flash ,估计也有很多朋友像我一样被它虐了好一阵子,很多朋友可能都会遇到过这个问题:Express4.x 中的 connect-flash 为什么不起作用?或者 connect-flash 怎么用?诸如此类的问题,在这里我就给大家戳破 connect-flash 的神秘面纱! 官方解释 The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being d...

2016
10-05

自己开发的第一个 gulp 插件-文件筛选

前言 自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了...

2016
09-30

两次电话面试,都败给了自己,一个字“服”

因为自己想找个跟自己职业规划有交集的平台,于是不经意间开始了面试之旅。下面是自己对两次电话(分别对应两家公司)面试分析总结,以便让自己查缺补漏。这里我所说的是专业技能方面的电话沟通。 拍摄于珠海唐家港湾大道2015/11/28 首先,对两次面试中自己出现的共同问题进行分析记录。 通过这两次面试后, 我发现自己在跟别人沟通的时候,语速会不自觉地变快,甚至快到连话都说不清。虽然第一次电话面...

2016
09-22

前端自动化工具 gulp 初识

前言 我们先来看看官方是怎么说的: 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。 gulp安装 初始化项目,初始化的的作用就...

2016
09-20

mongoose 安装及配置

前言 mongoose 是什么,有什么用?要想知道这个问题的答复,我们就不得不先说说mongodb了。关于mongodb在这里我只是抛砖引玉,如果想了解更多内容,可以自行查找,网上多得是。 MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。他...

2016
08-31

纯 JavaScript 带小图导航的焦点图、图片切换效果

作为前端,我们以开发页面时,难免会用到一些切换效果,比如常用的焦点图(Banner),但在这里我要跟大家分享的是一个带小图导航的图片切换效果,一个不基于其它库(如:jQuery)的实现方法。我们还是先来看看这个效果的过截图吧,一个是垂直方向的,一个是水平方向的,我想就这两个基本的效果都可以解决你90%关于带小图导航的图片切换了问题了。 由于代码有点多,就不在这里贴出来了,你可以点击对应效果...

2016
08-29

MongoDB 在 window 下安装及配置方法

MongoDB 下载 第一步肯定是要下载 MongoDB,你可以到官网上下载,官方下载网址为: https://www.mongodb.com/download-center#community 择window版本,下载msi版本的MongoDB,下载完之后直接安装就可以了,这里有一点值得注意的是,MongoDB 的安装路径最好不要太深,因为后面会得经常切换到MongoDB 的 bin 目录(以下所执行的命令行都是在bin目录下执行的)。 MongoDB 安装、配置 把MongoDB安装到D:\...

2016
08-26

学习计划:centos7 web服务器配置(完)

前言 由于自己的虚拟空间也快到期了,并且自己有两个站(云库网、朝夕熊博客),如果不用云主机的话,那么真的吃不消,所以为了在到期之前换上云主机,于是就有了这个学习计划,centos7 web服务器配置。都说站长都是全能的,什么都得自己来,现在我信了。下面我就把这段时间以来学习web服务器配置的心得分享出来,并把一整套学习计划记录清单都列出。 学习心得 学习东西不是一天打鱼两天晒网,学习是一...

2016
08-24

Centos 7 phpMyAdmin 服务安装及配置

前言 现在跟大家来讲讲最常用的数据库管理工具 phpMyAdmin 。这个工具我就不用多说了,对于不怎么了解数据命令的朋友来说用它最适合不过了,它把一行行让人记不住的命令变成了界面操作,就像操作window系统一样简单。好了话不多说,我们开始吧。 phpMyAmin 下载、安装 下载 我们打开  phpMyAdmin 官网找到下载页面,这里我给大家下链接  http://www.phpmyadmin.net/downloads/ 在页面里你可以看到不...

2016
08-23

Node.js + Express.js 环境配置

前言 Node.js 如今越来越火,不管你走到哪里,跟Node.js 打交道的机会还是很多的,例如:当你想换工作的时候,在各大求职网站上东找找西找找的时候,你肯定会看到 会Node.js 或者 精通 Node.js。一直都觉得 Node.js 好高大尚,所以也不敢撞他,但不管我如何对它,都不会阻止它的流行及在前端中的地位,所以今天我还是硬着头皮开始了Node.js 之旅。我这次是在Window 系统下安装测试的,但是万变不离其踪,...

2016
08-14

常用的 JavaScript 函数封装

获取兄弟节点 所有兄弟节点(不含自己) // 获取所有兄弟节点(不包含自己) function yk_sibling( elem ) { var ar = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem) { ar.push( n ); } } return ar; } 所有节点(含自己) // 获取所有兄弟节点(包含自己) functio...

2016
08-11

wordpress 后台编辑器 TinyMCE 自定义按钮

前言 这是一篇很不错的文章,你可以从这篇文章里得到一个提高效率的方法,一个关于如何为 wordpress 后台自带的编辑器 tinymce 添加自定义按钮的方法,纯粹干货,行过路过,真的不要错过。 在写这篇文章的时候,我也把这个自主开发的,云库网制造的说它不是 wordpress 插件,但它又确确实实有插件的功能的两堆代码。不多说,是马是驴,拉出来溜溜就知道。代码如下,分两步。 代码案例 修改functions.p...

2016
08-06

纯 JavaScript 固定导航效果(fixed)

前言 现在不少网站页面本身内容都会比较多,从而导致页面过长,当用户浏览页面时,如果要用户反手动拉滚动条回到顶部找导航那多少会有点不方便,或者说这样用户体验不怎么好。其实他个问题有很多种解决方案,如:给页面添加一个返回顶部的按钮,这样用户就可以快速地返回到顶部。那很多时候我们就是导航固定在页面的顶部,毕竟这个对于提高用户体验还是有帮助的。下面我们就来看看如何通过纯 JavaScript ...

2016
08-04

纯 JavaScript 实现单条新闻滚动效果

前言 单条新闻滚动效果相信你已经见过不少了,这个效果在很多导航页面中或多或少都会出现。最近我们360导航中就看到了这个效果,可当我研究下这是怎么实现的时候,竟然有意外的收获,这个页面里用到的方法是我从来都没有想过的,不过我也不知道我的猜测对不对,光从页面中的 HTML 结构及运动效果我大概地想到了这是如何实现的,但到底不是不真的像我想的那样,那就不一定了。好了费话不多说,我们还是来...

2016
08-01

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。 移动端 Tab 切换 JavaScript 代码 function tab(tabWrap,tabMenu,tabLink,tabContent,...

2016
07-30

纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

Z-Blog常用标签大全(精华版)

前言 博客系统的历史可以说很悠久了,还记得我刚开了自己的博客的时候,有朋友跟我说,现在都什么年代了,还玩博客。他说得也不无道理,但很多东西有没有价值,用不用,关键还是看自己,我觉得博客还是个好东西,我可以把工作中的经验都记录下来,把生活中的快乐,想法或者些许感悟都记录下来,以便日后装B之用。扯远了,回到正题,本文要介绍的是 Z-Blog 常用标签,相对来说我还是比较喜欢 Z-Blog 博客...

2016
07-21

织梦常用标签大全(精华版)

前言 之前跟大家分享过了 wordpress 常用标签,现在跟大家说说织梦常用的标签,为什么说是常用的,因为本文是基于一个实践网站(云库网)所用到的标签的基础上添砖加瓦的。如果你是一个初学者,那么这篇文章真的非常适合你,如果你对于常用的织梦标签已经比较熟悉了,那么也可以把它叫藏起来,毕竟好记性不如烂毛头。 为了让你看得更加清晰明了,有些直接把完整的 HTML 结构也贴出来了。这个对于理解如...

2016
07-19

Centos 7 nginx 服务安装及配置

前言 nginx 跟 Apache 的作用差不多,都是提供 WEB 服务,但 nginx 相对于 Apache 来说,在性能上有更好的体现,而 Apache 有稳定性方面会比 nginx 好一些,所以要用哪一个,自己喜欢就好。下面就给大家分享下 nginx 的安装及配置方法。如果你觉得下面记录的东西有点乱,你可以直接看本文后面的总结也是可以的,更省时,更省心。我在这里。 小插曲 如果你直接执行命令 # yum install nginx 你会得到这...

2016
07-16

Centos 7 Apache,php,MariaDB,FTP的卸载方法

前言 作为站长或者前端开发者,云服务器对于你来说应该不陌生了。我相信你还经常跟Centos 7 Apache,php,MariaDB,FTP等这些极常用的服务打了不少交道。包括这些服务的安装,配置和卸载。本文要分享的是如何卸载这些服务。下面我们就一步一个脚印来了解这些服务的卸载方法。 卸载 Apache 卸载 我们的第一个例子就先拿 Apache 来开刀。不管你信不信现在我就要把它从Centos里卸载掉,不要问为什么,你...

2016
07-15

Centos 7 php 环境安装及配置

前言 在这篇文章之前,我已经分享过三篇有关于在 centos 7下配置 web服务器环境的文章了,如果你有什么不懂可以前往阅读在这里为您开个传送门,速度有点快,请系好您的安全带《Centos 7 FTP(vsftp)服务安装及配置》、《Centos 7 Apache 服务安装及配置》、《Centos 7 MariaDB 数据库服务安装及配置》。加上这一篇文章就刚好凑够 WEB 服务器环境配置的四大天王了。php 的安装及配置相对于前面三个服务的...

2016
07-13