Browsed by
分类:Web开发

写HTML和CSS的新方法

写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML,XML, XSL (或是其它一些诸如此类格式的编辑器)。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML,很像CSS语法。下面是一个例子:
div#page>div.logo+ul#navigation>li*5>a
展开后会成为下面这个样子:
<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>
可以看出来,#代表ID,>代表下一层。
好烂啊有点差凑合看看还不错很精彩 (3 人打了分,平均分: 5.00 )
Loading...
一个jQuery的插件

一个jQuery的插件

jQuery这个强大的玩意我就不多说了,不知道可以上网搜搜看。IE6我也不多说了,这可能是史上骂名最多的一个浏览器,网上有N多的声讨IE6的文章,你也可以参看本站的《9个最常见IE的Bug及其fix》和《IE的CSS相关的BUG》,如果你今天还在用IE6,或是IE类浏览器,那请让我小小的BS你一下。

这个jQuery的Plugin可能是有史以来所有plugin中最有个性的一个,因为这个plugin什么也不干,其会用户的IE6版的浏览器直接Crash掉。这个plugin叫jQuery Crash,其网页链接在下面,是一个四星级的插件,仅仅435个字节。

http://plugins.jquery.com/project/crash

其是这样介绍自己的,有脏话,我就不翻译了。

A jQuery plugin for crashing IE6. That’ll teach those motherf!%@*#s to upgrade their s#*t.

其它,让IE系例的浏览器挂掉,并不需要Javascript,你可以尝试点击下面这个页面,这是一个纯HTML的页面,没有任何的CSS,或是JS的东西,只有HTML。请小心打开(如果在Firefox中打开也可能会挂,Chrome中没事)

http://www.gregmerideth.net/html/iecrash.html

这个纯HTML的来源是本来是作者写了一个程序生成了一个N层嵌套的表格,结果在IE5中导致了IE5不响应直到Crash并使用了100%的CPU资源,这么多年过去了,还是老样子,在我的dual-core+IE7上,也是一样,占了50%的CPU,而且还有很高的内核使用,最后只能把进程给kill了。BT啊,纯HTML都会让IE这样。

好烂啊有点差凑合看看还不错很精彩 (8 人打了分,平均分: 4.75 )
Loading...
史上最糟糕的网站

史上最糟糕的网站

下面罗列了一些可能是史上最糟糕的网站,当你打开这些网站的时候,请不要太过惊讶,你可以尝试着欣赏一下,不可否认,如果你使劲全力去欣赏,你还是可以找到一些亮点的。呵呵。

  1. http://www.shufsd.org/,这个网站让我想到了我97年在大学里开始学习HTML的时光,该网页的风格可能比当时我做的还要好一些,不过基本上是很类似的。
  2. http://www.havenworks.com/,这个网站呢?先介绍这个网站主要是让你对后面的网站有个过渡,老实说,这个网站比起后面的来说,还算可以了。这个网站教会我们如何分类网页上的信息
  3. http://www.arngren.net/,这个网站教你如何在固定空间的网页上放置更多的信息。这好像是我们日常生活当中经常出现的问题,如何把更多的东西放进一个固定的箱子里,我们不停地调整着物品摆放的位置和顺序……
  4. http://www.team2stool.com/,开始了,这个网站教会我们如何把图片无序地组织起来。
  5. http://yvettesbridalformal.com/index.htm,嗯,初看起来吓一大跳,这个网页教你如何制作一个惊悚的网页,不过往细里看,看久一会,你会发现,这个网页设计得很的印象派的风格,也许是一种艺术。
  6. http://www.dokimos.org/ajff/,什么叫炫,这就叫炫,太炫了,眼睛就炫花了。打开这个网页的时候,要注意浏览器上边的提示条,耶稣真的很强大啊。
  7. http://www.belladesoto.us/,打开这个网页要小心啊,因为这个网页可能比BT下载还猛,据说可能会占用你半GB的带宽。小心啊。
  8. http://www.superbad.com/,这可能是史上最无厘头的网页了,不知道这个网站要干什么,找到可以点的地方点吧,打开一个网页,再点击其中的链接,又打开一个网页,不一会儿你就会在一层又一层的网页中迷路了,好在每次打开的网页都风格迥然,倒也不会觉得单一。

你还知道一些BT的网站吗?欢迎和我们一样分享。

好烂啊有点差凑合看看还不错很精彩 (33 人打了分,平均分: 4.52 )
Loading...
又一个Javascript试验田

又一个Javascript试验田

以前本站发布过一篇《哥是玩程序的》文章向大家展示了用Javascript干的些怪异的事。看来,这样的人并不在少数,这不,我又发现了一个,这回这个好像更有技术含量一些,下面是其试验程序的列表:

http://www.andrew-hoyer.com/experiments


Bacon and Eggs Thumbnail
Simple Sudoku Solver 这是一个“数独游戏”,其在你游戏的过程中可以在空格处提示你可能的数字。

February 2010


Bacon and Eggs Thumbnail
Cloth Simulation 这是一个极端的布料仿真程序。使用鼠标拖曳,按着g键拖曳可以把布悬挂起来。

August 2009

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 5.00 )
Loading...
BT工作原理演示

BT工作原理演示

下面这个网站使用Javascript编写了一个BT工作原理演示动画程序。当然,你可能需要使用Chrome浏览器打开,因为他真的很耗CPU。在我的双核(2GHz)T60电脑上用Chrome打开CPU一下就被耗了50%左右。
下面是我截的一个图,每个圆代表一个结点,其会通过其它结点下载需要的文件段。结点中间的那个Bar有点类似于eDonkey中的下载进度条。至于为什么要用像彩虹一样的颜色,主要是为了让你看到不同的段是从不同的结点下载的。
你可以按热键S来加入一个下载完了的结点,用P来加入一下空结点,按R来删除一个结点(有点慢,要等10秒左右吧)。
BT工作原理演示动画

关于其它Javascript的一些小玩意,你可以看看这篇文章

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 4.00 )
Loading...
一个Windows 3.1的Web网站

一个Windows 3.1的Web网站

啥也不说了,请大家围观下面这个网站吧。

http://www.michaelv.org/

打开这个网站,你会看到N年前DOS时代的Windows 3.1的界面,居然还可以扫雷,呵呵。真应了那句话——“只要是可以被Javascript实现的应用或程序,最终都会被Javascript所实现”。另,关于其它Web上更为疯狂的程序,可以查看本站的这篇文章。还有这个在线的IDE。下面是win3.1的截图:

 

好烂啊有点差凑合看看还不错很精彩 (7 人打了分,平均分: 4.14 )
Loading...
Web程序的最佳测试数据

Web程序的最佳测试数据

这里有一篇Matthias写的关于转义字符文章-“The art of escaping”,这篇文章告诉你有一些比较特殊的字符需要你去认真的处理,不然,你的网站程序轻则出错,重则被人黑了。这些物殊的字符是[<"@%'&_\?/:;,>কী €] ,你可以使用这个字符串到任意一个可以输入的Web程序上去做测试。

下面这个表格告诉你为什么这些字符很特殊。这个列表不会是完整的,而且也永远不会完整。

相关领域 转义字符
HTML < , > , &
JSON
SQL in mySql 字符串 “, ‘, 通配符 %, _
rfc 1738 for URL-parameter ;, /, ?, :, “, @, =, & 空格


把这些转义字符放在一起,然后再整些 utf-8 的一些特殊字符。这些utf-8的字符你可以参看本站的Unicode字符预览表一文,并从中获取。另外,你还可以使用下面的这些工具来对你的程序进行调试或检查:

如果上面的工具都不能帮助你的话,你可能需要打调试日志,或是使用一个透明的代理服务器:如: Charles Web Debugging Proxy (Windows)

(全文完)

好烂啊有点差凑合看看还不错很精彩 (6 人打了分,平均分: 4.50 )
Loading...
Web中的省略号

Web中的省略号

在Web开发中,对于一种情况很常见。那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题。但是,在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事,在IE,Safari,Chrome,Opera中都可以。但在Firefox中却不行,但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 4.25 )
Loading...
哥是玩程序的

哥是玩程序的

下面一组有趣的Web示例,这些示例使用Web的一些很“土”控件做出一些很有趣的玩意儿。原来,编程是可以用来玩的,看看这些玩程序的人搞出的这些有意思的玩意,简直是玩得太有意思了。不过,请注意,这些东西只能使用Chrome打开,不然,你看不到相关的效果。

用滚动条做的时间

http://toki-woki.net/p/scroll-clock/,下面的抓图只显示了时和分,后面还有不停跳动的秒。可以在IE,Fireforx和Chrome中查看。

用滚动条做的时间

用CheckBox做成一个水滴效果

http://the389.com/works/drops/,这个示例的整个页面由Checkbox构成,你用鼠标点一下其中一个CheckBox,你会看到一个巨大的水滴滴了下去。Chrome中效果更好。

用checkbox做的雨滴效果

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (12 人打了分,平均分: 4.25 )
Loading...