图片写了vertical-align后再加边框导致的1px的问题
[
2006/05/23 18:48 | by 土豆 ]
由于网页里经常会碰到图文混排的情况，比如：
如果需要文本对其在图片的中央，可能会需要用到vertical-aglign属性：
此时这个样式会影响页面中所有的图片效果，如果在图片上再添加border的话，在IE中容易遇到有1px的误差。
解决方案：在后边添加的border样式里，写上新的 vertical-align 样式，设置为默认：
<img src="" /> 这里是文本
如果需要文本对其在图片的中央，可能会需要用到vertical-aglign属性：
img { vertical-align:middle; }
此时这个样式会影响页面中所有的图片效果，如果在图片上再添加border的话，在IE中容易遇到有1px的误差。
解决方案：在后边添加的border样式里，写上新的 vertical-align 样式，设置为默认：
vertical-align:baseline
最近在做VIDEO方面的网站，在YOUTUBE上看到一个这么段视频，他们用一只甲虫，放在类似滚轴鼠标的一个圆球上，小虫在球上的爬行，可以让整架车子进行移动。
猜测原理类似滚轴鼠标吧！有点像《黑衣人》里那个小外星人驾驶一个人类的躯壳的意思！
Flash Player文件
猜测原理类似滚轴鼠标吧！有点像《黑衣人》里那个小外星人驾驶一个人类的躯壳的意思！
Flash Player文件
网站优化方法（精选）及SEO实例参考
[
2006/05/19 14:06 | by 土豆 ]
网站优化方法（精选）及SEO实例参考
作者:佚名 来源:互联网 发布日期:2006-5-15
[声明：下文非原创，朋友发送给我的，大家共勉！]
首先说明一下,SEO 真的可以提高在 GOOGLE 的搜索排名,方法也很多样化,我将对比较有用且容易见效的方法做一下介绍,
从以下几个方面一步一步说:
1. 标题 策略
2. 关键词 策略
3. 链接策略
4. 注册策略 或者称BLOG策略
5. 在线手册策略
6. URL 重写策略
7. 简繁转换策略
8. 点击策略
9. 页面排版策略
10.写作策略
11.其他方法
作者:佚名 来源:互联网 发布日期:2006-5-15
[声明：下文非原创，朋友发送给我的，大家共勉！]
首先说明一下,SEO 真的可以提高在 GOOGLE 的搜索排名,方法也很多样化,我将对比较有用且容易见效的方法做一下介绍,
从以下几个方面一步一步说:
1. 标题 策略
2. 关键词 策略
3. 链接策略
4. 注册策略 或者称BLOG策略
5. 在线手册策略
6. URL 重写策略
7. 简繁转换策略
8. 点击策略
9. 页面排版策略
10.写作策略
11.其他方法
CSS布局高级技巧[转]
[ 2006/04/23 10:39 | by 土豆 ]
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
解决的方法是 hack
具体解释点击下面链接查看
www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114
列等高技巧
n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
背景图填充法：
css:
就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉
来源：http://hack.itit8.com/article.asp?id=90
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
解决的方法是 hack
div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
具体解释点击下面链接查看
www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114
列等高技巧
n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
背景图填充法：
xhtml:
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉
来源：http://hack.itit8.com/article.asp?id=90
css 十大密技[转]
[ 2006/04/20 16:08 | by 土豆 ]
在某blog看到一篇关于css的文章，觉得还挺有用的，大致译了一下，译文和原文如下，如果有译得不正确的地方或是对类似问题有其他更好地解决办法的，请不吝赐教！
译文：
1.css 字体简写规则
当使用css定义字体时你可能会这样做：
事实上你可以简写这些属性：
现在好多了吧，不过有一点要注意：使用这一简写方式你至少要指定font-size和font-family属性，其他的属性（如font-weight, font-style,font-varient）如未指定将自动使用默认值。
2.同时使用两个class
通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：
通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。
3.css中边框（border)的默认值
当编写一条边框的规则时，你通常会指定颜色、宽度以及样式（任何顺序均可）。例如：border: 3px solid #000（3像素宽的黑色实线边框），其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线（solid),那么其余的值将使用默认值：默认的宽度为中等（相当于3到4像素）；默认的颜色为边框里的文字颜色。如果这正是你想要的效果，你完全可以不在css里指定。
译文：
1.css 字体简写规则
当使用css定义字体时你可能会这样做：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性：
font: 1em/1.5em bold italic small-caps verdana,serif
现在好多了吧，不过有一点要注意：使用这一简写方式你至少要指定font-size和font-family属性，其他的属性（如font-weight, font-style,font-varient）如未指定将自动使用默认值。
2.同时使用两个class
通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：
<p class="text side">...</p>
通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。
3.css中边框（border)的默认值
当编写一条边框的规则时，你通常会指定颜色、宽度以及样式（任何顺序均可）。例如：border: 3px solid #000（3像素宽的黑色实线边框），其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线（solid),那么其余的值将使用默认值：默认的宽度为中等（相当于3到4像素）；默认的颜色为边框里的文字颜色。如果这正是你想要的效果，你完全可以不在css里指定。