1.另外一个DIV中图片居中图片居中
来源:http://www.cnblogs.com/evlon/archive/2007/03/22/684040.html
图片居中(二):兼容火狐
http://www.lanrentuku.com/js/css-685.html
<!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 type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:127px; height:98px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>
<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://iv.chinaook.com/uploadfile/200909/img/200999855574B466.jpg" ></div></li>
</div>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
二:两列布局-自适应
来源:http://www.cnblogs.com/catball/
<style>
.left { width:180px; float:left }
.right{ margin:0 0 0 180px;border:1px solid #ff0000;}
</style>
<div class='left'>撒地方十克拉的发多少</div>
<div class='right'>是大方家萨附近多少
<br/>
<br/>
<br/>
<br/>
<br/>
<br/> <br/> <br/> <br/> <br/> <br/>
</div>
简单的把right的 左边距设为left的宽度即可
2.<style type="text/css">
<!--
#left {
float:left;
width:200px;
height:100px;
background:#f00;
}
#right {
float:left;
width:200px;
height:100px;
background:#fc0;
}
-->
</style>
</head>
<body>
<div id="left">YourHomePage.com.cn</div>
<div id="right">YourHomePage.com.cn</div>
</body>
(三)style.top 与style.left
在IE中可以直接用obj.style.top=100;但在FireFox中必须加上单位,变成obj.style.top=100+'px';
style.left同理。
http://www.cnblogs.com/tonyduan/archive/2008/08/28/1278726.html
2. event pageX clientX
var xPos;
var yPos;
var evt = eventTag||window.event;
if(evt.pageX){
alert(evt.pageX);
xPos=evt.pageX-150;
yPos=evt.pageY+10;
}
else{
xPos=evt.clientX-150;
yPos=evt.clientY+10;
}
http://huangj.in/design/mouse-position-js/
3.http://dudu.cnblogs.com/archive/2005/02/17/105400.html
4.可输入的select
<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net"> souzz </option>
<option value="www.eWebSoft.com"> eWebSoft </option>
<option value="WEB开发者"> WEB开发者 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
5.字母自动换行
<div id= 'DivtxtName' style= 'white-space:normal; display:block;width:100px; word-break:break-all'>
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd
</div>