文章列表
我敢打包票，在企业官网的设计中，没有人比苹果（Apple）更懂得如何漂亮直观的在页面上展示宣传自己的产品。
苹果的网页设计从图片选取、广告词、主页栏以及白色的背景等编排设计，依旧继承了它在产品研发中追求细节的极致作风。在我们浏览其它企业官方的页面时，你会很感概为什么在浏览这些企业的页面时会充满令人心烦意乱的感受？比如：繁杂的产品系列菜单让你的鼠标不知所措的该放在哪儿、低分辨率的劣质照片让你无法感觉到视觉美的享受，与产品不相符的被吹得天花乱坠的广告词等等。我敢说当你浏览苹果的官网后你会被里面硕大的高分辨率精美图片以及写实的华丽产品介绍词等从内心由衷赞叹苹果的设计品位。
那么苹果是如何做到这些 ...
这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。
七、模块的规范
先想一想，为什么模块很重要？
因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
...
Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下：
在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使用Masonry处理后，间隔变小。
可以500%提高开发效率的前端UI框架！
用法
首先倒入类库，如下：
<script src=&q ...
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： 可以500%提高开发效率的前端UI框架！
/**//*
动态创建DOM元素的相关函数支持
www.jcodecraeer.com
*/
/**//*
获取以某个元素的DOM对象
@obj 该元素的ID字符串
*/
function getElement(obj)
{
return typeof obj=='string'?document.getElementById(obj):obj;
}
/**//*
获 ...
jQuery 1.特点:小巧功能强跨浏览器插件2.使用实际是js文件a) 复制js到WebRootb) 页面<script src="jquery.js" charset=""></script> 可以500%提高开发效率的前端UI框架！ 3.核心对象及常用方法和属性a)名称jQuery和$用$找出来的对象叫jQuery对象用document找出来的对象叫Dom对象b)dom和jquery对象转换jQuery对象.get(0) --->dom对象$(dom对象)--->jQuery对象c)jQuery对象方法.show ...
恩，网页设计的秘密是什么？
这是一个艰难的问题，一个可能没有答案的问题。在 2006 年，Oliver Reichenstein 写下了 Web Design is 95% Typography. 一些人狂爱它，一些人却不以为然。
若网页设计过多的依赖于文字设计，那么 ...
2014快结束了，是我们回顾这一年，并且展望新的2015年的时候了。在2014年我们见证了最重要的设计趋势:响应式设计。
这篇文章我们将预测2015年的web设计新趋势，看看在2015年这些趋势将是如何进入我们视野的。可以500%提高开发效率的前端UI框架！
1、响应式布局，一个样式适配多尺寸屏幕
2、重视字体的选择，使用Web字体
3、拒绝Flash，使用其他任何可能的替代技术
4、苹果iOS的拟物化设计将不再时髦
5、使用巨大的背景图构造大气的视觉效果
6、产品和个人介绍页面留出更多空白
7、更多的社交网络分享入口
8、浅色、冷色调重新成为主流可以500% ...
本篇讲解选项卡控件。
一、基本选项卡
首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：
1.基本方式:通过定义html和items的方式。
2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：可以500%提高开发效率的前端UI框架！
<h1>基本选项卡</h1>
<div clas ...
制作扑克的html代码
第一步是制作扑克的html，我的原则是用最少最简洁的代码，不引用任何图片，也许你认为不可能，但是你还是乖乖的看我是如何工作的吧。
建立一个div，赋予两个class属性：cardand suitdiamonds
<div class="card suitdiamonds">
</div>
往这个div中添加卡片的内容，只需要一个包含字母A的段落标记<P>就可以了。
<div class="card suitdiamonds">
<p>A ...
封装过的Ajax工具类库AjaxUtil.js 可以500%提高开发效率的前端UI框架！
.代码
var AjaxUtil = {
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.
常规的断点相关的 breakpoint/conditional-breakpoint/cal ...
很多飞鱼的声纳的读者常会询问我类似于上图中的按钮的光效是怎么做出来的？其实非常简单，新建图层，笔刷或椭圆画出白色，高斯模糊，再将图层混合模 式更改为图层叠加就可以了。但是这篇文章里我们不讨论具体的技术，而来看看如同上面的按钮通过白色的叠加创建出按钮的高光，我们来了解一下图层叠加模式在 网页设计中的应用，再通过不同的实例来深层次的了解图层叠加混合模式的基本效果，将其更自由的应用于我们的设计中。精心开发5年的UI前端框架！
案例一 图标设计中增加色彩的饱和度和明暗对比度
之所以会引出要讨论图层叠加混合模式的问题，是由于我个人按照网上的教程在做图标设计练习的时候，发现设计师有意识的使用了图层叠加 ...
css可以理解成布局标记语言，国外有一个叫做Learn CSS Layout的网站，每一种css的用法都在当前页面用css展现出来，并且配有非常详细的讲解。
与网上的其他教程不同的是，Learn CSS Layout里面的内容看起来非常轻松，我觉得可能是以下方面的原因：
1.非常详细的讲解，而且是图文并茂，并配有代码。
2.休闲的风格，就像是小学生学习新东西的感觉，完全不觉得是在学习一门技术。精心开发5年的UI前端框架！
3.网站的布局很简单，只有一个页面，这样的优点是你不会被其他链接所分心。很多时候我们看一篇网上的文章，结果却被其他链接吸引过去，结果发现这链接指向的文章就是标题吸引 ...
几个月前我就打算开始学习html5，但是当时有一个非常扯淡的想法：“反正现在很多浏览器不兼容html5，学了实际用途也不会很大!”而且还有一些其他的事情比较牵扯精力(找理由…)!现在我终于意识到那时的那个想法有多么二了，赶紧亡羊补牢。
创建兼容ie6的html5页面html5依然以.html或者.htm作为后缀。 精心开发5年的UI前端框架！ 号称几乎没人去记过的DOCTYPE声明变成<!DOCTYPE html>,这是能激活IE标准模式的最短字符。指定字符集编码也同样简洁<meta charset = “UTF-8″>html5新增了众多的元素，语义清晰。例如 ...
HTML5之前，要实现网页元素的拖动操作，需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现；HTML5 中引入了直接支持拖动操作的API，大大简化了网页元素的拖动操作编程难度，并且这些API除了支持浏览器内部元素的 ...