显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 
 
 
 

Mac OS X中配置Apache

2015-5-15 20:51:12 阅读68 评论0 152015/05 May15

我使用的Mac OS X的版本是10.10.2,Mac自带Apache。

一. 启动Apache

打开『终端』,输入"sudo apachectl -v",需要输入电脑密码。如下显示Apache的版本:

Server version: Apache/2.4.9 (Unix)

Server built: Sep 9 2014 14:48:20

接着输入"sudo apachectl start",这样Apache就启动了。

打开浏览器地址栏输入:http://localhost,就可以看到页面中显示:

It works!

Apache默认根目录:/Library(资源库)/WebServer/Documents/

Apache安装目录: /etc/apache2/

etc目录默认是隐藏的。可以通过在『终端』输入”open /etc”进行查看

二. 设置虚拟主机

操作步骤:

1. open /etc/apache2/ 进入Apache安装目录

2. sublime打开该目录下的httpd.conf,此为Apache的配置文件

3. 在该文件中找到”#Include /private/etc/apache2/extra/httpd-vhosts.conf”,去掉前面的”#”,并保存

4. open /etc/apache2/extra 进入extra目录,在sublime中打开http-vhost.conf,此为配置虚拟主机文件。

作者  | 2015-5-15 20:51:12 | 阅读(68) |评论(0) | 阅读全文>>

git使用常见问题解决方案

2015-5-12 19:10:08 阅读103 评论0 122015/05 May12

本文整理了git操作中常用的命令,使用场景及命令持续补充中。。。

一. 初始化一个Git仓库,添加文件到该仓库

操作步骤:

1. 创建一个文件夹gitTest,进入该文件夹,执行git init命令。

2. 添加文件到git仓库,使用git add <file>添加,git commit提交。

二. 查看提交记录

操作步骤:

1. 进入gitTest文件夹,执行git log命令,如果内容过多可以采用git log —pretty=oneline

三. 如何回退到指定版本

HEAD^表示上一个版本,HEAD^^表示上上个版本,HEAD~100,表示上100个版本

操作步骤:

1.进入gitTest文件夹,执行git log命令,查看commit信息,得到commit命令的Id,执行,git reset —hard <commitId>就可以穿越到指定版本。

四. 如何查看命令的历史

操作步骤:

1. 执行git reflog查看命令历史

五. 当你在工作区改错了文件,想直接丢弃工作区的修改?

操作步骤:

1. 执行命令git checkout — <file>,丢弃文件的修改

六. 当你不只是改错了文件,而且还添加到了暂存区,如果想丢弃修改?

操作步骤:

作者  | 2015-5-12 19:10:08 | 阅读(103) |评论(0) | 阅读全文>>

IOS7.1 移动端safari浏览器新meta标记:minimal-ui

2014-3-25 12:13:44 阅读1525 评论0 252014/03 Mar25

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

测试URL:http://darkblue.sdf.org/camera-roll/

始终强调人性化设计的苹果当然注意到了这点,于是在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏

效果如图:

 加上标志之后:

需要注意:目前之前IOS7.1中的safari浏览器支持,其他浏览器会报如下的错误

The key "minimal-ui" is not recognized and ignored.

作者  | 2014-3-25 12:13:44 | 阅读(1525) |评论(0) | 阅读全文>>

使用css实现元素的渐显效果

2013-12-30 19:09:55 阅读442 评论0 302013/12 Dec30

实现内容的渐显展开的小技巧,因为元素的height:auto时,动画效果是不生效的,所以我们使用max-height来代替。方案来自Lea Verou推荐的小技巧:http://jsfiddle.net/leaverou/zwvNY/ 。

这里的max-height值需要注意设置时要趋近于真实值,因为max-height的高度影响动画的速度,可以通过Media Query来对不同分辨率下进行优化设置。

DEMO

初始时:

p{max-height:0px; color:rgba(0,0,0,0); overflow:hidden;};

结束时:

p{max-height:260px;color:rgba(0,0,0,.6);}

添加transiton:

p{ transition:max-height 0.5s linear 0s,color 0.3s linear 0.6s; }

作者  | 2013-12-30 19:09:55 | 阅读(442) |评论(0) | 阅读全文>>

移动端实现标题文字的截断

2013-12-27 18:35:38 阅读450 评论0 272013/12 Dec27

适用场景

当屏幕分辨率为320X500时模块标题效果如下:

当屏幕分辨率为480X500时模块标题效果如下:

也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。

实现方式

方案一: DEMO 来自@蒋轩哲

为整个容器 和 标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;  保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进

为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面

为网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里

为标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding-right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:

作者  | 2013-12-27 18:35:38 | 阅读(450) |评论(0) | 阅读全文>>

【翻译】如何使用JavaScript控制CSS Animations和Transitions

2013-10-23 13:56:25 阅读2695 评论0 232013/10 Oct23

源文:http://css-tricks.com/controlling-css-animations-transitions-javascript/

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子。我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程。

有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画,而且其交互效果比大多数JavaScript库更高效。

So,让我们快点开始吧!小伙伴们都等不及了!

注意:Animations(动画)和Transitions(过渡)是不同的

CSS Transitions(过渡)被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终需要的值;而

作者  | 2013-10-23 13:56:25 | 阅读(2695) |评论(0) | 阅读全文>>

360极速浏览器6.5新增渲染模式的配置方式

2013-9-24 15:40:30 阅读4328 评论0 242013/09 Sept24

 最新6.5版本,增加了这个逻辑:

在Head中添加一行代码:

<meta name="renderer" content="webkit|ie-comp|ie-stand">

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用极速模式,兼容模式,IE模式打开。

下次打开网页生效  

作者  | 2013-9-24 15:40:30 | 阅读(4328) |评论(0) | 阅读全文>>

【翻译】10个非常节省时间的CSS整理工具

2013-9-23 11:32:52 阅读721 评论0 232013/09 Sept23

源文:http://www.sitepoint.com/terrific-time-saving-css-tools/

The benefits of having clean, organized CSS are numerous. A site with immaculate CSS will load more quickly, appear more prominently in search results, and serve as a stellar testament of your professionalism for future clients. Everyone from the everyday visitor to the most scrutinous fellow designer will benefit from your diligent, clean CSS markup.

整洁,组织良好的CSS有很多好处。一个干净整洁的CSS的站点将被加载的更快,展现在搜索引擎结果中更加突出,并且在未来的客户端中也能得以很好的展示。从每天的访问者到资深的设计师同事都将从你的辛勤成果整洁的CSS标签中获益。

But, cleaning up your CSS from countless design iterations and changes

作者  | 2013-9-23 11:32:52 | 阅读(721) |评论(0) | 阅读全文>>

字体是个深坑

2013-9-9 15:01:24 阅读496 评论0 92013/09 Sept9

来源:http://yuguo.us/weblog/computer-fonts/

今天在解决字体平滑问题时找到的一篇文章。感觉不错收集到此。

如图,左边是12号的Arial字体,右边是12号的宋体,为啥他们一个有边缘半透明一个没有呢?

如图,上面的是Chrome下的48号图标字体,下图是49号,为啥下面的明显比上面平滑呢?

如图,IE渲染图标的时候为什么垂直方向比水平方向更平滑呢?

有什么CSS属性可以让字体变得平滑呢?

当我脑中浮现出这些问题的时候,辣就是一个深坑啊有木有!两个小时查了80+个英文站,结论如下:

outline和bitmap

简单的说,字体格式分三类其中两大类分别是outline的和bitmap的,就是矢量和点位图。点位图字体是常用语Linux系统的一种老式字体,对于每个固定的font-size都会储存每一个文字的点位图片。矢量字体就是常用的opentype和truetype之类了,字体储存的是矢量信息,所以字体设置不同的font-size的时候都可以缩放。

outline字体可以内嵌bitmap

The 'EBSC' table provides a mechanism for forcing the TrueType scaler to use a particular

作者  | 2013-9-9 15:01:24 | 阅读(496) |评论(0) | 阅读全文>>

兼容浏览器的CSS3阴影效果

2013-9-9 11:39:31 阅读1742 评论2 92013/09 Sept9

一. 在对于CSS3的阴影效果,很多同学都已经使用过了,如:下图的效果

(来源:chrome截图)

CSS3的代码如下:

解释为:横向偏移2像素,纵向偏移3像素,模糊4像素,颜色为纯黑。

模糊取值不能是负数;

横向偏移为正数,则阴影在右侧,为负数,则阴影在左侧;

纵向偏移为正数,则阴影在下侧,为负数,则阴影在上侧;

二. 对于标准浏览器及IE9+的支持效果都很不错,但是对于IE8以下就不支持了。不过我们可以采用IE的独门秘技IE shadow滤镜来实现还算凑合的盒阴影效果。

如下图:

滤镜代码如下:

解释为:颜色为纯黑,偏移模糊为4像素,方向为90度,180度。

Direction值为0阴影在上侧,为90阴影在右侧,为180阴影在下侧,为270阴影在左侧。

三. 在使用IE shadow滤镜时我们可能会遇到下面的问题:

相关滤镜代码如下:

在对文字的容器应用滤镜时发现它的展示效果跟text-shadow类似。那如果解决,可以加个白色背景色即可。

代码更新如下:

最终展示效果:

赞一个,哈哈。

相关生成工具:http://samples

作者  | 2013-9-9 11:39:31 | 阅读(1742) |评论(2) | 阅读全文>>

HTML5新属性DownLoad简介

2013-5-3 11:40:55 阅读1066 评论0 32013/05 May3

今天看到蒋捷宇的一篇文章是讲html5下载属性,原文地址:http://blog.csdn.net/hfahe/article/details/8877015 。正好项目中也有类似的场景,正好拿来用。^ - ^

浏览器的支持情况:

判断浏览器是否支持download属性:

if("download" in document.createElement("a")){...}

如何把代码片断保存成文件下载

<a href="" download="test.html" id="test">下载test文件</a>

document.getElementById('test').onclick = function(){

document.getElementById('test').setAttribute('href', 'data:text/html; utf-8, '+encodeURIComponent(document.body.innerHTML));

}

HTML5这个DownLoad的属性使用很简单

1. 首先,download属性是专门用在a标签的,并且a标签要设置相应的href属性,指定要下载的链接地址。

<a href="test.mp3" download>下载</a>

作者  | 2013-5-3 11:40:55 | 阅读(1066) |评论(0) | 阅读全文>>

关于Emmet的使用

2013-3-29 13:49:34 阅读643 评论0 292013/03 Mar29

来源:http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/

如果想更改默认模板:

可以在Preferences->Browse Packages..-> Emmet -> emmet -> snippets.json 进行修改

HTML Abbreviations(HTML缩写! or html:5

html:5 or ! for an HTML5 doctype

html:xt for an XHTML transitional doctype

html:4s for an HTML4 strict doctypeEASILY ADD CLASSES, IDS, TEXT AND ATTRIBUTES

p.bar#foo

<p class="bar" id="foo"></p>

h1{foo}

<h1>foo</h1>

a[href=#]

<a href="#"></a>

NESTING

作者  | 2013-3-29 13:49:34 | 阅读(643) |评论(0) | 阅读全文>>

css rem相关

2013-3-25 11:47:47 阅读838 评论1 252013/03 Mar25

rem和em区别:

em:依据最近父元素的font-size值来计算本身的大小

rem:依据root元素的font-size值来计算本身的大小(浏览器支持:IE8+,mobile和平板,chrome,FF等)

vm:1/100th of viewport width.

Demo1:根据不同的链接选择不同的显示文字大小 http://runjs.cn/detail/5sacmcac

Demo2:根据不同的浏览器大小调整页面元素大小 http://runjs.cn/detail/f5lw0mcs

来源:http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

作者  | 2013-3-25 11:47:47 | 阅读(838) |评论(1) | 阅读全文>>

photoshop安装host设置

2013-3-4 12:29:59 阅读458 评论0 42013/03 Mar4

127.0.0.1 activate.adobe.com

127.0.0.1 practivate.adobe.com

127.0.0.1 ereg.adobe.com

127.0.0.1 activate.wip3.adobe.com

127.0.0.1 wip3.adobe.com

127.0.0.1 3dns-3.adobe.com

127.0.0.1 3dns-2.adobe.com

127.0.0.1 adobe-dns.adobe.com

127.0.0.1 adobe-dns-2.adobe.com

127.0.0.1 adobe-dns-3.adobe.com

127.0.0.1 ereg.wip3.adobe.com

127.0.0.1 activate-sea.adobe.com

127.0.0.1 wwis-dubc1-vip60.adobe.com

127.0.0.1 activate-sjc0.adobe.com

cs5,序列号:

1328-1898-5292-5951-8970-1350

1328-1312-2469-1233-5471-5415

1407-1774-6464-0961-5577-3797   对的!

1325-1558-5864-4422-1094-1126

1325-1958-5864-4422-1094-1178

作者  | 2013-3-4 12:29:59 | 阅读(458) |评论(0) | 阅读全文>>

css animation库推荐

2013-2-21 12:16:27 阅读362 评论0 212013/02 Feb21

github地址:https://github.com/daneden/animate.css/blob/master/animate.css

http://daneden.me/animate

应用案例:

http://jsfiddle.net/hszy00232/3MJAd/

作者  | 2013-2-21 12:16:27 | 阅读(362) |评论(0) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 
 
 

北京市 东城区 天蝎座

 发消息  写留言

 
前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com
 
近期心愿能够快速尽其所知,学其所不能,从而完成事情并远超期望。
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
 
 
 
 

天气

 
 
模块内容加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 

新浪微博

 
 
模块内容加载中...
 
 
 
 
 
 
 
列表加载中...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2015

LOFTER-最美图片社交APP

汇聚2000万达人的兴趣社区
下载即送20张免费照片冲印

注册 登录  
 加关注