由于工作需要,把原来的920px的网站要求使用960 Grid的标准来做,特地研究下了960 Grid System。说实在话我已经有点Out。简单的讲,960 GS就是一种基于网格的布局框架,使用它可以极大地简化页面的布局工作。要是你象我一样不太擅长做页面这些活,那它就是为你准备的。

官方网站:http://960.gs/

自出道以来,960 GS就受到了大家的热捧,关于它的介绍文章和示例简直铺天盖地,随便用Google一搜就有一长串列表供你选择。有鉴于此,本文并不打算在拾人牙慧,再嚼现饭,而只是简要说明其用法以及核心css文件,960.css,中各class的说明。各看官权且把本文作为960 GS的Cheat Sheet吧。

用法
在Web工程里引入960.css,你就可以安心使用其定义的各个class了。除了这个必须引入的文件,960 GS提供的下载包中还有两个css文件值得一提:reset.css和text.css。这两个文件的主要作用是为了消除浏览器间显示差异准备的,前者消除了html标签在各浏览器间的差异,而后者则主要针对的是字体。
对于这类消除浏览器差异的css文件,一般建议还是使用为妙。一来是因为简单,使用它们除了在页面开始引入之外就没有其他工作量;二来是用上它们还保证了应用在不同浏览器间的一致性,真是方便实惠。

Class说明
960.css里提供了以下class:
container_12和container_16,用于最外层的div,它们确定页面采用12列布局还是16列布局。grid_*,代表n列宽。12列对应1~12,16列对应1~16。使用时,一行内的grid数值之和等于container数值。clear,清除上一行的样式,一般在分行时使用。push_*和pull_*,将div往内推或往外拉n列宽。prefix_*和suffix_*,在div的前后留n列宽空白。alpha和omega,分别应用到内嵌表格的第一个和最后一个,其目的是为了去掉表格之间的空白。因为框住内嵌表格的外部表格本身已经有了自己与其他表格之间的空白,因此内嵌表格和外部表格之间的空白一般是不美观,不必要的。

在使用时需注意960 GS的限制:
页面的宽度限制为960px。上述class只限定了div的宽度,高度由开发者自行控制。只提供了12列、16列和24列布局。功能单一,只聚焦简化布局。
如果你的需求超出以上范围,最好就另寻高明了。这里有个简单的例子帮助你了解960 GS的使用:

也可以查看:http://blog.163.com/eric_chen2/blog/static/58326101200942804432903/

这篇文章写的比较具体。

将应用部署在虚拟机上,如何让其他机器访问上

例如我的主机在局域网中的IP为: 192.168.0.144

而对于外网的IP为:211.253.124.71

如果在Vmware上使用桥接设置一个IP为192.168.0.143是最容易让局域网的人访问的。但是公司的IP都是被限制的每个人只有一个IP,所以只能通过虚拟机端口映射解决该问题。相当于在IP:192.168.0.144内在建立一个网段。

1、将网络连接模式改为NAT

右击“虚拟机”——>settings….——>Network Adapter——> 在network connection 单选框中选择”NAT“

2、设置端口映射

选择菜单栏”Edit” ——>“Vitrual Network Editor”——>选择vmnet8——>在vmnet information 中,
勾选以下三项“NAT(share host’s IP address…)”,”Connet a host virtual adapter…”,”Use local DHCP..”

在subnet IP:中,输入子网范围,如Subnet IP:192.168.10.0 Subnet mask:255.255.255.0 —

选择右边的”NAT settings..”——》在弹出的对话框中,填写以下内容:(根据个自需求)

Gatewap IP:192.168.10.1

Host port: 8000

type: tcp/udp (默认tcp)

virtual machine IP address:192.168.10.144 

virtual machine port:21

Description:描述信息

保存退出

本文转载至:http://playgoogle.com/?p=85

使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;
        /*设置水平居中*/
        text-align:center;
        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
        width:200px;
        height:200px;
        border: 1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}

这种解决方法的好处是不用加一些不必要的xhtml代码。缺陷是需要已知容器的高度,在容器高度未知时,无法处理。

原理:Google Ajax Search其实就是返回在google上输入关键字的结果,在自己站点上用上。

首先在google上申请一个Api Key
http://code.google.com/intl/zh-CN/apis/websearch/docs/

主要采用JS的方法加载

然后通过search对象控制搜索,官方API文档写的很具体。

但是有时候并不是很好控制,因此官方开放了另一个与其他语言交互的API接口

http://code.google.com/intl/zh-CN/apis/websearch/docs/#fonje

通过curl获取Get参数的回传值

curl -e http://www.my-ajax-site.com \
‘https://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton&key=INSERT-YOUR-KEY’

上述URL中https://ajax.googleapis.com/ajax/services/search/web 这一段基本为固定的
参数 v=1.0也基本是Google固定的;
参数 q为关键词,需要urlencode;
参数 key为申请的key,其实不用必填,若填写了一定要正确的key。这个key直接可以关联到google account,所以还是建议申请。
更多参数请查阅:ttp://code.google.com/intl/zh-CN/apis/websearch/docs/reference.html#_fonje_args

我这里用到另外一个类HttpClient模拟获取Get值,原理其实很Curl一样。

HttpClient类可参考我之前写的这篇文章: http://crackedzone.com/blog/httpclient-post-request-return.html

通常设置position后,通过z-index属性来设置div的层叠情况。

但是在IE7中,设置position后,z-index会失效。导致div的层叠出现问题。

具体效果可以看这个页面

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

以下分别是IE7与IE8之间的差别: