昨天在给同学搞一段 js 的时候遇到一个问题，和大家分享一下。
首先我们写一个很简单的 table，中间不带 tbody，看一下它在各浏览器下是如何被解析的。
<!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>
<style>
table, td { border:1px solid #CCCCCC; border-collapse:collapse; padding:5px; }
</style>
</head>
<body>
<table id="table">
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
</table>
</body>
</html>
继续阅读 »
首先，我们先看一下例子：
HTML 代码：
<pre>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function tagCloud() {
if(document.getElementById("tags_cloud")) {
var tags = document.getElementById("tags_cloud");
var tagLinks = tags.getElementsByTagName("a");
var styles = new Array();
styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
for(var i=0; i<tagLinks.length; i++) {
tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
}
}
}
addLoadEvent(tagCloud);</pre>
CSS 代码：
pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}
这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。
继续阅读 »
很多初学者会对标签云效果（不了解？就我这里的头部那些标签）感兴趣，其实使用 JavaScript 制作起来是相当容易的，原理很简单，就是随机为每一个标签添加样式，只需要用到 Math.random() 和 Math.floor(x)。
先看 HTML 代码：
<div id="tags_cloud">
<a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a> <a href="#">12岁</a>
</div>
然后我们在 JavaScript 里边这么写：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function tagCloud() {
if(document.getElementById("tags_cloud")) {
var tags = document.getElementById("tags_cloud");
var tagLinks = tags.getElementsByTagName("a");
var styles = new Array();
styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
for(var i=0; i<tagLinks.length; i++) {
tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
}
}
}
addLoadEvent(tagCloud);
继续阅读 »
今年在制作 Comsenz 网站的时候，除首页外使用了绝对定位的布局，但是，在后来发现了一个问题，就是在 IE6 下不能正常选择绝对定位的元素内的文字（即当元素的被设置 position:absolute; 时，将引发此问题，relative 不会出现这种问题）。在网上搜了搜，解决的办法就是进入 Quirks Mode 模式，很明显，这并不是我想要的，那么我现在面临两条路：一是放弃绝对定位的布局方式，一是找到解决方法。当然，我并不愿意放弃这种布局模式，因为我感觉使用起来确实很方便，那么我该如何去解决在 IE6 下的问题呢？
在做这个网站的最初，我就决定不用不符合标准的 HACK，而尽量去使用条件注释解决 IE 下出现的问题，因此，我通过条件注释为 IE6 单独设置了一个特殊的 CSS 文件。那么现在我要做的就是让盒子在除 IE6 外的浏览器上使用绝对定位布局，而在 IE6 内使用浮动来布局。
继续阅读 »
本篇文章原文地址：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。
译文内容：
当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。
旧的方法
经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信这也是很多设计师喜欢做的事情。首先，我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离，然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。
现在让我们来看一下这种方法的代码以及它所带来的问题：
CSS 代码：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
vert-hoz{
position:absolute;
top:50%;
left:50%;
margin-top:-198px;/* half elements height*/
margin-left:-313px;/* half elements width*/
width:624px;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
HTML 代码：
<div id="vert-hoz">
<h1>Content goes here</h1>
</div>
你可以在这里看到这段代码的展示。
我为它设置了一个背景图片，仅仅是为了让它看起来更舒服一些，而我们真正需要注意的部分是中间那部分灰色的区域。
继续阅读 »
有时候我们需要在页面中动态的创建一些节点，比如 <a> 标签，然后对其添加一下触发的事件，比如下边这个很简单的例子：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function create() {
var bodys = document.getElementsByTagName("body");
var link = document.createElement("a");
link.href = "#";
var text = document.createTextNode("创建一个节点");
link.appendChild(text);
link.onclick = function() {
alert("哈哈");
return false;
}
bodys[0].appendChild(link);
}
addLoadEvent(create);
继续阅读 »