逍遥老鬼继续扯淡

　　昨天，我发了一个input标签清空的日志，冰雪黑鹰说我的那个还不是很标准的，帮我重写了一个，现在的看着也简洁，而且也符合哪些什么标准，特别在这里感谢下。附上代码，以备后用……

js部分：

function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
 
function checkText(){
	var textId = document.getElementById('test');
	var textDefault = '请输入字符';
	function cls(){
		if (this.value == textDefault){
			this.value = '';
		}
	}
	function res(){
		if (this.value == ''){
			this.value = textDefault;
		}
	}
	textId.onfocus = cls;
	textId.onblur = res;
}
addLoadEvent (checkText);

html部分:

<input type="text" value="请输入字符" id="test" />

　　刚才荆棘鸟在群里讨论他的标签是否符合w3c的标准，贴上来一段代码，作用是，一个文本框，需要输入内容，在没有输入的时候里面有一段提示内容，当点击这个文本框输入的时候，文本框内的内容自动消失。挺简单的一个功能，但是没有想到实现起来还是很麻烦的，在网上找了一段代码，贴上来以备后用。

　　好像html里面加上这样的js代码就不符合标准了……不过标准是死的，人是活得，不一定处处都符合标准。

　　来源：闪吧

　　解决思路：当需要填写的文本框很多时，在每个文本框内写上提示信息是个不错的办法，但这样一来用户在填写该项时必须先把提示文本删掉，非常不方便。所以应该让文本框更人性化一点，在focus时检查当前值是否为文本框的默认值，是则清空，否则保持不变，而在blur时检查文本框的内容是否为空，是则重置为默认值，否则保持不变。

　　具体步骤：

　　1.设置文本框的默认值或提示信息。

<input value="填写您的昵称">
<input value="填写您的生日(1900-01-01)">

　　2.判断、清空文本框内容的函数。

function cls(){
with(event.srcElement)
if(value==defaultValue) value=""
}

　　3.判断、还原文本框内容的函数。

function res(){
with(event.srcElement)
if(value=="") value=defaultValue
}

　　4.给文本框添加触发事件onfocus和onblur，调用函数处理。完整代码：

<script>
function cls(){
//捕获触发事件的对象，并设置为以下语句的默认对象
with(event.srcElement)
//如果当前值为默认值，则清空
if(value==defaultValue) value=""
}
function res(){
//捕获触发事件的对象，并设置为以下语句的默认对象
with(event.srcElement)
//如果当前值为空，则重置为默认值
if(value=="") value=defaultValue
}
</script>
<input value="填写您的昵称" onfocus="cls()" onblur="res()">
<input value="填写您的生日(1900-01-01)"
onfocus="cls()" onblur="res()">

　　注意：本例的方法对大部分表单控件都有效，比如多行文本框。

　　特别提示：运行完整代码，在鼠标第一次单击文本框时该文本框内容将被清空，在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值，将不再有任何变化。

　　刚才在怿飞的博客上看到，<img>标签，一样可以加上背景的。

　　以前不知道，但是看他那里评论，这个其实很早就有人用了，他的方法就是，首先将<img>标签设置成块(block)，然后就可以加上背景了。

　　这种办法其实挺简单的，比如，做一系列的图片列表，需要添加背景的那种，就可以不用加上厚厚的边框来实现那种带边框的效果了。加上一个背景，还是挺好看的，加个花边或者别的。

　　怿飞这里有个例子可以看看：例子地址。

　　给img设置双边效果的代码可以参考下面的代码：

img {
display:block;
padding:1px;
background:red;
border:1px solid black;
}

　　昨天用手机上QQ，偏偏这个时候ding跟老蛇说起了a这个标签的那些伪类，碰巧，我又不会，靠，在手机QQ上偷学了半天，别提多费事了。ding那里把昨天说的东西都整理出来了，我也就省事了，直接搬过来用用算了。

　　注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，link>visited>hover>active，Ding那里有几个地方visited写错了。

　　现在开始引用他整理的东西：

　　伪类的2种用法。我就常用最简单的那种，另外的那种方法真没用过。。写出来今天也刚学的知识点。

　　普通的伪类：

　　selector:pseudo-class {property: value}

　　例如：

• .ooxxoo a:link {}   /* 未被访问的链接 */
• .ooxxoo a:visited {}  /* 已被访问过的链接 */
• .ooxxoo a:hover {}  /* 鼠标悬浮在上的链接 */
• .ooxxoo a:active {}  /* 鼠标点中激活链接 */

　　第二种用法的伪类：

　　selector.class:pseudo-class {property: value}

　　例如：

• a.ooxxoo :link {}  /* 未被访问的链接 */
• a.ooxxoo :visited {}  /* 已被访问过的链接 */
• a.ooxxoo :hover {}  /* 鼠标悬浮在上的链接 */
• a.ooxxoo :active {}   /* 鼠标点中激活链接 */

　　以前也经常遇到未知高度的图片或者文字垂直居中的问题，搞一堆代码，最后才使的图片垂直居中了，太麻烦，甚至现在我的博客上面的rss的图标，还没有垂直居中。

　　今天怿飞的博客上发表了一篇关于图片垂直居中的日志，代码很简单，对我说帮助不小，转载记录下，方便以后自己的使用。

　　在曾经的 淘宝UED 招聘 中有这样一道题目：

　　“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

　　当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

　　题目的难点在于两点：

1. 垂直居中；
2. 图片是个置换元素，有些特殊的特性。

　　至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

　　当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

• 《Vertical centering using CSS》
• 《Vertical centering using CSS》（标题和上同，内容不同）
• 《CSS List Grid Layout》

　　首先，感谢可乐，还惦记着我的这问题，虽然不大，但是也给出了答案，就是关于有序列表的问题。

　　大家都知道用<ol><li>内容</li></ol>可以对列表进行排序，可以用数字排列可以用字母等等，比如下面的：

1. 列表一
2. 列表二
3. 列表三
4. 列表四

　　这样排序清楚明了，很实用，代码也很简单：

　　但是又有问题了，如果我不想排序从一开始呢？我想从一百从一千开始排列，那又该怎么办呢？这也就引出了今天的问题。从网络上搜索了下，其实很简单，就用star这个属性就可以实现，代码如下：

　　但是OL的这type和start俩个属性在 HTML 4.01 中，ol 元素的 “compact”、”start” 以及 “type” 属性是不被赞成使用的。在 XHTML 1.0 Strict DTD 中，ol 元素的 “compact”、”start” 以及 “type” 属性是不被支持的。

　　可乐又找出了一种写法，代码如下：

　　具体效果如下：

1. 列表一
2. 列表二
3. 列表三
4. 列表四

　　google reader怎么不支持这种排序呢？刚才在reader里面看自己的订阅，发现我最后面的例子，还是从1开始的，并不是从10开始，但是其他订阅就没有问题了，难道，reader还把别人的文章先自己处理一次吗？或者说是feedsky的问题？因为用的是feedsky的服务，就是为了尽可能的保证自己的feed地址稳定，要是中间先被feedsky处理一手，也不爽啊……

　　Html，网页制作利器，不，应该说做网页都已经离不开它了，你会用不？用的熟练程度如何。

　　不敢评价别人，反正我是仅仅会一点而且不熟，真要是做网页还要一边查一边做，特别是table和表单的属性，我是死活不会，怎么搞也不明白。现在对于html的标签来说，可能我最熟悉的就是div了……别人都说div+css多么多么难，可是我别的什么也不会，只会一点div的网页制作方法，要不看我的网页全部都是纯div做的布局……对于那些菜菜菜鸟来说可能算比较厉害的，但是真正明白的人来说，我才是菜菜菜鸟。一定要好好学习天天想上响应党的号召建设我们的伟大祖国，好好学习html。

　　对了他们说Html还有另外一种解释：How To Make Love。语法对不对呢？不懂鸟语，反算是一种解释了。还有SB的解释：somebody，恩还不错。

　　闲话少说，刚才在一个blog上看见一段高手用html做网页的视频，实在是太牛B了，不能不贴这里来给大家共享一下。看样子是个日本的，不知道真假，反正给人看着挺爽的，哈哈，上地址。

表现:

中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。

原理:

利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行。

问题:

IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。


以下为引用的内容： 
<!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> 
<title>固定中栏宽度, 左右两栏宽度相等同时自适应宽度</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="KEYWords" content="-,css,xhtml,effect" /> 
<meta name="DEscription" content="-" /> 
<meta name="author" content="aoao" /> 
<meta content="all" name="robots" /> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
font-family:Verdana, Arial, Helvetica, sans-serif; 
min-width:620px; 
} 
#header,#footer{ 
clear:both; 
padding:10px; 
text-align:center; }