粗茶淡饭


Rome was not built in a day. 生气是拿别人的错误来惩罚自己
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Html的页面功能开发技巧集合(二)(搜集中)

Posted on 2009-06-25 15:21  茶^_^米  阅读(276)  评论(0编辑  收藏  举报

1.另外一个DIV中图片居中图片居中

 来源:http://www.cnblogs.com/evlon/archive/2007/03/22/684040.html

Code

 图片居中(二):兼容火狐

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>