2008-04
09

CSS裸奔节

Web ， 浏览：226 4

从总统博客得知，今天（2008年4月9日）是第三届 CSS 裸奔节，这里是中文版介绍。

CSS 裸奔，顾名思义，就是把网页中的 CSS 移除，把页面最原始的表现呈现在访问者面前。这个活动意在推动 Web 标准，倡导使用结构良好、语义明确的 XHTML 构建网页。这样的网页，即便没有 CSS 的支持，层次结构依然清晰明了，只是欠缺美观。

从现在开始，我也开始参与 CSS 裸奔了，除了少数插件的 CSS 不方便移除之外，主体的 CSS 都移除了。网站原形毕露，看起来另有一番滋味吧。活动持续一天，明天即将恢复原状。

2008-04
09

JavaScript下拉菜单

Web ，， 浏览：810 3

去年我曾经写过一篇 CSS 下拉菜单，其中完全只使用 CSS 实现了导航条鼠标悬停下拉菜单的效果（演示地址）。但是只用 CSS 实现起来比较麻烦，代码较多，而且为了浏览器的兼容性不得不使用了两个 CSS 文件，所以我把它叫做“探究”，实用性并不强。

最近我从 blog 的流量统计中发现，很多网友通过搜索“JS 下拉菜单”关键字访问到了我的那篇文章。不过很遗憾，那篇文章和 JavaScript 一点关系都没有，有误导网友之嫌。所以，昨天我花了一点时间把原来的代码做了一点修改，搞了一个简易版 JavaScript 下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了，因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些，不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好，只需要很少的 JS 代码即可实现，而且可以实现多级下拉菜单的效果（我的示例中给出了二级下拉菜单，可以根据需要按照原来的 HTML 结构逐级添加）。

JavaScript 下拉菜单演示地址

页面源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript下拉菜单</title>
    <style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目1</a>   
            <ul>
                <li><a href="#">栏目1->菜单1</a></li>
                <li><a href="#">栏目1->菜单2</a></li>
                <li><a href="#">栏目1->菜单3</a></li>
                <li><a href="#">栏目1->菜单4</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目2</a>   
            <ul>
                <li><a href="#">栏目2->菜单1</a></li>
                <li><a href="#">栏目2->菜单2</a></li>
                <li><a href="#">栏目2->菜单3</a></li>
                <li><a href="#">栏目2->菜单4</a></li>
                <li><a href="#">栏目2->菜单5</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目3</a>   
            <ul>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单1</a>
                    <ul>
                        <li><a href="#">菜单1->子菜单1</a></li>
                        <li><a href="#">菜单1->子菜单2</a></li>
                        <li><a href="#">菜单1->子菜单3</a></li>
                        <li><a href="#">菜单1->子菜单4</a></li>
                    </ul>
                </li>
                <li><a href="#">栏目3->菜单2</a></li>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单3</a>
                    <ul>
                        <li><a href="#">菜单3->子菜单1</a></li>
                        <li><a href="#">菜单3->子菜单2</a></li>
                        <li><a href="#">菜单3->子菜单3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
2008-04
08

很好很强大的Windows Vista源代码

电脑网络 ，，，， 浏览：240 5

微软的 Windows7 据说明年就要发布了，可怜的 Vista，还没有来得及普及就即将要遭到被淘汰的命运了，从这个角度来说 Vista 和 IE7 倒是很相似。我估计有很多用户和我的打算一样，准备越过 Vista 直接从 Windows XP 向 Windows7 挺进。

今天在白云黄鹤 Humor 版看到一个恶搞 Vista 的笑话，稍微有点C语言基础的甚至只要有一点英文基础的就可以看懂了。传说中的 Vista 源代码如下：

/* 

GNOT General Public License!

(c) 1995-2007 Microsoft Corporation

*/

#include "dos.h"
#include "win95.h"
#include "win98.h"
#include "sco_unix.h"

class WindowsVista extends WindowsXP implements Nothing {}

int totalNewFeatures = 3;
int totalWorkingNewFeatures = 0;
float numberOfBugs = 345889E+O8;
boolean readyForRelease = FALSE;

void main {
while (!CRASHED) {

if (first_time_install) {
if ((installedRAM < 2GB) || (processorSpeed < 4GHz)) {
MessageBox("Hardware incompatibility error.");
GetKeyPress();
BSOD();
}
}

Make10GBswapfile():
SearchAndDestroy(FIREFOX|OPENOFFICEORG|ANYTHING_GOOGLE);
AddRandomDriver();
MessageBox("Driver incompatibility error.");
GetKeyPress();
BSOD();
}

//printf("Welcome to Windows 2000");
//printf(Welcome to Windows XP");
printf ("Welcome to Windows Vista");

if (still_not_crashed){
CheckUserLicense();
DoubleCheckUserLicense();
TripleCheckUserLicense();
RelayUserDetaitsToRedmond();
DisplayFancyGraphics();
FlickerLED(hard_drive);
RunWindowsXP();

return LotsMoreMoney,
}
}
2008-04
01

Google推出人肉搜索引擎

电脑网络 ，， 浏览：962 3

google人肉搜索

详情请见这里：http://www.google.cn/intl/zh-CN/renrou/index.html，其中有关于人肉搜索的详细介绍和谷歌人肉搜索志愿者的招聘要求。

哈哈，我承认本文有点标题党，其实这只是 Google 在今天愚人节推出的让大家“会心一笑 暂解烦忧”的小笑话。人肉搜索，当然还得人自己来！

共2页‹ 上一页12