IT牛人博客聚合

随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设

查看全文: http://www.udpwork.com/item/7198.html

很多人可能都知道了 CSS 的选择器浏览器在解析的时候是从右往左的，和你所熟悉的从左往右的规则是不同的。但是这是为什么呢？这么做的性能是否更高？

Related Items:

为什么排版引擎解析 CSS 选择器时一定要从右往左解析？

查看全文: http://www.udpwork.com/item/7135.html

【感谢 Neo 投递本文 – 微博帐号：@_锟_ 】

在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。

形状是：

代码是：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦，为啥这么这么几句就能画出一个三角

查看全文: http://www.udpwork.com/item/7034.html

【感谢 Neo 投递本文 – 微博帐号：_锟_ 】

前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）

正文

查看全文: http://www.udpwork.com/item/7005.html

transform:rotate 属于简单好用的效果，但在手机上显示时，会有比较明显锯齿。

解决方案也很简单， 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。

原理没去深究，理论上是矢量跟位图的处理不一样，这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/

update: 大家反应这方案在电脑上反而会出问题。

我测试了个新的方案rotate3d + border:1px solid transparent;，问题也算是解决了。

同时发现另一个小问题，缩放的图片使用

查看全文: http://www.udpwork.com/item/6964.html

RT! 菜汤要写活动策划，里面有一个小节目，我出的鬼主意，也用到了这个小网页作为工具。

一开始不知道用啥工具写比较好，我会点VB，但是又不能在Linux写。.Net先排除了，发布了还要别人安装框架，更麻烦。Python嘛，对它的图形处理还不是很熟悉，写起来也不怎么容易。选什么GUI库也是一个难题。

所以，最后选择了一窍不通HTML5。用网页写比较容易跨平台，所以我在Linux下写好，别人也可以用她的Win7来用了。HTML5的入门也不难，花了一个小时看了一篇教程，就开始写了（因为我只用到Canvas）。

我的第一个HTML5写的网页哦。

展示地址：

http://xiaoxia.org/upfiles/2012/02/in

查看全文: http://www.udpwork.com/item/6785.html

在StackExchange上有人问了这样一个问题：What should every programmer know about web development?（关于Web开发，什么是所有程序员需要知道的？）里面给出的答案非常不错，所以，我翻译转载过来。 顺便说一下，StackExchange真是非常好，大家可以对同一个答案做贡献和修订，看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。

好了，下面是正文（我对原文做了一些批注，也许不对或有误导，请大家指正）

下面的这些东西可能对于大多数人并不陌生，但是可能会有些东西你以前并没有看过，或是没有完全搞懂，甚至都没

查看全文: http://www.udpwork.com/item/6480.html

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。

经测试，IE9, Chrome, FF, Safari都可以正常显示。

.shape {
padding: 20px;
}
.shape > style {
display: block;
white-space: pre;
background: #333;
color: white;
font: 12px Monaco;
padding: 0 15px;
}
.shape > div {
margin: 20px ;
}
.shape > h5 {
b

查看全文: http://www.udpwork.com/item/5648.html

文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。

学习HTML 5编程和设计

★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码

很不错的 HTML5 Dashboard – Mozilla，效果很炫。

WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。

★ StackOverflow : 大名鼎鼎的技术问答式论坛。

★ Addyosmani, jQuery 和 JavaScript 文章教程

查看全文: http://www.udpwork.com/item/5208.html

由Dustin Diaz推动的CSS NAKED DAY今年还是没有按时举行，在其网站上也还是没有贴出任何的今年的时间，但是推动Web标准发展应该是每位业界人士的一份责任，因此世界各地的人都延续传统，和去年一样是4月9日，大家都纷纷脱去了自己网站的衣服(CSS)，裸奔。

具体细节大家可以查看我去年的文章《拥抱 CSS 裸奔节，用 JavaScript 强制脱衣》。当然方法有很多，你想怎么裸就怎么裸。

查看全文: http://www.udpwork.com/item/4757.html

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。

典型代码示例

yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});

当Modernizr.geolocation为真时，加载yep项也就是”normal.js”，否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别？

个人认为主要 是这两点：

可以同时处理jav

查看全文: http://www.udpwork.com/item/4457.html

又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

先说找工作吧，电影《该页无法显示》里的那个facebook主页上的招聘网页上是列了一堆问题，你可以去看看，你可以使用c/c++，Erlang，Haskell，Java，Perl，Python，PHP，Ruby来解题，不过只接受Unix/Linux下的版本， 不接受Windows的版本。无独有偶，DropBox的招聘网页上也是些算法题，大家可以过去看看，不过需要翻墙。（现在，对于美国互联网企业来说，如果你没有被C2C，说明你根本不存在，如果你没有被墙，说明你还不算成功）

接下来给大家介绍一些文

查看全文: http://www.udpwork.com/item/4414.html

每天中午都发愁吃什么。于是写了这么个东西，随机抽取吃饭地点。演示如下：

var alldata = "新中关,欧美汇,避风塘,牛魔王,小豆,即品面饭"
var alldataarr = alldata.split(",")
var num = alldataarr.length-1
var timer
function change(){
document.getElementById("oknum").value = alldataarr[GetRnd(0,num)];
}
function start(){
clear

查看全文: http://www.udpwork.com/item/4344.html

CSS3已经开始被大家广泛的运用到产品中的页面代码中去，CSS3带来的革新式的变化我在这里就不一一细说了。不过因为目前的CSS3还处在草案阶段，所以绝大部分的浏览器(除了opera应该是)都是使用的私有属性的方式来实现对CSS3的支持。比如firefox的-moz-前缀和webkit核心浏览器的-webkit-前缀等。

整洁优雅的代码能提高生产效率，特别是在团队合作中。我想很多人都习惯把css代码写成一行的形式，诸如这样：

.main{width:960px;margin:0 auto;}
.sidebar{width:233px;float:left;}
.sidebar ul li&#

查看全文: http://www.udpwork.com/item/4321.html

.css3-logo li div{margin:0;padding:0}

演示地址：http://uicss.cn/css3/maxthon-logo.html

实现方法：

先画一个外框 width: 240px; height: 240px;border-radius: 120px;

填充背景色background:#b1e4ff;

描边border:2px solid #789cb6;

加阴影box-shadow: 5px 5px 7px #999;

给该死的firefox3私有属性-moz-border-radius: 120px;

再画一个小圈，width: 230px; height: 230px;bo

查看全文: http://www.udpwork.com/item/4299.html

无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好 ，速查卡也好，总之就是帮你节省 时间的。之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄，还有程序员小抄大全，今天转一篇开发人员的速查卡，源文在这里。下面的文章我就不翻译了。

HTML Cheat Sheet

HTML/XTML in one page

HTML5: The Evolution of Web Standards by James Sugrue

(X)HTML Elements and Attributes

Doctype Declarations (DT

查看全文: http://www.udpwork.com/item/4285.html