網生@誌 | zEUS.'Blog » 网页美化 http://zeuscn.net Not Only Wordpress Template, But Also My Life... Tue, 03 Jan 2012 13:20:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 新 404 Not Found 页面上线 http://zeuscn.net/archives/2011/07/31/new-404-not-found-page.html http://zeuscn.net/archives/2011/07/31/new-404-not-found-page.html#comments Sun, 31 Jul 2011 11:43:35 +0000 zEUS. http://zeuscn.net/?p=979 去年4月份国内主机到期，限于资金压力将博客迁至国外，使用的是 Homezz 的主机。不过实在无法忍受国外服务器蛋疼的速度，再加上当时需要一个淘宝店的图床，所以没过多久又把博客迁回了国内。

在这一年多的时间里基本没有打理博客，导致丢在 Homezz 那边的论坛（bbs.zeuscn.net）和主题测试站（demo.zeuscn.net）因为空间到期而“报废”。最近2天通过量子统计发现依然有部分访客在访问 demo.zeuscn.net ，结果肯定就是找不到该页面。之后才意识到新做的主题模板还没有404页面，于是昨晚赶工到深夜将404页面上线。

404 Not Found

Not Found

最近不知道为神马对条形码比较有爱，于是就拼凑了一个这样的提示图，把它放在整个网页中，个人还是觉得比较有视觉冲击力的。

图片下面加上了一些必要的访问建议，和嵌入式 google 搜索框，以提高搜索精度。

另外由于404页面相对独立，无需加载插件，所以

<?php wp_head(); ?>

就不再需要了。

其它的 JS 也无需加载，全部从 head 标签内删除。额外给404提示页一个“纯净”的 header ，尽可能缩短该页面的载入时间。

404提示页面的设计和优化基本告一段落，以后根据网站需要再进行修改。

最后，欢迎围观：最新的404页面。

日志评论

本文地址：http://zeuscn.net/archives/2011/07/31/new-404-not-found-page.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2011/07/31/new-404-not-found-page.html/feed 1 CSS opacity 实例页面 http://zeuscn.net/archives/2009/07/15/css-opacity.html http://zeuscn.net/archives/2009/07/15/css-opacity.html#comments Tue, 14 Jul 2009 16:44:59 +0000 zEUS. http://zeuscn.net/?p=600 是 3 里的一个属性样式，它可以实现任意元素（文字、图片、层）的半透明效果，由于是 3 才支持，所以 IE6、IE7 都无法直接实现，但是我们可以用 alpha 滤镜来解决这个问题。半透明样式代码可以这样写：

1
2
3
4
5
6

.opacity{
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* 老版Mozilla */
-khtml-opacity:0.5;              /* 老版Safari */
 opacity: 0.5;           /* 支持opacity的浏览器*/
}

opacity 在 CSS2.0 手册里是这样解释的：

opacity 是 alpha 滤镜的一个可选参数，设置或检索透明渐变的开始透明度。取值范围为 0 – 100 。默认值为 0 ，即完全透明。 100 为完全不透明。

下面来看看实例页面：
http://www.vcbb.net/photo

CSS opacity 实例页面

CSS opacity 实例页面


我们可以看到页面中的所有“图片区域”都蒙上了一层半透明的灰色“蒙板”，当鼠标移动上去后“蒙板消失”，这种效果运用在图片站上非常不错。在这里每一个“图片区域”里虽然包括了图片和标题两部分，但我将整个“图片区域”做成固定的宽高，然后 display:block; 最后将这个图层加上 opacity 的效果。

具体的样式代码我就不贴出来了，大家可以用 firebug 就能直接看到了，而且效果是多样的，代码也是灵活的。需要注意的是想要做成我这个实例页面里的效果需要对半透明层上的 a 和 a:hover 这2个样式特别的定义一下～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/07/15/css-opacity.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/07/15/css-opacity.html/feed 79 给 D&Z Theme 增加一个额外的悬浮菜单 http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html#comments Wed, 26 Nov 2008 08:52:55 +0000 zEUS. http://zeuscn.net/?p=534 D&Z Theme 在导航栏的设计上最多只能容纳5个导航链接，虽然看起来很和谐，但是对于部分使用者来说导航链接过于少了点。这里我介绍一下如何给 D&Z Theme 额外增加一个酷酷的悬浮导航链接区域（例如本站导航栏中的“展开导航”），此方法基于小胖共享的——JavaSript 下拉菜单。这里我放弃 而选择使用 JS 来实现这个效果的原因其一是因为 实现起来兼容性问题很头疼，其二是 JS 实现起来的代码比 的更少！

D&Z Theme 主题的 header.php 中普通导航栏的默认代码是：

1
2
3
4
5
6

<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="博客首页">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?>
        </ul>
</div>

其中第四行代码就是页面页列表，也就是我们每新建一个页面（Page）页，就会在导航栏上出现一个页面页的标题连接。wp_list_pages() 函数的用法可以参考官方文档的说明：
http://codex.wordpress.org/wp_list_pages

下面是我给导航栏增加悬浮菜单后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491,515,8,523,36&title_li=');?>
	    <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>
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            	<a href="javascript:void(0)">展开导航</a>
                <ul>
                <span class="subnav-l"></span>
                <?php wp_list_pages('sort_column=menu_order&depth=1&include=36,523,515,8&title_li=');?>        
                </ul>
            </li>
        </ul>
</div>

同样是第四行，我使用 exclude 参数排除了几个页面（id）链接，使得它们不会出现在导航栏里，同时也在导航栏里腾出了一个位置放“展开导航”，第20行代码是用于显示在悬浮菜单里的页面（Page）页，这里使用了 include 参数来指定需要显示的页面标题连接。

PS：wp_list_pages() 函数里的 exclude 和 include 这2个参数后面的值需要根据自己的页面 ID 号来进行设定。

当然了，悬浮菜单里还能放分类列表，也就是使用 wp_list_categories() 函数代替这里的wp_list_pages() 函数。前者使用方法请参考函数 wp_list_categories 参数详解

下面是悬浮菜单的样式代码，将其添加到 style.css 中即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* Javascript 悬浮菜单样式 */
.subnav-l {
background:url(images/subnav-l.gif) no-repeat;
height:28px;
width:10px;
margin-top:2px;
float:left;
}
.nav ul li ul {
display:none;
padding:0 10px 0 0;
margin:0;
position:absolute;
right:0;
height:30px;
width:auto;
background:#333 url(images/subnav-r.gif) no-repeat right;
list-style:none;
float:left;
z-index:30;
}
.nav ul li ul li {
float:right;
height:26px;
padding:2px 11px;
}

样式中的图片，点击 这里 下载。

这样，导航栏的悬浮菜单就增加完毕了，如果是使用 D&Z Theme 的朋友，除了参数中的几个 ID 需要修改外，无需再改动其它任何内容。

我在给导航栏增加悬浮菜单后在 IE 下遇到了个问题，一旦悬浮菜单展开，文章栏就会下移一小段（被悬浮菜单挤下去的），但我在本地测试却又没有这种情况… 不知道其他朋友会不会碰到这种“怪事” :?: 如果大家还有其它问题，请直接在下面留言。

最后希望大家使用愉快 :mrgreen:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html/feed 26 近期完成的一个小小首页 http://zeuscn.net/archives/2008/11/23/a-little-project.html http://zeuscn.net/archives/2008/11/23/a-little-project.html#comments Sun, 23 Nov 2008 15:26:08 +0000 zEUS. http://zeuscn.net/?p=530 原计划本月完成 主题，不过在动手之前接了2个“项目”，一个是帮一个做摄影的朋友完成一个全新的 主题，另一个是帮助大学同学 9907. 做一个服装网站的首页。所以 Lapis 主题继续无限期的推迟…

由于 WordPress 主题还没有完全“竣工”，所以这里就先不拿出来“现”了。
服装网站的首页已经（抄袭）完成了，采用的是 HTML /DIV 构架，由于我在设计方面并不擅长，所以决定“借鉴”网络上现成的服装网站设计，最终让我找到了一个韩国网站的 设计稿，另外同学希望首页简洁一些，所以我就将设计精简了一下。从写代码开始大约花了2个半天的时间就完成了这个小“项目”，自己都有些惊讶自己的效率。
通过这一年来做 WordPress 主题的实践，虽然现在的我依然缺乏理论知识，但在制作网页能力上的提高是显而易见的，呵呵，08 年算是没有白活…

下面就是网站首页的效果截图：

Live Demo 点 这里

因为 9907. 他自己就会用 asp 写这种电子商务网站的程序，所以我做的这个只是个纯 html 页面。另外作为一个可能被用于商业网站的页面，所以源代码我就不正式的“共享”了，相信使用 的朋友还是能看到源码。

做好这个之后其实我心里痒痒的，很想把它做成一个 WordPress 的模板，功能上可能除了多用户开设网店，在线购物和在线支付这些功能我还无法实现外，其它应该就没啥问题了。

那么如果是针对单个商户，并提供在线下订单，送货上门后货到付款的方式，用 WordPress 来做网站绝对不成问题！恩… 有时间虚拟一个服装网站整整看 :cool:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/23/a-little-project.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/23/a-little-project.html/feed 24 滚动返回页面顶部的JS特效 http://zeuscn.net/archives/2008/10/04/go-to-top-js.html http://zeuscn.net/archives/2008/10/04/go-to-top-js.html#comments Fri, 03 Oct 2008 16:03:37 +0000 zEUS. http://zeuscn.net/?p=499 似乎标题写得比较难懂…

博客也好，网站也好，我们都习惯在页脚处加一个“返回顶部”的文字或者图片链接，点击这个链接后就会自动跳到该页面的顶部。
实现这种功能最常用的一种方法是在网页的 body 标签下添加一个“标记”，即：

1
2

<body>
<a name="top">

然后在页脚添加一个链接即可。

1

<a href="#top">返回顶部</a>

不过现在似乎比较流行动态的特效，比如 Ajax JQuery 什么的，这也要得益于网络传输速度的提高，不然这么些 无疑会严重降低页面载入的时间…

前不久看到一些博客的“返回顶部”效果是动态的从页脚滚动到页面顶部的，而不是常规的瞬间弹到顶部，看起来挺酷的。（效果可以直接参考本站底部的“返回顶部”，点击一下即可～）于是就 google 了一下，找到了相应的 JS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

//<![CDATA[
var goto_top_type = -1;
var goto_top_itv = 0;
 
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
 
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
 
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
 
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
 
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
 
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]>

将上述 JS 代码添加到页脚内，然后再添加如下的链接：

1

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

OK，完事～

对于 博客而言，我们可以这样做：
这里我把上述的 JS 代码单独写成一个文件 gototop.js（下载点击这里），把这个文件 FTP 到所使用的主题目录下，然后编辑 footer.php ，添加文件调用语句：

1

<script src="<?php bloginfo('stylesheet_directory'); ?>/gototop.js" type="text/javascript" charset="utf-8"></script>

最后在 footer.php 相应的地方加入

1

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

这样你也可以拥有这个动态的效果了～

嘿嘿，是不是 dead easy 呢～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/10/04/go-to-top-js.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/10/04/go-to-top-js.html/feed 126 IE6 支持 PNG 格式图片的 CSS 滤镜写法 http://zeuscn.net/archives/2008/08/03/ie6-support-png.html http://zeuscn.net/archives/2008/08/03/ie6-support-png.html#comments Sun, 03 Aug 2008 13:38:03 +0000 zEUS. http://zeuscn.net/?p=463 之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG，不过在做大菠萝3（Diablo III）主题时不愿放弃自己一个比较酷的 Idea，所以我还是决定要解决这个 BUG。
网上关于解决 IE6 这个 BUG 的方法很多，有用 JS 的，也有用 IE6 的 滤镜的。稍微看了一下，JS 的方法仅用于单个图片的效果，但若拿图片作背景则不行。 滤镜的写法则简单很多，也能用作背景，但还是存在一个问题，图片的地址只能使用“绝对地址”，而我们在模板的 CSS 样式表里使用的大多是相对地址，虽然也可以使用绝对地址，但是不同的用户使用该模板的话就必须修改其绝对地址，对于不懂 CSS/HTML 的人来说，无疑这是一道“坎”。不过后来猫猫的一句话让我如梦初醒——可以把这段 CSS 写在 head 里，这样就可以用 自己的 PHP 语句来调用绝对地址了！

让 IE6 支持 PNG 图片背景透明的 CSS 滤镜写法如下：

1
2
3
4

*html #image-style {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

这里我写了一个实例：http://zeuscn.net/download/ie6png.html
使用 和 IE7 浏览器看的话，2张图片没有区别，但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。

1
2
3
4
5
6
7

#test {
	background:url(h2-bg.png) no-repeat;
	*background-image: none;
	*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://zeuscn.net/download/h2-bg.png", sizingMethod="scale");
	height:85px;
	width:66px;
}

我们可以从实例中的代码看到，由于 HTML 文件和图片 h2-bg.png 位于相同目录，所以这里的背景链接我是使用的相对地址。而下面的 CSS 滤镜我使用的是绝对地址。这里我为了兼容 Firefox IE6 和 IE7 我使用了 Hack 的写法：属性前添加 “*” ——只让 IE 核心的浏览器识别。

那么在 WordPress 模板的 head 标签内的 CSS 样式表调用之后，添加了下面的样式代码来绕过在样式表内使用绝对地址的问题：

1
2
3
4
5
6
7
8
9

<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
<style>
.post .title-bg {
	height:85px;
	width:65px;
	*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale");
	position:absolute;
}
</style>

这个效果的具体样式是什么样的呢？嘿嘿，主题发布之日就能揭晓了～

zEUS.

日志评论

  • 2008年, 八月 3日, 童丹艺 writes: 瓦咔咔~~抢到1楼~~虽然还没有看。。。嗯嗯，会看完的。。虽然看不懂。。呵呵，无比激动咧~~
  • 2008年, 八月 3日, zEUS. writes: @童丹艺：呵呵，多谢支持撒～～ 看不懂光抢沙发就够啦～～
  • 2008年, 八月 3日, zx.longinus writes: 在以前沒有放棄 ie6 支持的時候，我會使用 gif 做個簡陋版專門給 ie6 使用，雖然當時就知道利用 filter 和 css hack 的方法，但是總覺的 ie6 的用戶很低等，沒有必要為他們花時間……
  • 2008年, 八月 3日, zEUS. writes: @zx.longinus：额... 你可以看作我是为了模板更 popular，虽然我也很烦 IE6 但是为了用户体验，为了流量，不得已而为之。不过我不BS用户，因为他们是 IE6 的“受害者”。
  • 2008年, 八月 4日, wayne writes: ie6太lj了...
  • 2008年, 八月 4日, fiorano writes: 最早用itheme的时候，试过这个方法，可是死都不出效果，不知道是不是主题的问题 :???:
  • 2008年, 八月 4日, zEUS. writes: @wayne：确实很垃圾，IE6增加了我不少负担！！ :twisted: @fiorano：呵呵，这个效果我也搞了半天才研究清白...
  • 2008年, 八月 4日, page writes: 你这个 语法高亮怎么实现呢？
  • 2008年, 八月 4日, zEUS. writes: @page：coolcode 一款国人改造的插件，还不错～ 支持很多类别的代码高亮。
  • 2008年, 八月 4日, Yacca writes: 我只给gavartar做了css滤镜... 其他的图片因我能够控制显示,所以就干脆不用透明背景了...呵呵 自己用的皮 什么都可以通融 哈哈
  • 2008年, 八月 4日, zEUS. writes: @Yacca：呵呵，因为正在做的 DiabloIII 主题的背景色要么渐变，要么背景复杂，所以只能寻求PNG的透明效果了 :smile:
  • 2008年, 八月 4日, dogorgod writes: 呵呵，兄弟的探索精神果然不凡，这个难题都攻破了。赞 :lol:
  • 2008年, 八月 4日, sofish writes: [Comment ID #5096 Will Be Quoted Here] 爱折腾的人都是这样的，哈哈... 正好想要,不过呢,GIF不是更小一点?
  • 2008年, 八月 5日, GanGeGe writes: 不到万不得以我是决不会把PNG放在网页上的......
  • 2008年, 八月 5日, 花果山寨 writes: 专业的介绍，学习学习！
  • 2008年, 八月 5日, willerce writes: 试过用这个方法. 但是一旦用多了.就会很卡. 比如vikiworks.com现在用得太多,一用IE进,就卡得不行.
  • 2008年, 八月 6日, 老N writes: 这样的技术文章只好先保留了，自己作主题时再拿出来瞅瞅哦~~ :lol:
  • 2008年, 八月 9日, 知更鸟 writes: 这个一定要试试了
  • 2008年, 八月 10日, zEUS. writes: [Comment ID #5098 Will Be Quoted Here] GIF 背景透明的图片放到网页上会有白边... @GanGeGe：恩，我就是万不得已。。 @willerce：恩，尽量少用
  • 2012年, 一月 17日, new technology in nuclear medicine writes: Extra Reading... [...]we like to honor other sites on the web, even if they aren't related to us, by linking to them. Below are some sites worth checking out[...]...

本文地址：http://zeuscn.net/archives/2008/08/03/ie6-support-png.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/08/03/ie6-support-png.html/feed 20 使用 DW 制作悬浮菜单 http://zeuscn.net/archives/2007/12/19/make-a-onmouseover-menu.html http://zeuscn.net/archives/2007/12/19/make-a-onmouseover-menu.html#comments Wed, 19 Dec 2007 14:52:17 +0000 zEUS. http://zeuscn.net/archives/2007/12/19/make-a-onmouseover-menu/ 之前使用 制作过悬浮菜单，但它只能显示在 和 Safari 上，而不能显示在不完全支持 CSS2.0 的 IE6 上，为此我花了很长时间搜寻解决之道，期间被那该死的 IE 折磨得我抓狂无数次，可仍然无果… 最后我不得不放弃使用 CSS 而转投 …

这里我将介绍的是使用 DreamWeaver 直接进行可视化操作来创建一个悬浮菜单，整个主线过程无须操作代码，实现起来非常简单，当然，最重要的是它适用于所有主流的浏览器！

具体效果可以参见本站日志栏下的“文章分类”和“日志归档”这2个栏目。

悬浮菜单

运行 DW 后新建一个 HTML 文档，我们先单击“布局”栏的“绘制 AP Div”按钮（上图红圈处）来绘制2个 DIV 容器，默认命名为：apDiv1 和 apDiv2，然后给它们添加一些内容和样式，并稍微修改代码让 apDiv1 包含 apDiv2。

接下来我们想要的效果是：默认不显示 apDiv2 菜单，当鼠标移动到 apDiv1 层上，则显示 apDiv2 菜单，移开则让 apDiv2 菜单隐藏。

开始添加 JavaScript 效果：点击工具栏的“窗口”

悬浮菜单

并在下拉菜单中选择“行为”，即可在右侧栏看到“行为”的设置窗口

悬浮菜单

在可视化的界面下选择 apDiv1 层，然后给其添加行为：“显示-隐藏元素”

悬浮菜单 

悬浮菜单 （图-1）

修改这个行为的条件为“onMouseOver”

悬浮菜单 （图-2）

你可能已经看懂了，以上步骤就是实现鼠标移动到 apDiv1 层上（onMouseOver），然后就显示 apDiv2 菜单，接下来创建一个相反的行为：鼠标从apDiv1 层上移开则隐藏 apDiv2 菜单，过程与上面大致相同，不同的是当创建到（图-1）步骤时选择隐藏 div “apDiv2″ ，进行到（图-2）步骤时条件选择为：onMouseOut。

最后我们还需要将 apDiv2 菜单的初始状态设为隐藏才能真正达到效果。将下面这段代码加入到 apDiv2 的样式中即可：
visibility: hidden;

保存预览即可看到效果，不过 Firefox 和 IE6 下的效果会有些不一样，可以根据需要针对性的在 CSS 里进行不同的定义。

zEUS.

日志评论

  • 2007年, 十二月 19日, Bony writes: 沙发， 我不是一个人在战斗。哈哈 那个theme不错哈。。。不修改。。。稍后修改。。。
  • 2007年, 十二月 19日, zEUS. writes: 哈哈，Bony 真是神速啊～ :grin:
  • 2007年, 十二月 20日, keke writes: 前几天我们刚刚完成一个制作网站任务，早看到这个就可以实践一下累 :lol:
  • 2007年, 十二月 20日, sofish writes: 感觉不错,最喜欢的还是你这个主题弄得那个single post左侧的content menu :mrgreen: ...
  • 2007年, 十二月 20日, gangege writes: 很好，我就喜欢用DW做东东!
  • 2007年, 十二月 20日, 小胖 writes: 我前段时间倒是研究过纯css的悬浮下拉菜单 :smile: http://www.helloxudan.net/2007/11/09/inquiry-pure-css-drop-down-menu.html
  • 2007年, 十二月 20日, 凯尔 writes: 不错，顶一下 不过现在博客层次都比较平，很少能用到悬浮菜单，另外自己更喜欢直接写。
  • 2007年, 十二月 20日, fiorano writes: 好难。。。dreamweaver尝试了好多次，结果同时尝试的eclipse会了，netbean会了，firework也会了，就是这个还不会。。。
  • 2007年, 十二月 20日, zEUS. writes: @凯尔：做悬浮菜单主要是因为 WP 默认的下拉菜单样式无法修改，和主题不搭调，所以干脆自己做一个。我对 JS 代码不熟悉，所以只好借助工具了 :oops:
  • 2007年, 十二月 20日, zEUS. writes: @fiorano：呵呵，我比较幸运，有个同事玩 DW 超级厉害，我跟他学了不少招数～ 另外 eclipse 和 netbean 是啥？ :oops:
  • 2007年, 十二月 20日, zEUS. writes: @小胖：如果能早点读到你这篇日志我就不会抓狂那么长时间了... :cry: @gangege：握手！ @sofish：呵呵，其实是右侧 :lol: @keke：我还会继续介绍用 DW 做特效的～ 有空多来看看吧～ :smile:
  • 2007年, 十二月 23日, 创意岛 writes: 哈哈，你博客的那只大铁手终于没了，可能因为我是女生，说实话，真不太习惯那只大手。
  • 2012年, 一月 19日, thanksgiving crafts for kids thanksgiving crafts for toddlers writes: Recommended Resources... [...]the time to read or visit the content or sites we have linked to below the[...]...

本文地址：http://zeuscn.net/archives/2007/12/19/make-a-onmouseover-menu.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2007/12/19/make-a-onmouseover-menu.html/feed 13 另一个 CSS 效果：增加 blockquote 属性 http://zeuscn.net/archives/2007/10/13/blockquote-effect.html http://zeuscn.net/archives/2007/10/13/blockquote-effect.html#comments Sat, 13 Oct 2007 04:22:08 +0000 zEUS. http://zeuscn.net/archives/2007/10/13/blockquote-effect/ 本站所使用的 主题 i3Theme 1.2 (Right Edition) 并没有 blockquote 属性，之后是在 Yorick 的帮助下才加上去的。
何为 blockquote 属性呢——其实就是用于修饰文章内引用文字的效果，如下就是：

这是一个在 里设置的 blockquote 属性，以显示左侧边框

下面就是加入到 CSS 文件里的代码：

/* 增加blockquote属性以显示左侧边框 */
blockquote {
border-left: thick solid #808080;
padding-left: 10px;
}

值得注意的是，该段代码不能加入到 CSS 代码最后的位置，而应该加在
/*— header area — */
之前，例如紧接 h2、h3 这些标签的属性之后。

懂点英语的朋友应该可以直接看出上面代码的含义，除此之外我们还可以给 blockquote 设置其它属性，比如用 background: url(…) 来设置背景图片等，这里不一一介绍了，大家可以自行“体验”。

最后，给大家分享一个比较好的 CSS 资料：样式表中文手册（点击下载），所有 CSS 的属性、效果都可以在其中检索到。
祝愿大家早日玩转样式表 Have Fun :-)

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2007/10/13/blockquote-effect.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2007/10/13/blockquote-effect.html/feed 94 介绍一个 CSS 图片特效 http://zeuscn.net/archives/2007/10/11/css-image-cool-effect.html http://zeuscn.net/archives/2007/10/11/css-image-cool-effect.html#comments Thu, 11 Oct 2007 15:30:19 +0000 zEUS. http://zeuscn.net/archives/2007/10/11/css-image-cool-effect/ 不知道有没有人发现我换掉了 Feed 的统计图标，而使用了一个 RSS 的图片来链接到 本站 Feed 地址，然后我给这个图片做了一个 特效，你可以试着把鼠标移上去（位于“协议&订阅”模块的下方）… 是不是很棒？！

这个特效具体被称作什么，我也不太清楚，用我自己的描述就是：一个链接图案，鼠标滑上去后它就会切换成另一个图案。
之前我一直以为 CSS 通过 hover 这个动作来切换2张不同的图片，可试了半天没成功，最后 Jason 告诉我这并不是切换2张图片，而是给一张具有2种不图案的图片进行不同定位以取得不同的效果。怎么这句话这么难让人理解… 还是我表达有问题？
接下来简单介绍这个特效的实现方法：

首先准备一张具有两种大小一致图案的图片：

这个图片长118px，高59px，原理就是，我先让它显示下半部分的图案，当鼠标移动上去后，它就会显示上半部分的图案。下面给出实现特效的 CSS 代码：
/* RSS 图片效果 */
#rsslink a {
background: url(images/rss.png) no-repeat bottom left;
border: none;
width: 118px;
height: 30px;
display: block;
}
#rsslink a:hover {
background: url(images/rss.png) no-repeat top left;
height: 30px;
display: block;
}
代码中 rsslink 是这个特效的名称；a:hover 是鼠标移动的动作；background: url(images/rss.png) 是背景图片；display: block; 是显示背景图案；代码第一部分我通过 bottom left 的定位先显示背景图片的下半部分的图案，第二部分再通过 top left 的定位来显示背景图片上半部分图案。最后将这个 CSS 效果通过 span id 赋给 feed.zeuscn.net 这个链接：

然后就有了这种效果：

嘿嘿，是不是很简单，你学会了没呢？ :-P
今后凡是学会了新的 CSS 特效我都会在这里“现学现卖”一番，来跟大家一起分享这些美化网页的方法！

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2007/10/11/css-image-cool-effect.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]>
Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\feed-rss2.php on line 49

Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\wp-db.php on line 502