透明遮罩层 垂直居中的div 内容不透明

因为没有新增 css 类别,所以关于css 的东西暂时归类到了 Html5 今天干活遇到的几个问题,下班前和大家分享 透明遮罩层 居中内容不透明 居中div显示内容 因为我的html5页面只在手机端展示,所以不考虑万恶的IE低版本浏览器 并且我把单独的css内容直接定义在html 标签里,这样你们看起来更加直观 透明遮罩层 <div id="nav_img_ios" style="display:none;height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:10

一介布衣博客今天开始支持 markdown 编辑

博客经过几次改版,但是阅读性一直不太好,让人读起来比较累,分不清主次. 所以周末尝试把之前的百度编辑器换成了 markdown 编辑器,希望在阅读性方面有提升. 博客的几处改动 因为之前的博客是html格式,现在是 markdown 格式,所以在首页提取缩略内容的功能去掉了. 首页标题字号调小了 列表页标题下方增加了博客分类 内容页的渲染为了兼容以前的老博客,既可以渲染 html 博文,也可以渲染 markdown 博客. 代码视图变动 function(){ console.log('欢迎光临一介布衣博客'); } 单行代码视图 alert('一介布衣'); 关于mar

创建 shell 文件 实现 git拉取代码 forever 别名 启动 node.js 服务

这一篇和前面的一篇博文有点类似,forever 利用别名启动 node.js 服务简单和大家分享三点:一:forever 利用别名启动 node.js 服务首先我们需要为 node.js 启动文件创建一个 软链接ln-sapp.jsnode_start有了上面的软链接,我们就不需要再使用 app.js 来启动node.js 服务了.二:git 拉取指定分支的最新代码gitcheckoutdev gitpull三:创建 shell 文件nanostart_node.sh输入下面内容,保存#!/usr/bin/envbash projectPath=/code/test cd $projectPa

javascript 生成二维码实现链接从微信内跳出

现在的二维码相当火,借着移动互联网的风口也快飞起来了.现在各种语言的各种开源包,基本都有对应的生成二维码的源码.但是今天我们分享的不是服务器生成二维码,而是前端页面如果用 javascript 来生成一个二维码.这种动态生成二维码的需求越来越多.如果都要依靠服务器端赖生成,第一:面临资源紧缺的状况,如果在大的并发环境,这种cpu密集型计算必定导致一个问题,就是请求排队,那就不用谈了.用户不会一直在傻傻的等你.第二:就算你顺利生成了二维码,还面临一个网络传输带宽的压力,虽然它很小很小,但是当在一个并发压力大的环境下,依然面临带宽被占的问题.这样说来,如果能在客户端生成二维码,貌似是最好的解决方案

XtraFinder 让你的mac finder 更有特性扩展更人性

在使用mac 的时候,是不是常常遇到这样一种情况.你想创建一个文件,可是找不到入口.....如果你想再打开一个 finder ,该怎么办?在 finder 图标上右键, 新建 finder 窗口,如果想让它想 chrome 一样新建标签该多爽....那么今天推荐的这个插件可以满足你,而且免费哦.请自己用 google 百度一下 'XtraFinder'查看 XtraFinder 插件提供的扩展功能,根据自己的喜好随心设置.出自:XtraFinder 让你的mac finder 更有特性扩展更人性出自:XtraFinder 让你的mac finder 更有特性扩展更人性 =====下面开始进入

ssh-agent 与 ssh 的区别

之前有过一篇博文关于多个ssh key 在同一台电脑上如何管理使用其实哪一篇并不完善.所以想专门再开博客来了解下有关 ssh 和 ssh-agent 的一些知识点.ssh-agent 是什么:出自:ssh-agent 与 ssh 的区别 (9月10日更新)它是linux 系统上的一个程序,这个程序可以控制和保存公钥身份验证所使用的私钥程序,听起来好拗口.当 ssh-add 把私钥交给 ssh-agent 来管理时,其他程序需要身份验证的时候都可以申请交给 ssh-agent 来完成整个认证过程.所以,到这里我们应该大体了解 ssh-agent : 它就是一个帮助我们验证身份的程序.如何使用语法

node.js 下 forever 利用别名启动 node 服务

出自:node.js 下 forever 利用别名启动 node 服务这一篇博文又和大家分享 forever 这个开源包.今天说到的 forever 别名启动node.js 服务,和上一篇博文密切相关,涉及到 linux下创建硬链接 软链接的问题 ,还没有看的现在就去看看,不收费的,随便看!我们平时如何用 forever 来启动 node 服务:foreverstartapp.js利用 linux 软链接 (别名) forever 如何启动 node 服务:foreverstartapp_link上面的 app_link 就是 app.js 文件在 linux 系统下的一个软链接然并卵,这

[转]Node.js 与 io.js 那些事儿

去年12月,多位重量级Node.js开发者不满Joyent对Node.js的管理,自立门户创建了io.js。io.js的发展速度非常快,先是于2015年1月份发布了1.0版本,并且很快就达到了2.0版本,社区非常活跃。而最近io.js社区又宣布,这两个项目将合并到Node基金会下,并暂时由“Node.js和io.js核心技术团队联合监督”运营。本文将聊一聊Node.js项目的一些历史情况,与io.js项目之间的恩怨纠葛,他们将来的发展去向。希望能从历史的层面去了解这个开源项目在运营模式上是如何演变和发展的Node.js项目的由来自从JavaScript被Brendan Eich创造出来后,

linux 下的使用 ln 创建 软链接 和 硬链接

linux 下的一个指令 ln作用: 创建软链接或者硬链接Linux 系统下每创建一个文件,系统都会为此文件生成一个 index node 简称(inode) ,而每一个文件都包含用户数据(user data) 与 元数据(metadata)用户数据里记录了文件的真正内容.元数据里记录的是文件的附加属性,如 文件大小,创建时间,所有者等,其中 上面提到的 index node 就保存在元数据中.在linux 中文件名并不是文件的唯一标识,index onde 才是唯一标示,系统查找文件也是通过 index node 来查找内容数据块.如何查看文件的 index node:➜/Users/zha

百度联盟广告不能检测微信浏览器

今天发现一个问题,当我在微信内置浏览器访问一介布衣博客时 ,竟然展示了广告...这当然很惊奇:一. 我在投放广告的时候选择了移动端不展示.二.我的blog 是响应式布局,就因为一个横条广告,彻底毁了. (在移动端浏览器不显示广告,但是微信内置浏览器显示blog底部横幅广告)所以,必须要解决掉.首先我需要准备一个公共方法,来判断当前浏览器是不是微信内置浏览器 ,正好用的了我之前写到的一篇blog .我们直接在公共的地方把此方法定义下:functionisWeiXin(){ varua=window.navigator.userAgent.toLowerCase(); if(ua.match(/M

zsh 有哪些方便快捷的功能,提升shell输入体验 优点简介(不断补充)

这几天宅在家里享受胜利日的假期,连续2天下雨,出不去....无聊之时会玩一玩 zsh ,确实是个好东东,作为一个攻城狮的你,必须要去玩转一下.之前介绍了如何配置利用oh-my-zsh 来配置你的zsh 及 zsh 通过修改配置文件,皮肤模板来定制化属于你的shell上面的传送链接你可以直接点击查看 (这句话好像是废话,忽略吧)今天分享几个 zsh 使用小技巧:如果你不知道该如何使用 zsh ,那么你之前如何使用的 bash ,现在就怎么使用.没错,这就是一个技巧.zsh 360°无死角全兼容 bash ,之前怎么写,现在就怎么写. 这才叫酸爽!按 tab 键补全之前在 bash 环境下.如果我

incr.zsh 补全插件 让你在zsh 模式下全自动补全指令或目录

前面有几篇介绍了如何开启zsh终极装逼模式,如果你已经开启,请好好的装下去.今天这个插件会助你一臂之力,加油,骚年!今天说的这个东东看上去确实有尿性,不管我如何修饰都抵不过它的一张效果图.想要你的shell有这样的效果,首先满足下面的条件:1 你用 oh-my-zsh 来协助你完成 zsh 的配置2 你开启了 zsh3 你下载了这个 插件4 你把插件执行shell 写到了你的 .zshrc 配置文件中上面说到的 1,2 在之前的博文里面早,最上面其实我贴出来如何开启 zsh 的链接.(如果你没有鼠标的话,肯定点不开)今天就是分享下 3,4 提到的内容:如何下载这个插件:官网:http://mi

zsh 依赖 oh-my-zsh 轻松换皮肤模板

上一篇博文简单的介绍了 zsh是什么,如何依赖oh-my-zsh配置这一篇和大家分享一个小插曲,就是换皮肤,配色.人都是感性的动物,大多数开始鼓捣的东西,必须看上去顺眼.oh-my-zsh 帮我们集成了很灵活的皮肤配置方案.皮肤wiki :https://github.com/robbyrussell/oh-my-zsh/wiki/themes 里面对 oh-my-zsh 集成的各种皮肤都有说明和示例,你看上眼的就可以试用下.首先在wiki 里找到你中意的皮肤 名称.然后去 修改 zsh配置文件➜/Users/zhangzhi>nano.zshrc然后在配置内容中找到#timethato

oh-my-zsh配置你的zsh提高shell逼格终极选择

抱歉,这篇博文推迟发布了,人都是有惰性的...看在这个牛逼闪闪的标题就原谅我吧!为何这篇文章要归类到 mac 下? 第一个问题,稍后我们说明下.zsh是个什么东东? 第二个问题...你应该稍微接触过一点点shell ,或者了解一点点?如果不知道 shell ,那就点下广告离开吧, 人生苦短,时间珍贵.在unix 内核的操作系统中,当然现在衍生出好多分支,linux ,OS X 都算.shell 就算和上面这些系统内核指令打交道的一座桥梁,我们通过键盘输入一种自己容易记忆识别的符号标识(shell 命令)然后 shell 解析这种命令再反馈给内核去执行一系列操作.那么问题来了,今天要说的zsh

padding margin 的盒子模型 及 0 auto 为何能居中

初学css 的同学很难分清 margin 和 padding 真正所表达的意思.很早之前我们知道 padding 表示内边距, margin 表示外边距.这个定义让人迷惑.按照上面的盒子模型,可能理解起来更好一点.这个图里有一个盒子,就是除去最外层黄色部分.这时你独立看剩下的这个盒子,padding 表示content 距离盒子上下,左右边的距离(不包括border本身距离)所以 padding 是指盒子内容相对盒子本身上下左右各边的距离.当然也可以 单独通过 padding-top,padding-right,padding-bottom,padding-left 来分别制定不同方向的边框.

css 中 position 定位的那4个属性 relative absolute fixed static

找准自己的位置很重要.页面也是一样.设计师出手的psd是这样的结果施工后的效果是这样的:这样的结果相信PO喝完酒也不会验收成功吧.页面在设计时的层次,羽化,字体,大小,边距,背景等.这些都不是随便堆砌起来的.所以切页面的时候要完全按照设计师的psd 效果来实施,才不会让最后的产品和设计相差甚远.其中,比较难的是层的定位.所以今天大概说一下 position 属性相关的一点点知识分享.position 属性包含如下几个值:relative 相对的 (这个属性值有参照物)absolute 绝对的 (这个绝对其实也是有一个参照物的)fixed 固定的(就像钉子钉在那里一样)static 静止的 (这

gulp 传参数 实现定制化执行任务

如果你想自动化构建一些东东,请使用 gulp ,还不明白什么是 gulp ,那么请用 google 百度一下 "什么是gulp"如果你不知道如何翻墙使用 google ,那么请离自动化构建远一点(最好披星戴月地赶快逃离IT圈)因为之前专门有一篇介绍了gulp ,是什么,能帮我们做什么,如何去做,请点击此博文查看:angular 系列三 gulp 代码构建工具简介所以上面博文提到的东西这里都不会再重复说明.今天和大家分享的是 如何使用 gulp 传输参数.我今天碰到一个应用场景:老项目A还在线上维护,新项目B已经着手在开发.这2套项目后端调用是一致的,唯独不同的地方是前端UI

[转]几个css 相关的黑科技

我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:.box{border-radius:4px;}稍微高端一点的是这样的:.box{border-radius:4px6px6px4px;}然而,终极黑科技是这样用的:.box{border-radius:5px5px3px2px/5px5px1px3px;}对,它可以赋8个值,没见过?不着急,具体的解释是这样的:斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别

css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化

传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat 默认。背景图像将在垂直方向和水平方向重复。repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次(无节操拉伸)。inherit 规定应该从父元素继承 background-repeat 属性的设置。很明显,上面的 css2 满

mac 下 使用 iterm2 配置及快键键使用

之前介绍过一篇关于mac 下使用和配置 iterm2的blog今天这篇稍微详细一点介绍,并且搭配 zsh (zsh 会单独开一篇博客来说)iterm2 官方站点:http://www.iterm2.com/ 最新版本 2.2我使用还是 2.0安装以后需要一套皮肤来装饰它,毕竟人类是一种视觉动物,我的iterm2是下面这个样子.配色:字体,颜色 等都可以来配置.打开 iterm2 / Preferences打开配置菜单后:Profiles / Colors在这个窗口你可以调整你喜欢的各种颜色,但是这样做完后,你会发现并不是你想要的皮肤,因为你把你认为自己喜欢的各种颜色配置好以后,当他们在终端组合

使用 viewport 来控制移动端页面宽高,缩放等展示效果

现在的移动端开发页面已经离不开<meta name="viewport"> 元素的支持了.viewport 标签对移动端设备浏览器的宽,高,缩放等属性做了相应的控制:<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">现在我们来看下 content包括哪些属性的定义:width=device-width默认页面宽度等于 设备浏览器宽度 (device-width)height=device-height

ios 设备 默认Safari 浏览器载入系统默认样式

在开发移动设备Html5页面时,有没有遇到过,你设置的样式,在ios 设备里面面目全非了.尤其是和安卓设备对比后,会让你有种不相信css 的感觉.其实在 ios设备中使用 Safari 浏览器时.你页面里面的 input ,button ,submit ,reset 等元素都会被载入系统默认的css 来控制.那么问题来了,如果默认禁止浏览器载入这些默认样式呢?在你的css 样式中引入如下:input[type="submit"], input[type="reset"], input[type="button"], button{ -

如何判断你的页面是在微信内置浏览器打开的

由于微信的种种封闭,导致在微信内置浏览器打开的页面,会把外部链接全部屏蔽掉.所以通用的做法是,判断是微信浏览器打开的时候做一种处理方式.非微信浏览器打开时做另外一种处理方式.类似你想在微信打开页面里点击下载按钮,一定是不成功的.我们会友好的跳出一张引导图.那么要做出这样的逻辑判断,我们就需要获取当前页面所在的环境是不是微信内置浏览器,如何判断?functionisWeiXin(){ varua=window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){

HTML5页面滑动到最底部触发内容加载 javascript实现

最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度 functiongetDocumentTop(){ varsc

javascript 实现html5 页面下拉刷新

使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示

javascript xmlhttprequest 纯天然无第三方插件 ajax 实现

手写的纯javascript 实现xmlhttprequest .屛弃了所有第三方javascript 包,这样做的目的主要是节省空间,现在很多第三方框架动辄几十K,上百k 等.如果我们只用到其中一个很小的 ajax 功能,完全没有必要这样做.而且当前的应用环境是手机端的展示,所以对于流量的考虑至关重要.看下代码实现:functionajax(option,callback){ //option参数必须是对象,里面包括(type请求方式,url请求路径,param请求参数) if(typeofoption==='object'){ //option没有定义请求url,直接返回错

移动H5前端性能优化指南-[转]

移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南[加载优化]加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点· 减少HTTP请

git 默认对文件名大小写不敏感 (不区分文件名大小写)

git 默认不区分文件名大小写当你创建一个文件后,叫 readme.md 写入内容后 提交到线上代码仓库.然后你在本地修改文件名为 Readme.md 接着你去提交,发现代码没有变化.gitstatus无任何提示信息.其实 git 默认对于文件名大小写是不敏感的,所以上面你修改了首字母大写,但是git 并没有发现代码任何改动.那么如何才能让 git 识别文件名大小写变化.一 配置git 使其对文件名大小写敏感git config core.ignorecase falsezhangzhi@moke:~/code/demo$gitconfigcore.ignorecasefalse二 从git

node.js 下使用 redis 作为缓存介质

之前有一篇介绍node.js 下,轻量级缓存应用模块 node-cache点击访问.今天介绍使用 redis 作为缓存介质.首先,我们需要一个 node.js 下可以访问 redis 的中间件,就是 node_redisgithub地址:https://github.com/NodeRedis/node_redis安装:npminstall--saveredis然后我们封装一个缓存类:varredis=require('redis'); varconfig=require('../config'); ///////////////////////////////

node.js 下 cluster 模块充分利用cpu资源实现群集功能

为什么会出现cluster ?大概在 node.js V0.8 之前的版本,node.js 本身不提供多核多进程处理的解决方案,当然你可以使用第三方的开源包来实现.直到V0.8之后的版本,node.js 内置了 cluster 功能,node.js 终于可以不依赖第三方cluster包来利用服务器多核,多线程资源.node.js 内置模块 cluster 的出现,帮助我们轻松利用多核,多进程开发的难度及负载均衡群集.cluster 是如何工作的 ?工作进程是通过使用 child_process.fork 方法派送的,他们可以通过IPC (进程间通讯实现父进程和子进程相互传递句柄及通讯)看下面的

回到顶部