杰拉斯的博客

这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美。这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法。这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平。

一、木质页面上的抽屉创意

不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗？我自己反正是没想到，这就是值得学习的创意。我们不要一做导航菜单就想也不想的画一个直角或者圆角的矩形背景，将文字放在上面，用竖线隔开文字。这就落入了程式化的束缚之中了。

(阅读全文…)

经常能见到这一类的风格的网页设计作品，它们有如下共同的特点。背景通常是纯色的柔和渐变，不添加任何的材质，色块的边缘部分通常会添加1像素的高光；在页面元素的边缘部分有着强烈的1像素高光；元素表面有如玻璃般的明显反光；底部和背景接触的部分经常会设计出倒影。这种风格的设计经常会出现在商业和企业的网页设计中，会给人留下干净清爽的印象。

(阅读全文…)

一、现象描述

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input /> <input type="submit" />

间距就来了~~

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

您可以狠狠地点击这里：inline-block元素间间距demo

这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！

(阅读全文…)

本文其实真实题目应该是“CSS float浮动的深入研究、详解及拓展(三)”，但是为了更显著的体现本文的核心内容，顺便搞点噱头吸引眼球，同时跟百哥和谷妹玩点小暧昧，就改成了现在这个样子了。

一、一抹前言

没有爱的日子，时间如指尖细沙，不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前，然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么？”后文再介绍的预告。

由于自己肚子中的货物不足以撑起一篇足够质量的文章，所以关于“浮动布局更好的替代方案是什么？”的文章一直并未动笔。好在事物总是在发展的，我也是每天都是在进步，对于列表布局的思考也愈发成熟。加上正好前不久又有人询问我“浮动布局的替换方案是什么”，于是觉得介绍“浮动布局的替换方案“的时机成熟了。

要注意，本文的布局专指列表布局。就是具有相同DOM结构的水平排列可以repeat出来的列表元素。如QQ校友中的图片列表（图片截自老同学相册，已隐去名字）：

(阅读全文…)

一、PhoneGap是什么？

PhoneGap是一个标准的开源框架，用PhoneGap开发移动应用是免费的，无论是商业或是开源；一个用基于HTML，CSS和JavaScript的，创建跨平台移动应用的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。

(阅读全文…)