今天在做 CSSer 的读书页面的时候发现一个奇怪的问题，就是我设置好浮动的链接出现了问题，最后一个单独在一行的链接并没有浮动到左边，而是浮动到了右边。大家可以看下代码先：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Arial 字体的问题</title>
<style>
body { font:12px Arial, "宋体", Verdana, sans-serif}
div { padding:1px 1px 5px 1px; margin-bottom:10px; width:350px; font-size:12px;}
ul { margin:0 5px; margin-left:-4px; overflow:hidden; }
li { float:left; padding:0; display:inline; margin-left:11px; margin-bottom:5px; }
li a { background:#FCFCFC; display:block; float:left; width:123px; padding:5px; font-weight:600; color:#6F1197; border:1px solid #000000; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="/m.php?name=readbook" title="读书首页">读书首页</a></li>
<li><a href="/m.php?name=readbook&mo_catid=1" title="CSS">CSS</a></li>
<li><a href="/m.php?name=readbook&mo_catid=2" title="JavaScript">JavaScript</a></li>
<li><a href="/m.php?name=readbook&mo_catid=3" title="用户体验">用户体验</a></li>
<li><a href="/m.php?name=readbook&mo_catid=4" title="艺术设计">艺术设计</a></li>
</ul>
</div>
</body>
</html>
大家可以复制到本地看一下，或者到这个页面看下，最后一个链接“艺术设计”本应该在左边的，但是它却跑到了右边。这是什么问题呢？
继续阅读 »
来北京有一年多了，去圆明园也有好多次了，但是每次看到的都是一片废墟，从来没看到过荷花。今天再次去圆明园，心想这次一定可以看到荷花了。幸好，这次看到的不再是一片废墟，但是我还是没有看到荷花，仅仅看到的是一望无际的荷叶。
哎，不甘心啊，好不容易来看一次荷花，却看到的只有荷叶，虽然说比废墟好多了，但是我想看的是荷花不是荷叶哦。找啊找，找啊找，终于看到一个比较完整的很小的荷花。
继续阅读 »
在看到这篇文章之前，我也不知道这种方法能够这么简单、快捷的解决问题，在以前的使用中我通常是左右两个浮动，右侧固定宽度，相对来说比这个方法要复杂好多，而结果也不尽人意，既然看到了这种方法，就顺便和大家一起分享下，让还不知道这种方法的人学会使用这种方法。原文地址：http://www.search-this.com/2008/08/13/my-css-is-cat-categories-with-css/
这篇文章的内容主要是介绍如何制作一个带图片和文字的产品列表。如果你使用过亚马逊的搜索，你会明白这是一种什么样的形式。
我将从向您展示一个成品开始，这样子可以很好的让您明白通过这种方法我们将完成什么样的目标。下边这个图片是我们最终结果的一个雏形。
图1
我们现在要制作一个类似的效果，但是不是用表格，在我看来，这并不是一个表格，他没有符合逻辑的行和列。即使您现在有一个很好的例子说明为什么要使用表格，但是请不要做过多的评论，我们这里讨论的仅仅是布局的技巧而不是完美的语义展示（对于这个范例）。这种方法可以使用在很多的场合，当然不是在表格中使用，你会发现它真的是很有用。
继续阅读 »
Jeremy Keith 在《JavaScript DOM编程艺术》一书中为我们做了一个小的例子，例子中使用了一段简单的高亮当前位置的 js 代码，代码如下：
function highlightPage() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("navigation")) return false;
var nav = document.getElementById("navigation");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
var linkurl = links[i].getAttribute("href");
var currenturl = window.location.href;
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
原理很简单，就是首先获取当前的网址，然后遍历菜单栏，如果当前网址包含了菜单栏内的链接地址，就给这个链接的 class 定义为 here，从而达到高亮的效果。但是我在使用的过程中遇到了一些特殊情况，这段代码就不能满足我的要求了。
先看一下我的菜单栏：
<div id="menu">
<ul><li><a href="http://www.12sui.cn/">首页</a></li><li><a href="http://www.12sui.cn/2">第二页</a></li><li><a href="http://www.12sui.cn/3">第三页</a></li></ul>
</div>
如果我是用了上述 js 代码，那么当我停留在第二页或者第三页的时候首页同时也会被高亮，这并不是我想要的结果，解决方法有二：
第一种方法，我可以在首页的网址后边再加一个 index.php 或者其他的后缀（我的博客现在就这么搞。。。），这样子就可以解决问题，优点是简单，缺点是无法解决更复杂的菜单，比如我在一个使用了 URL 静态化的二级页面，这种方法将无法实施。
第二种方法，采用 split() 获得更精确的定位。
继续阅读 »
昨天在给自己网站做一个效果的时候发现的一个问题，不知道算不算是 IE 的bug。
首先看一下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>赋值运算符“=”</title>
</head>
<body>
<div style="width:100%; height:600px;">测试页面</div>
</body>
</html>
<script>
var bodys = document.getElementsByTagName("body");
var cur_num = Math.floor(34*Math.random());
var cur_style = "url(http://www.jolintown.com/site/cursor/cur/" + cur_num + ".cur)";
alert(cur_style);
bodys[0].style.cursor = cur_style;
</script>
如我们所想，得到的结果应该是一个正常的结果，可以在这里看到演示。
继续阅读 »
首先大家看一下下边这张图片：
这样的布局很常见，你会怎么安排呢？其实要做到这一点十分的简单，也有很多种方法，但是哪种方法最适合呢？
一、左右同一级别、同一性质
先看下结构：
<div>
<div class="alignLeft"></div>
<div class="alignRight"></div>
</div>
这是在 WordPress 里边使用的上一篇日志和下一篇日志的结构，左右都是日志，具有相同的重要性，我们可以在 css 文件中让 alignLeft 浮动在左侧，alignRight 浮动到右侧，这样子就可以轻松搞定了。
二、新闻类型的
先看下 CSSer 的首页的新闻列表：
新闻标题在左，日期在右，你会怎么写结构呢？SupeSite 给出的结构是这样的：
<li>
<cite>新闻日期</cite> 新闻标题
</li>
而 CSS 定义是：
li cite { float:right;}
三、标题和右侧
先看下结构：
继续阅读 »