前端经验

Nginx科普 Nginx如何配置404错误页面

禄小伟
1384
1970年01月01日

什么是404页面

如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面。404页面的默认内容和具体的服务器有关。如果后台用的是NGINX服务器,那么404页面的内容则为:404 Not Found

为什么要自定义404页面

在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄悄的流失了。如果此时能有一个漂亮的页面能够引导用户去他想去的地方必然可以留住用户。因此,每一个网站都应该自定义自己的404页面。

NGINX下如何自定义404页面

IIS和APACHE下自定义404页面的经验介绍文章已经非常多了,NGINX的目前还比较少,为了解决自家的问题特地对此作了深入的研究。研究结果表明,NGINX下配置自定义的404页面是可行的,而且很简单,只需如下几步:

1.创建自己的404.html页面

2.更改nginx.conf在http定义区域加入: fastcgi_intercept_errors on;

3.更改nginx.conf(或单独网站配置文件,例如在nginx -> sites-enabled下的站点配置文件 )

中在server 区域加入: error_page 404 = /404.html  或者 error_page 404 = http://www.xxx.com/404.html

4.更改后重启nginx,,测试nginx.conf正确性: /opt/nginx/sbin/nginx –t

#502 等错误可以用同样的方法来配置。  

error_page  500 502 503 504 = /50x.html;

注意事项:

1.必须要添加:fastcgi_intercept_errors on; 如果这个选项没有设置,即使创建了404.html和配置了error_page也没有效果。fastcgi_intercept_errors 语法: fastcgi_intercept_errors on|off 默认: fastcgi_intercept_errors off 添加位置: http, server, location 默认情况下,nginx不支持自定义404错误页面,只有这个指令被设置为on,nginx才支持将404错误重定向。这里需要注意的是,并不是说设置了fastcgi_intercept_errors on,nginx就会将404错误重定向。在nginx中404错误重定向生效的前提是设置了fastcgi_intercept_errors on,并且正确的设置了error_page这个选项(包括语法和对应的404页面)

2.不要出于省事或者提高首页权重的目的将首页指定为404错误页面,也不要用其它方法跳转到首页。

3.自定义的404页面必须大于512字节,否则可能会出现IE默认的404页面。例如,假设自定义了404.html,大小只有11个字节(内容为:404错误)。

学习linux第一课,linux快捷键大全!

禄小伟
1206
1970年01月01日

刚刚接触linux只知道照着别人总结的教程去做,但是有一些东西还是要自己牢牢记住的,例如linux下重复命令快捷键,DOS里面是F3,可以到了linux就是ctrl+p了,如果不知道效率会大大降低的,用到了就收藏一下吧!

在命令行下的的快捷键:

删除
ctrl + d      删除光标所在位置上的字符相当于VIM里x或者dl
ctrl + h      删除光标所在位置前的字符相当于VIM里hx或者dh
ctrl + k      删除光标后面所有字符相当于VIM里d shift+$
ctrl + u      删除光标前面所有字符相当于VIM里d shift+^
ctrl + w      删除光标前一个单词相当于VIM里db
ctrl + y      恢复ctrl+u上次执行时删除的字符
ctrl + ?      撤消前一次输入
alt  + r      撤消前一次动作
alt  + d     删除光标所在位置的后单词

移动
ctrl + a      将光标移动到命令行开头相当于VIM里shift+^
ctrl + e      将光标移动到命令行结尾处相当于VIM里shift+$
ctrl + f      光标向后移动一个字符相当于VIM里l
ctrl + b      光标向前移动一个字符相当于VIM里h
ctrl + 方向键左键    光标移动到前一个单词开头
ctrl + 方向键右键    光标移动到后一个单词结尾
ctrl + x       在上次光标所在字符和当前光标所在字符之间跳转
alt  + f      跳到光标所在位置单词尾部

替换
ctrl + t       将光标当前字符与前面一个字符替换
alt  + t     交换两个光标当前所处位置单词和光标前一个单词
alt  + u     把光标当前位置单词变为大写
alt  + l      把光标当前位置单词变为小写
alt  + c      把光标当前位置单词头一个字母变为大写

历史命令编辑
ctrl + p   返回上一次输入命令字符
ctrl + r       输入单词搜索历史命令
alt  + p     输入字符查找与字符相接近的历史命令

其它
ctrl + s      锁住终端
ctrl + q      解锁终端
ctrl + l        清屏相当于命令clear
ctrl + c       另起一行
ctrl + i       类似TAB健补全功能
ctrl + o      重复执行命令
alt  + 数字键  操作的次数

VIM下的快捷键:

复制、删除:

yw 表示拷贝从当前光标到光标所在单词结尾的内容.

dw 表示删除从当前光标到光标所在单词结尾的内容.

y0 表示拷贝从当前光标到光标所在行首的内容.

d0 表示删除从当前光标到光标所在行首的内容.

y$ 表示拷贝从当前光标到光标所在行尾的内容.

d$ 表示删除从当前光标到光标所在行尾的内容.


移动:

w(e) 移动光标到下一个单词.

b 移动光标到上一个单词.

0 移动光标到本行最开头.

^ 移动光标到本行最开头的字符处.

$ 移动光标到本行结尾处.

H 移动光标到屏幕的首行.

M 移动光标到屏幕的中间一行.

L 移动光标到屏幕的尾行.

gg 移动光标到文档首行.

G 移动光标到文档尾行.


常用:

H :光标移至屏幕顶行
M :光标移至屏幕中间行
L :光标移至屏幕最后行
0:(注意是数字零)光标移至当前行首
$:光标移至当前行尾

w或W :光标右移一个字至字首
b或B :光标左移一个字至字首
e或E :光标右移一个字至字尾
Ctrl+u:向文件首翻半屏
Ctrl+d:向文件尾翻半屏
Ctrl+f:向文件尾翻一屏
Ctrl+b;向文件首翻一屏

i :在光标前
I :在当前行首
a:光标后
A:在当前行尾
o:在当前行之下新开一行
O:在当前行之上新开一行
r:替换当前字符
R:替换当前字符及其后的字符,直至按ESC键

最近在研究PHP集成环境,在导入MySQL数据库的时候提示我上传文件过大,数据库备份文件大概2.5MB,在查询相关资料以后才知道默认在导入的时候限制是2MB,以下是解决办法。

错误提示:

您可能正在上传很大的文件,请参考文档来寻找解决方法。

解决方法:

检查php.ini 配置文件中的以下三个地方,upload_max_filesize, memory_limit 和post_max_size,并且推荐修改的值要稍大于导入的巨大sql数据库文件;依照这个提示,修改后,重启了php环境,OK!

 

ps:在使用PHP集成环境的时候发现运行PHP的效率特别低,执行一个操作要比在服务器或者虚拟主机上的时间多出几倍,最后发现在IE下面会好一些,没找出是什么原因,有待观察。

image

很多做网站的朋友不是都懂设计的,这里为大家准备了85款免费的LOGO PSD,大家可以下载修改成符合自己的网站样式,为大家节省了设计logo的时间,专注于网站内容,喜欢麻烦给个好评哟亲!

image

部分LOGO预览

85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!

85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!

85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!

85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!85款免费 LOGO PSD 文件下载!300DPI!每一款都有详细分层!

imageimage

相关文件下载地址:

百度网盘  |  新浪微盘  |  来自禄's Blog

QQ设计从QQ2010开始,就有一个潜移默化的理念-情感的容器。任何设计师都无法去揣摩每一位特定用户的情感!当完美的手段替代完美的结果,让用户将自身的形态投射到产品中,才会与产品之间形成最佳的期许和认可。

image

故事开始:

image

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

QQ2013项目设计总结!自然·人与物的完美触点!附QQ2013 beta1 下载!

相关下载地址:

官方下载  |  来自禄's Blog

很多设计师在创作的时候都会遇到某一款字体很漂亮是却不知道是什么字体,这里就为大家推荐几个常用的在线字体搜索网站!

WhatTheFont

一个英文字体的搜索网站,一般群里人需要查英文字体我都会丢去这个网站,简称“WTF”,可不是whatthefuck...!


Whatfontis

同样是一个英文字体的搜索网站,不常去,不过国外很流行的,效果如何大家用用便知。


qiuziti.com

这个就不得了啦,哈哈!国内用户可以使用这个网站,这个完全是为国内用户推出的,对中文的识别度也比较高,推荐大家使用!求字体,当然不求人!


点击进入相关网址:

                   

日常工作中会遇到很多的专题,在没有flash的支持下,如何让你的页面更生动呢?CSS3不是新事物,CSS3动画也逐渐受到大家的关注,在机甲&洛克合作不删档放号专题中首次尝试了CSS3的简单动画制作。


拿到页面设计稿后,起初打算从龙星的眼睛、噜噜、枪炮武器上进行一些效果实现,最后为了突出活动抽奖,决定增加抽奖按钮的光效以及奖品的呼吸效果。最终页面呈现包括五个效果点:龙星眼睛的眨动、噜噜的飘动、抽奖按钮的光效、奖品的hover呼吸灯效果以及枪炮武器的发光效果。


思路:首先设置初始属性,背景Y轴位置为0,将背景遮住眼睛,最终属性则是将背景位置移动到-3000px的位置,通过背景在4s内沿Y轴匀速运动3000px的过程实现了眼睛眨动的效果。噜噜的飘动以及抽奖按钮的发光效果与眼睛眨动效果是同样的原理。效果代码如下:


思路:初始属性设置背景透明度为0.6,最终属性设置背景透明度为1,通过背景透明度的平滑变化,形成一个发光的呼吸效果。效果代码如下:

实现这样简单的动画效果,需要运用到CSS3的哪些属性呢?

CSS3有3个动画属性:

1、变形transform
transform字面上就是变形,改变的意思。在CSS3中,transform主要包括了旋转rotate、缩放scale、移动translate、扭曲skew以及矩阵变形matrix。具体属性说明以及demo演示请使用chrome浏览器查看 http://tgideas.qq.com/demo/css3/transform.htm

洛克&机甲不删档合作放号专题上眼睛的眨动、噜噜的飘动、抽奖按钮的发光效果并不是只能用背景移动来实现,我们还可以可以运用translate对div进行位置移动来实现。
Tgideas的一些实例运用(请用chrome浏览器或firefox浏览器查看):

炫舞趣味数据腾讯游戏客户端游戏人生安全大闯关
piggyjinhuikarin


2、转换transition
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition的使用写法:

合并写法:

具体属性说明以及demo演示请使用chrome浏览器查看 http://tgideas.qq.com/demo/css3/transition.htm
Tgideas的一些实例运用(请用chrome浏览器或firefox浏览器查看):

变异第一站 双节出击未来战士 伊泽瑞尔炫斗之王 热血内测
lamdgnornor


3、动画animation

animation按照字面上的意思就是“动画”的意思,但在CSS3中animation只应用在页面上已存在的DOM元素上。运用animation,结合变形transform、转换transition,可以制作出简单的动画效果。在制作动画前,先了解一下关键帧keyframes。

1)、Keyframes

我们把他称为“关键帧”,在使用transition制作简单的转换效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动 作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现 了,此时我们也需要这样的一个“关键帧”来控制。

keyframe写法:

2)、动画animationanimation的写法:

合并写法:

具体属性说明以及demo演示请使用chrome浏览器查看 http://tgideas.qq.com/demo/css3/animation.htm

Tgideas的一些实例运用(请用chrome浏览器或firefox浏览器查看):

QQ炫舞2女王的恩典美女找茬 太极献礼
nornorhairong


CSS3的兼容性:

各浏览器前缀:
IE:-ms-
Firefox:-moz-
Chrome:-webkit-
Safari:-webkit-
Opera:-o-

一点总结:

CSS3效果不需要任何其他插件的支持,对于iPhone、iPad都可以正常浏览,但是对于IE,几乎不支持,国内50%左右的用户仍然在使用IE,导致很大一部分人其实看不到这个效果,但是对于FireFox、Chorme等浏览器进行CSS3效果的实现,对于高端浏览器用户来说,不失为一件令用户感到开心的事情,同时这也是一件让自己开心的事情。
初次尝试CSS3效果实现,由起初的无从下手、焦躁不安,到最后效果呈现时的开怀,其实很多事情并不难,只要自己去尝试探索,总能在其中找到各种快乐!

专题地址:

浏览地址:http://jjxf.qq.com/act/a20120907roco/,请使用chrome浏览器或者Firefox浏览器查看。

从今天起将不定期为各位网友提供网页设计灵感的干货,这些干货都是来自世界各地的伟大设计师手下惊人的高品质的各类艺术品。




干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

干货!网页设计灵感第一期 #001

   不得不叹服淘宝的页面设计大师们,每次出来的页面都让人们眼前一亮,立刻充满无限的购物欲望,刚刚经历了双十一的网友还没有消化掉账单马上又来了双十二,这次双十二页面设计更为给力,小清新的感觉,分为5大专题,分别是不美就SHI、都是纯爷们、特色中国、新不了情和这才是生活等。

   

   5大专题头部欣赏

   

   双1212 3D文字PSD下载

   

   相关文件下载地址

   新浪微盘 | 百度网盘 | 来自禄's Blog

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4