- 不名一格

YUI3仿苹果风格图标滑出导航菜单

作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool No Comments

Apple-Style Slide Out Navigation Menu by YUI
IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。

苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。

» 首先我们来看看HTML：

<div class="navigation">
    <ul class="menu fl" id="menu">
        <li><span class="game"><br/></span><a href="#" class="first">Game</a></li> 
        <li><span class="water"><br/></span><a href="#">Water</a></li> 
        <li><span class="code"><br/></span><a href="#">Coding</a></li> 
        <li><span class="tools"><br/></span><a href="#">ToolsBox</a></li> 
        <li><span class="curve"><br/></span><a href="#">Curve</a></li> 
        <li><span class="options"><br/></span><a href="#" class="last">Options</a></li> 
    </ul>
</div>

span是icon图标，用作动画使用。当鼠标移上A标签时，触发动画。这里不能用Event.addListener 和 Event.on方式去侦听事件，因为icon动画时会移至A标签上层，导致监听对象发生变化，用relatedTarget判断span标签也会触发多次mouseover和mouseout。
所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到delegate，将事件指派给#menu下的li

» 导航的CSS

.navigation{
    position:relative; /*IE hidden need*/
    overflow:hidden;/*Hiding*/
    padding-bottom:100px;/*Icon Showcase*/
    _zoom:1; /*For Ie6 hack*/
}
ul.menu{
    border:1px solid #b0b0b0; 
    border-width:0 1px 0;
    position:relative; /*zIndex need*/
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li{
    float:left;
    position:relative; 
}

阅读剩余部分...

常用分辨率下IE、Firefox设计模板

作者：idd.chiang 发布时间：February 6, 2010 分类：前端观察 No Comments

设计师们在网页设计、web程序设计时，必须考虑客户端浏览器分辨率大小，然后确定在某一分辨率尺寸下设计程序界面。此时大家都会按下PrintScreen键，然后再粘贴到Photoshop中。有时还要考虑浏览器工具栏、边框、下拉菜单等因素，网上很难找到一个标准的web设计模板呢，发现junglejar提供了一个原始模板，如下图所示，

为了减少设计师们拖动参考线，量尺寸费力，已将参考线校准，以下是PSD源文件：

下载：BrowserTemplates.zip

正确选择字符编码避免网页乱码

作者：idd.chiang 发布时间：February 6, 2010 分类：前端观察 2 Comments

web开发中，怎么选择字符编码，针对编码对汉字收录情况，我们应合理设置charset的编码。

关于GB2312、GBK到GB18030：
GB2312(1980年)一共收录了7445个字符，包括6763个汉字和682个其它符号。GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号，它分为汉字区和图形符号区。汉字区包括21003个字符。 2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字。从汉字字汇上说，GB18030在GB13000.1的20902个汉字的基础上增加了CJK扩展A的6582个汉字（Unicode码0x3400-0x4db5），一共收录了27484个汉字。

关于Unicode、UTF-8：
Unicode 是常见的字符编码方法，可容纳全世界所有语言文字的编码方案。目前Windows的内核已经支持Unicode字符集，这样在内核上可以支持全世界所有的语言文字。但是由于现有的大量程序和文档都采用了某种特定语言的编码，例如GBK，Windows 不可能不支持现有的编码，而全部改用Unicode。UTF-8就是以8位为单元对UCS进行编码

Windows的内码是Unicode，它在技术上可以同时支持多个代码页。只要文件能说明自己使用什么编码，用户又安装了对应的代码页，Windows就能正确显示，例如在HTML文件中就可以指定charset，所以在开发过程中，为了避免乱码产生，统一charset编码方式至关重要。

在未指定页面编码类型时，IE会默认使用Unicode方式来解读，所以乱码因此产生，下面列出web开发中常遇到的CSS中文字体对应unicode编码转换表：

阅读剩余部分...

YUI2.8本地存储组件SWFStore使用方法

作者：idd.chiang 发布时间：February 5, 2010 分类：Javascript/AS,YUI/Jquery/mootool No Comments

YUI2.8推出时新增了一个 SWFStore，用于解决客户端本地存储数据，使用FlashPlayer（注意：这不是可视化组件，一般不要求可见的SWF），并且有离线跨浏览器跨域共享数据、存储数据远远超过Cookie、数据加密等优点。

使用方法：

1.实例化swfstore时，应放置一个容器作为预留位，一般会设置宽、高为0，因为这个纯粹功能组件不需要界面；

<div id="swfstoreContainer" style="width:0px; height:0px;"></div>

实例化swfstore

//实例化swfstore
var swfstore = new YAHOO.util.SWFStore("swfstoreContainer", true, true);

2. swfstore.swf 文件应放在实例化组件出现的相同目录，服务器上必须留一副本；
获取swfstore.swf 右键另存为
指定SWFURL时：

YAHOO.util.SWFStore.SWFURL = "swfstore.swf";//地址

3.跨域时需要在swfstore.swf同级目录下编辑名为 storage-whitelist.xml 的文件，格式如：

<url-policy>
	<allow-access-from url="www.mail.yahoo.com" /> 
	<allow-access-from url="www.yahoo.com" /> 
	<allow-access-from url="www.microidc.com" />
</url-policy>

这里编辑了一个简单的SWFStore使用示例：
SWFStore示例

官方文档：
swfstore 官方示例

CSS 垂直居中的实现

作者：idd.chiang 发布时间：February 5, 2010 分类：HTML/CSS No Comments

CSS垂直居中常见有下面的几种实现方法：
直接看例子：CSS 垂直居中的解决
1.当黄色背景div（160）和灰色背景div（60）都知道高度的情况下，最简单的办法可能是直接用灰色div的上边距去实现一个让灰色div垂直居中的样子。
2.利用垂直居中即：vertical-align:middle，我们可以将红色的div置为inline属性，在此div同一层级新增一个空的inline元素，利用这个空元素和line-height属性，实现垂直居中

#inlineBlock{
	width:100%;
	border:1px solid green;
	background-color:#90e07a;
	height:180px;
	line-height: 180px;
	text-align:center;
}
#inlineBlock div{
	background-color:red;
	display:inline-block;
	vertical-align:middle;
	*display:inline;
	*zoom:1;
	text-align:left;
	line-height:1.5em;
}
#inlineBlock p{
	border:1px solid orange; ;
	background-color:#dfdfdf;
}
#inlineBlock i{
	display:inline-block;
}

阅读剩余部分...

Google SEO优化技术的12个要点总结 zz

作者：idd.chiang 发布时间：February 5, 2010 分类：前端观察 1 Comment

一、选择服务器放在哪个区域

对于Google而言,不同的区域,搜索结果的就不同.一些英文关键词, 你在中国用Google搜索,发现你网站的排名非产靠前,但是如果你在国外用Google, 你可能翻十页都找不到你的网站.

我们做Google排名的排名效果不是让我们自己看的, 而是让我们的潜在客户看的. 所以服务器的区域选择应选择潜在客户群体所在的区域。

二、检查服务器的IP是否被Google处罚过

1、检查一下这台服务器上放了多少网站呢? 如何查呢？这里我们给你大家一个工具，可以很轻松的查出来有多少域名共同指向一个IP：（http://whois.webhosting.info/ip/）
例如: 如果你要查219.235.226.75 这个IP你只要在IT地址栏入:
http://whois.webhosting.info/219.235.226.75/
点击回车, 以后就可以看到这个有多少域名指向了这个IP

2、选择几个www.###.com然后你在Google中输入：site：www.###.com然后看一看Google收录了这个网站多少页面。如果发现Google还没有收录它，就多查几个，如果大部分都是没有被Google收录的话，那么很有可能这台服务器是被Google处罚过的。为了保险期间，最好别用。
一般而言，被google处罚的域名比较多，被Google处罚的服务器相对比较少！

三、服务器运行一定要稳定

四、选择好的域名,合理设计网站路径和文件名
   域名/路径/文件名的设计原则:
   1、那就是要包含关键词。排英文关键词的话,你可以选择与关键词相关的域名.排中文关键词的话,可以用汉语拼音域名，中文网站别人用中文路径和文件名
   2、静态的路径比动态的路径有利于排名
   3、顶级域名比二级域名有路径排名(知名网站,权威网站的二级域名除外)
   4、abc.web.com比www.web.com/abc/有排名优势
   5、www.web.com/abc/比www.web.com/abc.html这样的路径有排名优势.

阅读剩余部分...

EditPlus仿Vim的主题配色和自动完成语法文件

作者：idd.chiang 发布时间：February 5, 2010 分类：前端观察 No Comments

常用的前端IDE基本都尝试过，最轻巧的莫过于EP，一直使用2.0的版本，但是经常会因自动完成导致奔溃，不得不寻找更好的编辑器，有人推荐 Notepad++，但是这玩意儿，我配置了一天之后，代码效率依然很低，尤其是他的自动完成设置，需要每次敲击enter键，这个方式个人不是特别喜欢，也许用傻瓜式的EP久了的缘故。终于有一天，彻底重装了一次EP3.0，奔溃的问题居然没有了，满是欢喜。：），最满意的是自己特别喜欢的一款配色，如下图：
EditPlus仿Vim的主题配色

这款配色的配置文件：configs

自动完成和语法在编写前端代码时特别高效和有用的，常用的CSS语法和HTML语法，以及自动完成文件等：

点击下载：acpctl

修改.htaccess文件开启静态日志链接功能

作者：idd.chiang 发布时间：February 5, 2010 分类：Apache/Linux No Comments

Wordpress和Typecho中要使用静态日志链接，必须开启mod_rewrite。
如果Apache中无 #LoadModule rewrite_module modules/mod_rewrite.so 一行，只有创建.htaccess文件，方法如下：

1. 前提是你的服务器为unix并且服务商允许你自定义.htaccess文件，以开启mod_rewrite。
2. 创建一个".htaccess"文档，文档编码方式为ANSI格式，代码如。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php

3. 并不不一定是网站的根路径，可以是www.microidc.com/blog/
4. 保存之后记得重启Apache。

LINUX基础命令

作者：idd.chiang 发布时间：February 5, 2010 分类：Apache/Linux No Comments

1. man 对你熟悉或不熟悉的命令提供帮助解释

eg:man ls 就可以查看ls相关的用法

注：按q键或者ctrl+c退出，在linux下可以使用ctrl+c终止当前程序运行。

2. ls 查看目录或者文件的属*，列举出任一目录下面的文件

eg: ls /usr/man

ls -l

a.d表示目录(directory)，如果是一个"-"表示是文件，如果是l则表示是一个连接文件(link)

b.表示文件或者目录许可权限.分别用可读(r)，可写(w)，可运行(x)。

3. cp 拷贝文件

eg: cp filename1 filename2 //把filename1拷贝成filename2

cp 1.c netseek/2.c //将1.c拷到netseek目录下命名为2.c

4. rm 删除文件和目录

eg: rm 1.c //将1.c这个文件删除

5. mv 移走目录或者改文件名

eg: mv filename1 filename2 //将filename1 改名为filename2

mv qib.tgz ../qib.tgz //移到上一级目录

6. cd 改变当前目录 pwd 查看当前所在目录完整路径

eg: pwd //查看当前所在目录路径

cd netseek //进入netseek这个目录

cd //退出当前目录

阅读剩余部分...

不名一格

YUI3仿苹果风格图标滑出导航菜单

常用分辨率下IE、Firefox设计模板

正确选择字符编码避免网页乱码

YUI2.8本地存储组件SWFStore使用方法

CSS 垂直居中的实现

Google SEO优化技术的12个要点总结 zz

EditPlus仿Vim的主题配色和自动完成语法文件

修改.htaccess文件开启静态日志链接功能

LINUX基础命令

关于我

最新文章

最近回复

分类

归档

友情链接