前端经验

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

禄小伟
2107
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

禄小伟
1943
1970年01月01日

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




干货!网页设计灵感第一期 #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

这里用到的技巧也很简单,就是在图片之前创建一个<span>,并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活,demo中介绍了20多种样式,大家可以参看。


demo预览地址:http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840

demo下载地址:http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

这种css技巧带来的好处

  • 节约时间 — 你不需要在photoshop中创建图片模板,然后为每张图片生成独立文件。

  • 保留原始图片源 — 我们不用担心日后需要更换图片主题的时候,没有原图片。因为我们根本没有修改他。

  • 相当的灵活 — 你只需要调整css就能换一个完全不同的样式。

  • 在任何站点都能工作 — 这个css技巧在任何站点,任何图片大小下都适用。

  • 解决浏览器兼容问题 — 通过了大多数浏览器的测试 (Firefox, Safari, Opera, 甚至包括行为怪异的IE6)。

基本概念

我们需要在包裹img的div中创建一个span元素,在他上面适用background-image来产生遮罩的效果。如果你不喜欢插入一个空的span标签,我们可以使用javascript来动态生成他,之后我们会介绍到。下面的代码揭示了他如何工作。

对于css代码,我们需要注意的是,需要为div设置position:relative,为span设置 position:absolute。这样你就可以通过为span设置top和left属性,来任意摆布他在div中的位置了。

IE PNG hack

为了能让透明的png图片在ie6中工作,我们需要使用到强大的 iepngfix.htc hack。下载 iepngfix.htc 文件,并在页面<head>标签中添加如下代码。

复制代码
<!--[if lt IE 7]><style type="text/css">  .photo span { behavior: url(iepngfix.htc); }</style><![endif]-->
复制代码

外观

我们只需要修改指定span元素的css,就能实现不同样式的变化。查看demo源代码,你会发现其中的奥秘。

jquery解决方案

如果你不喜欢在页面中直接添加空的span标签,可以使用下面的jquery代码,实现span的动态添加。

复制代码
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){    //预添加 span 标签  $(".photo a").prepend("<span></span>");   });</script>
复制代码

#1. 简单画廊

让我们使用之前介绍的技术,来创建画廊吧。

#1b. 迷你icon

这个例子为了展示了,如何在图片上面放置不同的icon。我们需要为span标签设置不同的css class 名称。

#2. 带文字的图片

该例子为了展示了如何创建带文字连接的画廊。

#2b. 弹出文字

#3. 迷你纸夹

#4. 软木板画廊

sIFR版本(文字替换)

在这个版本中借助 sIFR, 实现将em中的文字替换为手写体。

#4b.胶带效果

#5.黑框艺术画廊

#5b.金边艺术画廊

#6.水彩效果

 

sIFR版本

#7.高光效果

#8.木板画廊

最后我们展示如何使用background-image来实现木板的效果。

最后评论

我们可以看到这种css技巧相当的灵活,他极具创造性,他将图片和css有机的结合在了一起。你也可以使用这种方式,创建自己不同风格的画廊。

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

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