彬Go » XHTML

99款高质量免费(X)HTML/CSS模板

彬Go — Fri, 23 Oct 2009 03:59:06 +0000

　　大家都清楚一个网站象征着你和你的品牌，这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注，它并不代表最基本的(X)HTML/CSS很丑、很杂乱和单调。彬Go将向大家推荐99个高质量的免费(X)HTML/CSS模板，你可以用于自己或公司企业的网站。

您还可以参考以下(X)HTML/CSS相关教程及资源:
《30个基于CSS的导航和按钮优秀设计教程》
《2008年最佳Web设计/前端开发技巧、脚本及资源总结》
《精选30个优秀的CSS技术和实例》
《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》

高质量免费(X)HTML/CSS模板

留意更新

订阅彬Go以查看(X)HTML/CSS最新教程及资源。

英文原文:99 High-Quality Free (X)HTML/CSS Templates
翻译原文:99款高质量免费(X)HTML/CSS模板(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/99-high-quality-free-xhtml-css-div-templates.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

dl,dt,dd标签 VS 传统table实现数据列表

彬Go — Fri, 24 Jul 2009 08:20:11 +0000

近期博客忙着搬家，所以将近两周的时间都无法访问，还好现在已经解决，从windows主机迁移到了更适合php+mySQL环境的Linux主机，速度方面是否有所提升还不太清楚，总之现在博客恢复正常，还是比较欣慰的。从今天开始彬Go会一如既往的为大家奉献更多更好的技术文章，希望大家继续捧场，学到更多有用的东西。好了言归正传….

过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。现在，越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局，不但让网站降低了开发和维护的成本，而且代码也更语义化了。但是，并不是说table从此消失了，它仍然被很多人用来作为网页中数据表现的必需品，比如个人信息数据列表等。事实上，使用HTML的dl、dt、dd标签会让你节省更多的代码，更能让代码符合内容的语义化。当然，table也有它的用武之地，那就是很大数据量的数据表，但是小型的数据列表和表单完全可以不使用table哦！

如果你仍然在使用传统table来创建数据列表，那么请继续往下看，看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松…

您还可以参考以下xHTML+CSS相关教程及资源:
《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》
《CSS代码命名惯例语义化的方法》
《简洁纯净的CSS表单设计实例》
《为你的有序列表添加个性样式》

table数据列表

传统table的数据列表代码如下所示。我们要为每行添加tr标签，然后还要在其中为标题和数据各加一个td标签，由于标签都是td，想要添加样式的话还要为每个td添加class属性。

<table>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Squall Li</td>
</tr>
<tr>
<td class="title">Age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Gender:</td>
<td class="text">Male</td>
</tr>
<tr>
<td class="title">Day of Birth:</td>
<td class="text">26th May 1986</td>
</tr>
</tbody>
</table>

一下是相应的CSS代码，我们为之前在HTML中声明的class添加样式。

/*TABLE LIST DATA*/
table {
margin-bottom:50px;
}

table tr .title {
background:#5f9be3;
color:#fff;
font-weight:bold;
padding:5px;
width:100px;
}

table tr .text {
padding-left:10px;
}

从以上代码可以看出，使用table标签，如果想使用CSS来对内容进行修饰或修改的话，需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量，代码会稍微变多了一些。代码变多意味着什么？意味着网站的流量在浪费、增加更多的产生Bug的几率以及后期维护更困难。

dl、dt、dd数据列表

现在让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构，然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

<dl>
<dt>Name: </dt>
<dd>Squall Li</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>26th May 1986</dd>
</dl>

而在css代码中，我们仅需让dt和dd向左浮动即可。
/*DL, DT, DD TAGS LIST DATA*/

dl {
margin-bottom:50px;
}

dl dt {
background:#5f9be3;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}

dl dd {
margin:2px 0;
padding:5px 0;
}

从dl、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。

看到这里，如果你还在坚持使用table标签来完成web表单或其它网页布局的话，现在是时候改变一下你的代码了。让你的工作更轻松些吧！

英文原文:How To Use DL, DT And DD HTML Tags To List Data vs Table List Data
翻译原文:dl,dt,dd标签 VS 传统table实现数据列表

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/dl-dt-dd-html-vs-table-list-data.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

15款非常有用的前端开发CSS网格(grid system)生成器

彬Go — Fri, 03 Jul 2009 05:50:36 +0000

现在的互联网上已经有很多能帮助设计师们的各种在线生成器，比如:图标(icon)生成器、背景生成器、按钮生成器和标志生成器等。Balkhis曾经为我们写过一片很不错的关于各种实用的在线生成器的文章。

如果没有这些在线的生成器，设计师们可能就要浪费很多精力在重复性的工作中了。今天彬Go将向大家分享一系列(15款)CSS网格布局生成器。如果大家不了解CSS网格布局的话，可以先看看彬Go之前的文章《960网格系统》、《使用Photoshop+960 Grid System模板进行网页设计》、《960 Grid System 基本原理及使用方法》

1.网格布局生成器 By Pagecolumn

2.网格生成器 By DesignByGrid

3.Blueprint CSS网格生成器

4.网格生成器 by netProtozo

5.Grid Designer (featured in Creative Review magazine)

6.网格系统生成器

7.YUI CSS 网格生成器

8.Variable Grid System

9.YAML 生成器

10.布局生成器 by Pagecolumn

11.Fisheye

12.CSS 布局生成器 by CSSCreator

13.Firdamatic

14.支持边框的CSS1~3列页面生成器

15.CSS 布局生成器 by CSSPortal

英文原文:15 Extremely Useful CSS Grid Layout Generator For Web Designers
翻译原文:15款非常有用的前端开发CSS网格(grid system)生成器

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/15-extremely-useful-css-grid-layout-generator.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

学无止境的CSS(xHTML+CSS技巧教程资源大全)

彬Go — Wed, 17 Jun 2009 02:51:19 +0000

今天在看我博客的访问统计的时候，看到了一个比较熟悉的网址，就是帕兰映像的博客，遂点击链接过去看看，结果发现了一个非常非常值得收藏的文章，这篇文章总结了许许多多CSS(xHTML+CSS或称DIV+CSS)的技巧、教程及资源。其中也有很多值得我学习的知识，相信这些资源对大家来说也是非常值得收藏的，看过之后收获是一定滴！所以转载到自己的博客上跟大家分享一下，在这里先感谢帕兰映像的辛苦总结。值得高兴的是，这篇文章中也包含了很多彬Go以前发表过的一些CSS教程或资源等。各位读者瞪大眼睛准备好哦，以下是原文:

我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。

本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。

一，Web 标准

要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么质量的网页有很大的关系。

其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web标准，我头里就会有一堆问号:

Web标准真的有利于SEO吗？ Web标准的动机难道就是SEO? 出于SEO动机的Web标准是否会失去一些Web标准真正的本质?
如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了?
Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突…
…

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?

我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。

你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符合Web标准还是为了满足自己小小的虚荣心?
特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。

呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。

一些有Web标准的文章

验证HTML，CSS及RSS源的14个免费工具

这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位

我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。

说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。

还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器

网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。

9个永不过时的CSS 3栏布局技巧

我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。

五种方法让CSS实现垂直居中

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。

CSS布局口诀

网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。

使用CSS创建三列固定布局结构

讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。

渐进增强式布局探讨（上）、（下）

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。

CSS布局大全

这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。

43个PSD转xHTML+CSS网页布局及导航教程

推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43 个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

CSS Position

这篇文章详细介绍了CSS定位属性Position的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等CSS技巧。

详解css定位与定位应用

定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。

跨浏览器的CSS固定定位{position:fixed}

使用Position:fixed属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但IE6并不支持这个属性，帕兰映像里使用的方法是利用IE的条件注释让IE6下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。

32个网格布局的网页设计欣赏

这些设计里面，有紧凑型的网格布局设计，同样也有使用大量空白间距的网格布局。

三，CSS Sprites(CSS图片合并技术)

最初知道CSS Sprites的时候，大家都还不知道该如何恰当的翻译这个技术名词，有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。

CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。

学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。

CSS Sprites的一些技巧 | 前端观察

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

CSS 前景图片合并技术 | 芒果

不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。

P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒

CSS Sprites(CSS图像拼合技术)教程、工具集合

非常非常全面的一篇文章，详细介绍了什么是CSS Sprites, 哪些著名网站使用了CSS Sprites，使用更好的使用CSS Sprites等等。

CSS Sprites + 圆角

我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

CSS Sprites, 图片切割与优化技术

这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 —— 为什么要使用CSS Sprites?

四，CSS优化

我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。

至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。

8款在线CSS优化工具/组织和压缩CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择。本文里面介绍了8款工具能让你方便的优化和格式化CSS的在线工具。

CSS代码精简工具和技巧

管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求.

17款加速效率的CSS工具

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。

10个CSS简写技巧让你永远受用

CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

注重SEO搜索优化的div+css命名规则 | 知更鸟

CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

W eb UI 设计(网页设计)命名规范

Web UI设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。

目前比较全的CSS重设(reset)方法总结

收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

CSS代码命名惯例语义化的方法

CSS代码的命名惯例一直是大家热门讨论的话题。本文通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

模块化 CSS – 更有效地管理CSS | 幸福收藏夹

关于如何模块化CSS来实现更有效管理CSS的一些见解。

编写具有良好结构的CSS文件

这是一篇关于如何编写具有良好结构的CSS文件的帖子。我已经讲过CSS文件的代码可读性，但在讨论之后，一些更具体的要求被提出（主要是关于一些读者在管理具有大量布局元素CSS文件时的困难之处），所以我决定在这些案例中说明我自己的开发流程。

CSS中属性的书写顺序

我个人是觉得讨论CSS属性的书写顺序有点没意义，或者说即使有意义，一定要弄一套书写顺序去框住自己，实在又是一件自己为难自己的事儿。只要保证每一个属性和值都有用，当冲突时，该前的在前，该后的在后，也就好了。

五，CSS、IE和Hacks

想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。

没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。

10个实用但IE不支持的CSS属性

本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack。

修正IE6的bug的10个技巧

我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。

IE6 BUG大全

一个系列文章，包含了很多IE6 BUG的详细介绍，比如IE6中奇数宽度的BUG，PNG Alpha透明，像素BUG的实例，IE6文字溢出BUG等等。

目前非常全面的CSS兼容问题资料汇集

CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。本文里面收集了非常详细的CSS兼容问题。

IE6方程式

Web 开发人员的使命就是面对不同的浏览器。自 Web 标准运动的诞生起，有个宿命从 Netscape Navigator 4 开始就被延续着，就是那些过时的浏览器拒绝死亡。它们顽强的存在，阻碍了现代标准的发展。而今天，这个宿命降落到了 Internet Explorer 6 身上。

六，你可能不知道的一些CSS技巧

就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS实现的标签云远视效果。

CSS content, counter-increment 和 counter-reset详解

你很可能没有听过上面这些CSS术语？事实上，我在这之前也不了解，但你可能看到过conten:after和content:before这样的 CSS代码，利用这样一些CSS属性可以实现内容的渲染。尽管这些属性存在浏览器兼容性和W3C验证的问题，但了解一下还是蛮有趣的。

使用CSS选择器创建个性化链接样式

zip文档链接前面显示显示一个zip文档图标，PDF则显示PDF图标，以此类推，听上去很酷吧。更酷的是，你只需要使用CSS而不是JS就能实现这项功能。这篇教程告诉你如何通过CSS的属性选择器来制作个性化链接样式。

CSS Sticky Footer: 完美的CSS绝对底部

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

没有div没有float没有clear没有hack的超强CSS布局

一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack，没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示或阅读该布局设计师的文章说明。

一个关于透明度继承的问题

在前端开发的时候，经常用到板块背景的透明度，但当父层透明时，其中嵌套的子层也会继承其透明性。而这并不是我们想要的，比如，我们只是想要某个块状元素背景透明，而背景层里面的文本子层则非透明。

使用CSS为图片添加更多趣味的5种方法

为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。本文要介绍的CSS技巧将帮助你从痛苦中解脱出来！

101个CSS技术高级应用教程(上) (下)

一些比较高阶的CSS技术应用介绍，全学完这些教程，你的CSS水平将提高很多，废话

53种网页设计师必备的高级CSS技巧

都说了必备了，你不看看实在对不住自己千万的Web开发同胞了…

七, CSS 3

CSS2的出现让web顿时丰富起来，特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展，CSS2已经不能满足web开发的需求，例如属性选择、AJAX出现后与JS的交互等，因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段，但是其某些特征已经让人兴奋不已。

目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中，多数是单篇的文章和访谈记录等，可见这方面的资源还是比较少的，作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分必要的。

CSS3.0相关资源和参考手册收集整理

一些有关CSS 3技巧和教程的资源整理。

CSS 3入门

如果你关注CSS，那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。是的，CSS 3样式文档至今还没有最终完成。如果你已经急不可待了，那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。

20个对学习CSS3大有裨益的资源

本文列出了20个对你学习CSS3大有帮助的网站资源。

使用CSS3和RGBa创建超酷的按钮

不需要图片，只需要充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩，就能实现非常漂亮、非常流行的文字阴影圆角按钮效果。

你应当了解的5个CSS3新技术 | 彬Go

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。本文向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

25个高级CSS技巧教程

能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。

八，更多CSS相关资源

50多个极富创意的CSS演示和教程

SS可以让网页设计中实现很多丰富和独特的技术. 今天,我们就围绕着CSS技术展示全面的探讨, 为你找寻一些最具创造性的CSS技术和使用技巧. 绝对值得喜欢网页设计的你一看.

5个CSS书写技巧

nettuts带来的5个css书写技巧9(link)，简单翻译一下它的中心思想。包括一些代码书写顺序、CSS Reset等，不一定对，但可以做参考。

15个CSS框架简介

对于小的Web开发项目来说，CSS 框架并不一定就适用，至少不见得能提高多少工作效率。但对于一个开发团队和规模比较大的项目来说，CSS 框架不仅能加快设计进程，更能解决网站改版中带来的诸多麻烦和问题。

8个简单和实用的CSS技巧

最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。

11大CSS按钮教程

按钮是网站中非常重要的一部分, 它们常用于引发访客点击和产生互动。下面收集了11个css按钮教程，教你如何创建吸引访客目光的按钮。我最想推荐的其实是第一个， Google custom buttons. 在Recreating the button这篇文章中，作者详细向我们介绍了google现在很多应用服务中（google reader, gmail等）。其中包括需要用到一张渐变背景图的3.0版本…

12个针对网页设计师的非常便利的CSS框架、模板和摘录网 | 译言

如果您经常性地需要建立和开发新的网站，那么您就应该考虑使用模板创建，收集有用的代码片段等等。为了加快开发的进程，您就应该这样做，在需要的适合您可以使用、修改并优化这些模板文件；如果是作为商业用途的您应该检查下许可条款。然而，到目前为止，这是从最榜的站点中挑选出来的最好的站点的普通清单。好好地使用它们吧！

详解CSS的优先权 | 怿飞

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

页面中css调试和问题解决的一些经验总结

CSS2各个属性被各个浏览器支持的问题，css>继承，css叠加等等，我们经常因为这些而需要调试页面中css。本文里面，作者分享了自己一些页面中css调试和问题解决的的经验。

网页不需要漂亮

你见过的最炫目的网站设计通常都是个人网站，尤其是设计师的Portfolio。但最漂亮不代表最成功，CSS是用来玩花俏的视觉效果的吗？一些设计师在尽可能的发挥着想象力做些炫目和富有创意的网页，也有一些设计师，在反对对网页中过度的视觉设计。到底该选择什么呢，看你自己了。

彻底了解css中的长度单位

我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；那我们到底该用哪种单位呢?

CSS盒模型

网页设计中的每个元素都是长方形的盒子。了解盒模型这个概念有什么好处呢？我只能用我的感受来向你描述一个这个东西: 当开始样式化一个网页时，你就会把网页看成一个杂乱堆放了很大不同大小盒子的地方，而你所需要做的，只是把这些盒子拉高、拉宽和移动。然后，一个网页的布局就OK了。

本文转自:60+CSS技巧教程资源大全(帕兰映像)

近期作品:麻将电视赛官网UI设计+前端开发

彬Go — Sat, 13 Jun 2009 08:47:14 +0000

今天展示一下五月底用4天时间完成的一个小项目，天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急，呵呵，所以非常非常赶…界面方面可能还有很多不如意的地方，但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的，所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。

先来两张首页效果图:

两个版本之间的区别只在于赛事进程版块内，由于需求的内容量过大，所以导致页面很单调，版本一是我优化的，版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈，这么庞大的信息量，有必要吗？！用户100%不会耐着性子把内容看完的，反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容，比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛，那就一定要通过设计元素突出主题，能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么，提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。

关于页面的风格，我借鉴了很多腾讯的设计风格，走清新路线，希望能在炎炎夏日给人以清爽的感受….导航是Copy的，哇咔咔….时间紧迫啊….尽管拍我吧，哈

顺便说个题外话，哈，那个”易游开心”很山寨… 囧rz

天津麻将电视大赛首页效果图-版本1

点击小图查看清晰大图

天津麻将电视大赛首页效果图-版本2

点击小图查看清晰大图

天津麻将电视大赛专题网站Demo(点击查看)

下面来总结一下我使用的一些前端技术和经验，希望能对大家有所帮助，大家如果有更好的意见欢迎留言，互相学习。

1.CSS书写顺序

注重CSS书写顺序使很多前端开发新人所忽视的，其实这种习惯的好处不用说大家也能猜出一二，最最主要的还是方便日后的查询和维护。

2.结构化CSS代码

将CSS代码结构化之后，让它符合树形结构，便于查找各级元素的CSS样式属性。

3.杜绝使用CSS Hack

很多前端新人都把学习重点放在CSS Hack上，为了让大部分主流浏览器兼容自己的网页，想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要，通常情况下的网页，基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果，当然，这需要扎实的CSS基础和丰富的经验。

4.针对IE6兼容问题采用”单挑”原则

如果是IE6单独存在的问题，那我会单独命名一个CSS文件，把适合IE6的标准CSS样式写在这个文件中，并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵，出于我对IE6的愤慨之情，所以把文件名命名为这个比较不”和谐”的名字。

注释如下:

5.为CSS写目录索引

这个没什么好说的，作用类似图书的目录，大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》，这里面详细讲解了关于如何写CSS索引注释和它的好处。

6.遵循命名规范

命名规范对于一个团队来说是相当重要的，对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》，是我个人总结的一些相关命名规范内容，感兴趣的话可以看看。

7.纯CSS实现导航标签”面包屑”效果

我个人认为这个没什么可说的，但是考虑到很多前端新人可能不太了解如何实现，所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话，导航标签的”首页”高亮；在”奖品详情”页面，相应的”奖品详情”标签高亮。

基本实现原理就是在不同的页面为标签添加一个id。比如首页是,赛事报道页面则是,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):

#home .nav_home a:link,#report .nav_report a:link {background-position:0 -78px;color:#005ea5;}

8.CSS Sprites(CSS图像拼合) 技术

CSS Sprites近期收到了国内前端们的热烈追捧，但我只在网站中的导航上使用了这个技术。为什么呢？原因有以下两点:

1.CSS Sprites增加了切图时间，但这个项目时间很紧。
2.这个网站的流量不大，使用CSS Sprites技术没什么意义，不会有什么明显的减小流量和请求的效果。

也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术，从而换来了开发(切图)效率上的提高。

如果大家想了解更多关于CSS Sprites的知识，可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。

9.通过W3C xHTML 和 CSS 官方验证

这个是必须的，这玩意儿地球人都知道，我就不多说了。但遗憾的是，这个认证只停留在我的Demo中，运营中的实际网站已经有很多错误了，是为网站填充内容的运营客服人员搞乱的，无奈一下….我也懒得改了，有Demo就行了。

天津麻将电视大赛专题网站Demo(点击查看)

好了，关于使用到的技术我目前只想到这些，以后可能还会补充新的。最后想说一下，前端开发并不是非要追求所有高级技术，并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目，用最适合的前端技术实现当前项目的人，这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites，它明显不适用于这个项目。再比如滑动门，我也没有使用在导航上，因为这个专题网站是有有效期的，基本上不会涉及到导航文字的改变，所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目，所以在下才把这篇文章发上来，希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

彬Go — Fri, 20 Mar 2009 07:31:40 +0000

在中国，很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS，甚至很多人都还不知道xHTML+CSS是什么意思，只知道盲目的追求DIV+CSS，但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是div，很明显是无法达到语义化标准的。彬Go也希望通过博客让所有读者正视代码语义化的重要性，请把”DIV+CSS”这个词从脑子中删除，用”xHTML+CSS”替代吧！

今天彬Go将向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

您还可以参考以下CSS相关教程:
《精选30个优秀的CSS技术和实例》
《使用CSS创建三列固定布局结构》
《30个基于CSS的导航和按钮优秀设计教程》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

1.将 PSD 源文件转换 XHTML 教程

2.教你如何创建水平滚动网站布局

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

4.从零开始创建CSS布局

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程，已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页

6.4个简单的教程教你将PSD制作成CSS HTML

7.使用Drupal创建Killer乐队网站：6篇系列教程

这是个非常棒的关于使用Illustrator制作页面，Drupal(世界最著名的CMS系统之一)编码，符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
 第二部分:使用Illustrator切图
 第三部分:写xHTML
第四部分:Drupal主题模板
 第五部分:Drupal管理
 第六部分:总结和一些附加资源

8.教你如何使用CSS创建性感的按钮

9.很酷的水平菜单悬停变大效果

10.CSS模板教程

11.控制文本渐变效果CSS教程

12.CSS超大背景教程

13.将PSD效果图转换成HTML

14.PSD切图和页面的实现

15.模糊背景效果

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

17.手绘风格CSS导航按钮

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

19.CSS菜单教程

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

21.为网页模版切片并用CSS编码

22.为你的第一个PSD网页效果图编码教程

23.使用简单的操作完成复杂的CSS布局实例

24.使用CSS来让你的页脚固定

25.教你如何将PSD转换成xHTML-视频教程

26.高级CSS导航实例教程

27.教程:为你的DIV+CSS布局编码

28.教你如何为网页变换样式

29.浮动教程

30.CSS切片教程:选择正确的布局

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

32.CSS Sprites + 圆角

33.简单3步制作圆角布局

34.CSS样式教程

35.转换Photoshop效果图

36.制作CSS纵向菜单

37.使用CSS固定页脚背景图

38.一个简单的散列布局启蒙教程

39.两列布局CSS教程

40.CSS布局技巧:完成100%高度

41.附带一个’behavior’文件的纵向CSS菜单

42.光滑的设计，HTML实例

43.DIV+CSS布局教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话，我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。

留意更新

订阅彬Go以查看前端开发/xhtml+CSS最新教程及资源。

英文原文:43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation
翻译原文:43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程(暴风彬彬)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/43-div-css-psd-xhtml-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

为你的有序列表添加个性样式

彬Go — Tue, 03 Feb 2009 14:32:48 +0000

在默认情况下，大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。

预览

基本上讲，你需要做的只是为ol元素定义Georgia字体，然后为p元素(在ol内)定义Arial字体。

1.HTML源代码

创建一个有序列表，不要忘了将列表中的文字放在闭合的

标记内。

This is line one

Here is line two

And last line

以下是无序列表的默认样式:

2.ol元素

为ol元素添加样式:

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

列表会变成这样:

3. ol p 元素

现在为ol p 元素添加样式:

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

你的有序列表的最终样式:

来看看完整的预览Demo吧

留意更新

订阅彬Go以查看前端开发/CSS框架最新教程及资源。

英文原文:Style Your Ordered List
翻译原文:为你的有序列表添加个性样式(暴风彬彬)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/style-your-ordered-list-div-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

浅析网页Transitional和Strict的文档声明的区别

彬Go — Wed, 28 Jan 2009 14:03:45 +0000

在推广Web标准的今天，那些崇尚Web标准的人经常说XHTML比HTML更加严格，当然从某种意义上说是的，比如它要求所有的标签关闭并且所有的属性都用引号。但其实XHTML 1.0还分两种（加上Frameset DOCTYPE的话算三种，本文不讨论），Transitional（过渡型）和Strict（严格）DOCTYPEs。并且HTML 4.01也有同样的文档声明。

从字面上就可以看出来意思：Transitional DOCTYPEs只是为了实现从旧时代到新时代的过渡，而且Strict DOCTYPEs是默认的文档声明，对构造HTML 4.01和XHTML 1.0都适用。

使用Transitional DOCTYPE一般是由于代码中含有过多陈旧的写法，并且一下子很难完全转换到Strict DOCTYPE来。但是Strict DOCTYPE才应该是你的目标。它鼓励甚至有时是强迫你把结构与表现区分开来，把表现层的代码都写在CSS里。HTML 4 Document Type Definition：

本HTML 4.01 Strict DTD不包括表现层属性和标签，W3C将逐渐淘汰这些属性和标签，您完全可以使用样式表来实现。您应该使用Strict DTD，如需获得表现层属性和标签的支持，请使用Transitional DTD。

用Strict DOCTYPE还有一个好处，即可以让浏览器使用它们最严格、（一定程度上）最符合标准的模式来渲染页面。

Tommy Olsson在Web Standards Group的Ten questions for Tommy Olsson一文中很好的阐述了使用Strict的好处：

我觉得，使用Strict DTD，无论是HTML 4.01 Strict还是XHTML 1.0 Strict，远比讨论是用HTML还是XHTML重要的多。它代表了未来互联网的质量。它将结构和表现分开，使得维护一个站点非常容易。

对于刚开始接触web standards和正确的、语义化的结构的人，认清Transitional和Strict DOCTYPEs的区别非常重要。更多详细列表请参考：XHTML: Differences between Strict & Transitional、Comparison of Strict and Transitional XHTML和XHTML1.0 Element Attributes by DTD。

对于准备向Strict进发的人来说，两者的有些区别很可能会使开发者犯错误，接下来我将会谈到。

在Strict DOCTYPEs下不支持的标签

center
font
iframe
srike
u

在Strict DOCTYPEs下不支持的属性

align (表格相关的支持：col, colgroup, tbody, td, tfoot, th, thead, and tr)
language
background
bgcolor
border (table支持)
height (img和object支持)
hspace
name (在HTML 4.01 Strict中支持，XHTML 1.0 Strict中的form和img不支持)
noshade
nowrap
target
text, link, vlink, 和alink
vspace
width (img, object, table, col, 和 colgroup都支持)

内容模型的区别

元素类型的内容模型描述了什么样的元素类型实例可以被包含。这一点上，两种文档声明的最大区别在于blockquote, body, 和form元素仅能够包含块级元素，如：

文本和图像不允许直接包含在body中，必须被p或者div等块级元素包含
input元素不能直接是form元素的下一层
blockquote元素内的文本，必须被p或者div等块级元素包含

将所有的表现都交给CSS，恪守Strict标准

在向Strict DOCTYPEs过渡的过程中，了解每个元素是做什么的比知道每个元素长啥样有效的多。

首先考虑结构和语义，然后再担心表现。

留意更新

订阅彬Go以查看前端开发/CSS框架最新教程及资源。

英文原文:Transitional vs. Strict Markup
转自互联网

彬Go » XHTML

99款高质量免费(X)HTML/CSS模板

高质量免费(X)HTML/CSS模板

01. T-20

02. Shape

03. Your Business

04.Solitude

05. Fashion Club (Registration Required)

06. O’No! Typography

07.Projection

08.Fresh Restaurant

09.Jungleland 1.0

10.SindromK

11. Environment Brand Design

12.Colourise 1.0

13.Charcoal (Registration Required)

14.H Free Software

15. Dark and Sleek Web Design

16.Photo Portfolio

17. FACING

18.Symisun

19.Luvbold

20.freetemplates

21.2 Breed

22.Extreme Georgia

23.Electronix

24.Catalogio

25.theARTofTYPE

26.Alexx C

27. Greefies

28. FreshMedia 1.0

29.Dusky

30.Creative Media

31.Package (Registration Required)

32.Internet Music

33.Typographic Times

34. Turrion

35.David Kruger

36. Clean Web 2.0 Style Web Design

37.FreshPick 1.0

38. Artificial Casting

39.Business Company

40.JavaScript Tricks

41.Treasure hunters

42.Dating & Wedding (Registration Required)

43.TEMPER

44.EXTREME UPDATES

45. Experimental

46.Maintenance

47.Ubly

48.Shalom Typo

49.Beez design

50.MiniCon

51.ec mania

52.Tool shop

53.REDISH

54.Rock Band

55.Liquid

56.Keep It Simple 1.0

57.Typo Today

58.Impress

59.Art & Photography (Registration Required)

60.Inverted Headline

61.Business Company

62.JET 30

63.BREAKING ONTOP

64.Quartz istorage

65.Fireworks

66.UrbanArtist 1.0

67.Eastern Tales

68.Unbound 1.0

69.DelliStore

70.NEW RISE

71.Miniml

72.Greenie Theme

73.F-GEN-02 (Registration Required)

74.Worldlines

75.Web Application

76.Buesiness Company

77.GREEN WEB