一直认为国外网页设计和布局和国内的设计还是有很大差别的，设计网站或博客对我来说只能学习下国外的设计理念和制作思路，但一些优秀的设计元素或理念要结合国内的网站设计潮流才可能适应国内大众。
比如我自己，有时候在设计制作一些网站时，通常会参考国内一些优秀网站，和UED团队的设计理念。而国内UED团队博客是也是我经常去的地方，UED团队博客是专门探讨用户体验设计的，如果你希望改良下你网站的用户体验，卢松松建议抽空去看看国内UED团队博客是个不错的方式。
腾讯CDC博客
腾 讯的各种交互设计都非常漂亮，腾讯CDC成立于06年6月18日，全称是Customer Research & User Experience Design Center（即用户研究与体验设计中心），是腾讯的核心部门之一。整个CDC博客可以说是腾讯产品发布的前沿，在这里我们可以看到腾讯旗下众多的产品资讯和体验报告。
腾讯 ISD Webteam博客
腾讯webteam即腾讯互联网业务系统网站组，他们关注于网站产品的体验设计，包括网站的可用性、视觉风格以及网页重构。腾讯ISD Webteam博客设计视觉冲击力很强，先不说用户体验方面的优秀文章，单纯绚丽多彩的前端视觉设计作品都够我们受益的了。
淘宝 UED博客
淘宝的UED团队风格活泼而阳光，他们用生动的文字和形象的图片记录生活，他们的”碳酸饮料会”总是能够碰撞出很多新奇的想法，了解到这个博客是从他们的招聘专题开始的，现在已经是招聘第三季了，每季做的都很精彩，大家可以在这里感受到“阿里系”公司的气氛……
19楼UED 博客
19 楼做为一个发展迅速本土化强劲的社区网站，其人性化的视觉设计给人们留下了深刻的印象。19楼的UED团队博客更加 “务实”一些，比如说他们近期就把整个19楼新版改进和发步的过程分享了出来，还有前期用户调研等等，这让我们更加近一步的了解到UED团队的运作流程，给我们揭开了一层似乎神秘的面纱……
新浪UED博客
新浪UED博客团队用”我的团长我的团”的概念将用户体验和UI等团队划归旗下，chinaued部分主要分享了包括门户/SEO/产品策划等各层面的东西。
口碑网UED
UED基础知识方面及技巧方面的内容很多，质量很高，非常值得初学者学习。
恒久不变网站设计的诸如百度、hao123这样简单可信赖是可取的，其他功能更加丰富、体验更加新鲜的交互设计也值得探索。大量UED团队博客的出现，可以看作是这些网站的设计团队的不断思考，也可以理解为俯下身子与用户更多的一种交流。其中，这些具有创新意识的知识分享，一定程度上也促进了互联网行业的发展。
小知识：UED = user experience design，用户体验设计。UED的本意是用户体验设计，是英文User Experience Design的缩写。通常的理解，我们做的一切都是为了呈现在您眼前的页面。一般UED团队包括：交互设计师、视觉设计师、用户体验设计师、可用性工程师、产品设计师和前段开发工程师等等。
原创文章请注明转载自卢松松博客，本文地址：http://www.lusongsong.com/reed/161.html
1. 将网页或元素居中
HTML：
<div class=”wrap”>
</div><!– end wrap –>
CSS：
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
HTML：
<div id=”wrap”>
<div id=”main” class=”clearfix”>
</div>
</div>
<div id=”footer”>
</div>
CSS：
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ”.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
3.跨浏览器最小高度设置
CSS：
.element { min-height:600px; height:auto !important; height:600px; }
4.Box阴影(CSS3)
CSS：
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
5.文字阴影（CSS3）
CSS：
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
6.跨浏览器的CSS透明度
CSS：
.transparent {
/* Modern Browsers */ opacity: 0.7;
/* IE 8 */ -ms-filter: ”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
/* IE 5-7 */ filter: alpha(opacity=70);
/* Netscape */ -moz-opacity: 0.7;
/* Safari 1 */ -khtml-opacity: 0.7;
}
7.著名的 Meyer Reset（重置）
CSS：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ’cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ””;
}
blockquote, q {
quotes: ”” ””;
}
8.删除虚线轮廓
CSS：
a, a:active { outline: none; }
9.圆角
CSS：
.element {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
}
.element-top-left-corner {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
10.覆盖内联的样式
CSS:
.override {
font-size: 14px !important;
}
点击查看原文：http://webdevmania.com/archive/top_10_css_snippets/
透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
上面的几个属性分别是:
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
CSS透明度继承问题
但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如本站的一个效果:
即使你又为子元素指定透明度为1也是无效的。
对于子元素是文字的情况，我的解决方法一般是如果多少还能够看清，就不管。另一个折衷的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是，这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。
还有“取消透明度继承”的说法，这个说法是不太准确的，据我个人所知，没有任何取消透明度继承的方法。只能说，当想要实现“多个元素覆盖，只让指定的元素透明”时，可以使用的一些Hack。
搜了一下，找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题，有兴趣的朋友可以看看。原理很简单，添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。
在自然界中有最丰富的色彩资源，比如阳光、花草、天空、大海等，它们自身的颜色已被人们不知不觉地接受、认同并形成一种意识，一种独特的感觉。很 多人对颜色的感觉或联想都是相似的，这种特点叫做“共通性”，这是出于传统习惯的缘故。因此不同的颜色能给观众以沉静、活泼、温暖、寒冷等直接的感受，也 可以形成热烈、冷漠、朴素、典雅、清爽、愉快等感觉。大家习惯以某种颜色表示某种特定的意义，于是该颜色就变成了某事物的象征。颜色的意义在世界上也具有 共通性，但由于民族习惯不同也会存在很大差异。下面首先对一些内涵表达强烈的颜色做一些介绍。
红色，是 火的色彩，也是血的颜色，首先给人的感觉是温暖、兴奋、热烈、坚强和威严，所以我们的国旗使用红色赋予了革命的含意。在西方，据说耶稣的血是葡萄酒色，所 以又表示圣餐和祭奠。粉红色是健康的表示，而深红色则意味着嫉妒或暴力，被认为是恶魔的象征。除此之外，红色也给人以警告、恐怖、危险感，所以应用于交通 信号的停止信号，消防系统的标志色等。
黄色，属于暖色，代表光明、欢悦，色相温柔、平和。在中国过去是帝王的象征色，有高贵、尊严的含义，一般人不得使用。黄色在古罗马也被当作高贵色。东方佛教喜爱雅素、脱俗，常用黄色暗示超然物外的境界，基督教同样作为犹太衣服的颜色；有时黄色也代表娇嫩、幼稚。
绿色是大自然的代表色，象征春天、新鲜、自然和生长，也用来象征和平、安全、无污染，比如我们常说的绿色食品，同时绿色也是未成年人的象征。绿色在西方有另一种含意是嫉妒的恶魔。
蓝色给人幽雅、深刻的感觉，有冷静和无限空间的意味，也表示希望、幸福。在西方，蓝色象征着名门贵族。但蓝色也是绝望凄凉的同义语。在日本，也用蓝色表示青年、青春或者少年等年轻的一代。同时，蓝色也是联合国规定的新闻象征颜色。
紫色也具有高贵庄重的内涵，日本和中国在过去都以服色来表示等级，用紫色是最高级的。至今在某些仪式上仍旧用做紫幕、方绸巾等。在古希腊，紫色作为国王的服装专用色。总之，紫色意味着高贵的世家。
白色通 常是优美轻快、纯洁、高尚、和平和神圣的代语。自然界中雪是白色的、云是白色的。因此，白色给人以素雅、寒冷的印象；有时也代表脆弱、悲哀之意。不同的民 族对它有不同的好恶。中国和印度以白象和白牛，作为吉祥和神圣的象征。日本的老道与和尚喜欢穿白衣服。西方结婚的新娘穿白色婚纱。相反，中国办丧事却用白 色孝服。
黑色，代 表黑暗和恐怖，意喻死亡、悲哀，属不吉利色。它表示一种深沉、神秘，使人产生凄寒和失望的意念。但把黑和其他颜色相配时却显出黑色的力量和个性，如黑白相 衬，显得精致、新鲜、有活力。在黑色衬托下可以使用各种非常刺激的冷暖颜色，因为它有调和色彩的作用。1.5.2 色彩的对比
通过上面的介绍，相信读者也会联想身边的事物，它们为什么使用这种颜色，以及这种颜色赋予该事物的独特意义。一切颜色不但具有不同的特性，而且各种色彩之 间也产生相关性及相对性。评价一种颜色是浑浊还是新鲜，是明快还是暗淡，是寒冷还是温暖，一定要和其他色彩发生相互关系才能进行判断，单独用一种颜色是无 法评价的。下面我们根据颜色的多种特性进行辩证理解。
首先，从颜色的冷暖开始比较，例如，所有的色彩纯度一样，感觉最强的首先是橙黄，其次是红，再次是黄、绿、紫、青、蓝。红、橙黄属于暖色，紫介于寒暖之 间，习惯上也称之为中间色。其实，中间色也存在某种程度的寒暖差异。绿介于青和黄之间，若偏黄一些则显暖，具有膨胀和发扬的感觉。凡是冷色，都具有沉着和 收缩的感觉。凡是比较浑浊的色彩，在人的视觉上就产生了一种脏的感觉。有浊必有清，凡是比较纯正的色彩一般产生鲜明感。色彩相关性体现在类似和对比这两个 方面，两者都可从颜色的寒暖、明暗、清浊的特性上找到区别。
所有色彩除了本身具有不同冷暖特性之外，还由于黑白含量的多少会造成明色和暗色的差别。因此，每一种色彩都形成各种深浅不同的色调。当两种不同色彩放在一 起进行比较时，首先会产生明暗上的对比效果。而色彩的对比并不局限于上面所述的这些。如果把一种华丽的颜色和朴素的颜色放在一起，把光滑的和粗糙的放在一 起，也将发生不同对比效果。尤其是那些特性不明显的色彩，也可以通过对比的方法，使它们的性格鲜明起来。如果配合得好，鲜艳的颜色不仅不会掩盖另一个晦暗 的颜色，而且，还可以提高它的色彩效果。比如，一种灰颜色，把它放在暖色旁边，它就有些偏冷，如果把它放在冷色旁边，看上去就有些偏暖的感觉。色彩还有一 个特性就是从面积上进行对比。例如，大面积界限分明的色调使一幅画具有力量和生气。在深暗的色调中如以面积较小的亮色调相衬托，会赋予肃穆、庄重的感觉。
色彩的对比效果可以做到很强烈，也可以做到很柔和，但要注意，突出的色彩使用太多会造成注意力的分散，只会破坏构图的统一。在追求某种艺术效果时，往往可 以利用物质材料的本色来产生，以更好地体现自然美。关于“对比美”这个法则可以运用在不同的手法中。为满足主观的要求，应注意材料的制约性与色彩、环境之 间的互相关系。特别应注意色彩与色彩之间、材料与材料之间、环境与主体之间的既相互制约又相互补充的辩证关系。
色彩的构成
构成是将几个单元重新组合成为一个新单元的过程。它是一种与造型有关的概念，也是现代造型设计用语。在这里将介绍色彩构成：色彩构成是指配色方面的平衡、分隔、节奏、强调、协调等方法的使用。
● 平衡
重色和轻色、明色和暗色、强色和弱色、膨胀色和收缩色等都是相对立的色彩，配色时应改变其面积和形状以保持平衡。
不同量的各种颜色，由于比较的结果就会形成均衡或不均衡的感觉。要达到均衡，配备颜色时要考虑到屏幕上、下、左、右以及两个对角关系上的均衡，不要把很强或很弱的颜色孤立在一边。同时，也要注意每种颜色的面积大小变化，这也是均衡的关键。
● 分隔
主画面颜色的面积大小和变化是均衡的关键，分隔也是如此，主要是在配色时，在交界处嵌入别的颜色，从而使原配色分离，以此来补救色彩间因类似而过分弱或因对比而过分强的缺陷。
● 节奏
平衡和分隔也是体现画面节奏的重要因素，节奏是通过色调、明度、纯度的某种变动和往复，以及色彩的协调、对照和照应而产生的，以此来表现出色彩的运动感和空间感。这个节奏取决于形态配置的和谐。为了效果更好，可使色调变化作渐变的效果。
● 强调
强调是通过面积较小的鲜明色改善整体单调的效果，强调是使颜色之间紧密联系并且平衡的关键，应贯穿于整体。比如，在大面积的暖色中加一小块较冷的色彩，或 在一大块亮颜色上放一小块暗的色彩，也可反之，这样可以打破画面的呆板。也就是说我们运用颜色的各种对比方法来达到强调的目的，我们往往使用红和绿、黄和 紫、橙黄和青做对比。
● 协调
协调就是以某颜色为主调，调和色彩，使各色之间统一联系、互相呼应和感觉协调，以此来表现统一的感觉。协调决定了一幅作品的成败，主要指冷暖色和明暗调的统一，整体被哪种色调所支配。可以说有几种不同的主调，就有几种不同的协调效果。
要掌握协调的规律其实很简单，就是记住各种颜色的浓淡、冷暖以及明暗的搭配变化，比如黄与橙、蓝与绿、青与紫、浅绿与深蓝、浅黄与深橙等。
概要：
在jQuery库，几乎所有的jQuery插件都被约束在它的命名空间里，通常，“global”对象同样被存储在jQuery命名空间里，因些不会使它与其它库（如：Prototype, MooTools, or YUI）发生冲突。
注意，jQuery用”$”作为它自身的默认快捷方式。
“$”的功能：
当jQuery与其它库被加载后，你也可以不顾它的默认快捷方式而在任意一处通过调用jQuery.noConflict()函数来指定使用jQuery库，例如：
Java代码
<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(…)
jQuery(document).ready(function(){
jQuery(“div”).hide();
});
// Use Prototype with $(…), etc.
$(’someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>
这将使$回到它的原始库里，你依然可以在其它的应用程序里使用”jQuery”。
另外，还有其它选项。如果你想确定jQuery不会与其它库冲突——但你又想自定义一个比较短快捷方式，你可以这么做：
Java代码
<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(…)
$j(document).ready(function(){
$j(“div”).hide();
});
// Use Prototype with $(…), etc.
$(’someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>
你能够自定义你自己的备用名称（如：jq、$J、awesomequery——可以是任何你想要的）。
如果你不想给jQuery自定义其它备用名称（你更愿意使用$而不管其它库的$方法）而又不想与其它库相冲突时，以下的解决方法最常使用的。
Java代码
<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$(“div”).hide();
});
// Use Prototype with $(…), etc.
$(’someid’).style.display = [...]
