<!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" lang="zh-CN">
<head>
<title>图片垂直居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
</style>
</head>
<body>
<div id="content">
<div id="middle">
<div id="inner">垂直居中<br />
<img" width=100% src="http://www.111cn/images/logo.gif" _fcksavedurl="http://www.111cn/images/logo.gif" alt="网页教学网logo" title="网页教学网logo" /></div>
</div>
</div>
</body>
</html>
网站改版了怎么办?很多网站在改版的时候，非常担心用户习惯。
有的担心是合理的，有的担心是多余的。担心之前，先搞清两个问题：
首先，你有没有老用户？有多少老用户？如果网站本身就是提供给walk-up-and-use（走来即用）类型的用户的，比如某某博物馆门口的参观指导系统，它完全就是面向新用户的，根本就没有老用户。另外，有的网站本身很烂（可能是产品烂也可能是易用性烂），来看一眼的人就不会再回来，那么随便怎么改都不会有老用户习惯的问题。
其次，用户使用该网站的频繁程度，如果是一个频发事件，每天、每周、每月都会上去看那么一两次，改版确实要考虑老用户的习惯问题。比如Gmail、豆瓣、MSN、新浪等。
但也有不少网站，尤其是电子商务类网站，用户并不是每月都会上来的，而是到了有需求的时候才上来，比如当当，比如携程，比如PPG。这种网站，用户甚至记不住你的主色调，更不用说你的预订流程有哪些步骤了（能记住你的域名就不错了）。
加clear空div
.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after { height: 1px;}
使用方法：
在所有浮动层之后加上这个层
<div class="clearfix"></div>
2.把背景层加浮动，但是这个方法会影响其他的div，有时候好用。
3.加 overlow 这个也有问题，会影响div的外观。
文本超过div 自动换行代码文本自动换行IE中解决方法：
word-wrap:break-word;
word-break:break-all;
注：在要换行的内容相应的单元格或者DIV里加入，如：
<div style=word-wrap:break-word;></div>或<td style=word-wrap:break-word;></td>
文本自动换行FireFox中解决方法（脚本）：
<script type="text/javascript">
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
注：以上脚本放在</head>前面.
调用时如下写法：
同个页面单处调用：
<div id="content">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content");</script>
同个页面多处调用：
<div id="content">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content");</script>
<div id="content2">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content2");</script>
注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的
<script language="javascript">toBreakWord(60, "content");</script>
这段JS，如果不是就要输出。
//编码HTML 和 解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本，可以先过滤HTML标签，过滤掉双引号，单引号，符号&，符号<，符号
用法：
<input type="text" name="rain" id="rain" />
<input type="button" value="test" onclick=" document.getElementById('rain2').value= document.getElementById('rain').value.htmlEncode() "/>
<input type="text" name="rain2" id="rain2" />
<input type="button" value="test" onclick=" document.getElementById('rain').value= document.getElementById('rain2').value.htmlDecode() "/>
**************/
String.prototype.htmlEncode=function(){
return this.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\"/g,""").replace(/\'/g,"'");
}
String.prototype.htmlDecode=function(){
return this.replace(/\&\;/g, '\&').replace(/\>\;/g, '\>').replace(/\<\;/g, '\<').replace(/\"\;/g, '\'').replace(/\&\#39\;/g, '\'');
}