15-1.html
< html >
< head >
< title >Ajax入门 </title>
< style type ="text/css" >
<!--
body{
  font-size:13px;
  background-color:#e7f3ff;
}
form{
  padding:0px; margin:0px;
}
input{
  border-bottom:1px solid #007eff;  /* 下划线 */
  font-family:Arial, Helvetica, sans-serif;
  color:#007eff;
  background:transparent;
  border-top:none;
  border-left:none;
  border-right:none;
}
p{
  margin:0px;
  padding:2px 2px 2px 10px;
  background:url(icon.gif) no-repeat 0px 10px;  /* 加入小icon图标 */
}
-->
</style>
< script language ="javascript" >
var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject){
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }
}
//创建XMLHttpRequest对象
createXMLHttpRequest();
function callServer(){
  //获取表单中的数据
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  //如果没有填写则返回
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  //链接服务器，自动获得代号。本例没有链接服务器，只是示例
  var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  //打开链接
  xmlHttp.open("GET", url, true);
  //告诉服务器在运行完成后（可能要用五分钟或者五个小时）做什么，这里触发updatePage函数
  xmlHttp.onreadystatechange = updatePage;
  //发送请求
  xmlHttp.send(null);
}
//处理服务器响应
function updatePage(){
  if (xmlHttp.readyState == 4) {
  var response = xmlHttp.responseText;
  document.getElementById("zipCode").value = response;
  }
}
</script>
     </head>
< body >
< form >
   < p >城市: < input type ="text" name ="city" id ="city" size ="25" onChange ="callServer();" > </p>
   < p >国家: < input type ="text" name ="state" id ="state" size ="25" onChange ="callServer();" > </p>
   < p >代号: < input type ="text" name ="zipCode" id ="city" size ="5" > </p>
</form>
</body>
</html>
15-2.html
< html >
< head >
< title >能够自由拖动布局区域的网页 </title>
< style type ="text/css" >
<!--
body{
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  margin:0px; padding:0px;
  /*background-color:#ffffd5;*/
  background-color:#e6ffda;
}
.dragTable{
  font-size:12px;
  /*border:1px solid #003a82;*/
  border:1px solid #206100;
  margin-bottom:5px;
  width:100%;
  /*background-color:#cfe5ff;*/
  background-color:#c9ffaf;
}
td{
  padding:3px 2px 3px 2px;
  vertical-align:top;
}
.dragTR{
  cursor:move;
  /*color:#FFFFFF;
  background-color:#0073ff;*/
  color:#ffff00;
  background-color:#3cb500;
  height:20px;
  font-weight:bold;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
}
#parentTable{
  border-collapse:collapse;
}
-->
</style>
< script language ="javascript" defer ="defer" >
var Drag={
  dragged:false,
  ao:null,
  tdiv:null,
  dragStart:function(){
    Drag.ao=event.srcElement;
    if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
      Drag.ao=Drag.ao.offsetParent;
      Drag.ao.style.zIndex=100;
     }else
        return;
    Drag.dragged=true;
    Drag.tdiv=document.createElement("div");
    Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    Drag.ao.style.border="1px dashed red";
    Drag.tdiv.style.display="block";
    Drag.tdiv.style.position="absolute";
    Drag.tdiv.style.filter="alpha(opacity=70)";
    Drag.tdiv.style.cursor="move";
    Drag.tdiv.style.border="1px solid #000000";
    Drag.tdiv.style.width=Drag.ao.offsetWidth;
    Drag.tdiv.style.height=Drag.ao.offsetHeight;
    Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    document.body.appendChild(Drag.tdiv);
    Drag.lastX=event.clientX;
    Drag.lastY=event.clientY;
    Drag.lastLeft=Drag.tdiv.style.left;
    Drag.lastTop=Drag.tdiv.style.top;
  },
  draging:function(){//判断MOUSE的位置
    if(!Drag.dragged||Drag.ao==null)return;
    var tX=event.clientX;
    var tY=event.clientY;
    Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    for(var i=0;i<parentTable.cells.length;i++){
      var parentCell=Drag.getInfo(parentTable.cells[i]);
      if(tX>=parentCell.left&&tX < =parentCell.right&&tY >=parentCell.top&&tY<=parentCell.bottom){
        var subTables=parentTable.cells[i].getElementsByTagName("table");
        if(subTables.length==0){
          if(tX>=parentCell.left&&tX < =parentCell.right&&tY >=parentCell.top&&tY<=parentCell.bottom){
            parentTable.cells[i].appendChild(Drag.ao);
          }
          break;
        }
        for(var j=0;j<subTables.length;j++){
          var subTable=Drag.getInfo(subTables[j]);
          if(tX>=subTable.left&&tX < =subTable.right&&tY >=subTable.top&&tY<=subTable.bottom){
            parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
            break;
          }else{
            parentTable.cells[i].appendChild(Drag.ao);
          }
        }
      }
    }
  },
  dragEnd:function(){
    if(!Drag.dragged)
      return;
    Drag.dragged=false;
    Drag.mm=Drag.repos(150,15);
    Drag.ao.style.borderWidth="0px";
    //Drag.ao.style.border="1px solid #003a82";
    Drag.ao.style.border="1px solid #206100";
    Drag.tdiv.style.borderWidth="0px";
    Drag.ao.style.zIndex=1;
  },
  getInfo:function(o){//取得坐标
    var to=new Object();
    to.left=to.right=to.top=to.bottom=0;
    var twidth=o.offsetWidth;
    var theight=o.offsetHeight;
    while(o!=document.body){
      to.left+=o.offsetLeft;
      to.top+=o.offsetTop;
      o=o.offsetParent;
    }
    to.right=to.left+twidth;
    to.bottom=to.top+theight;
    return to;
  },
  repos:function(aa,ab){
    var f=Drag.tdiv.filters.alpha.opacity;
    var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    var kf=f/ab;
    return setInterval(function(){
      if(ab<1){
        clearInterval(Drag.mm);
        Drag.tdiv.removeNode(true);
        Drag.ao=null;
        return;
      }
      ab--;
      tl-=kl;
      tt-=kt;
      f-=kf;
      Drag.tdiv.style.left=parseInt(tl)+"px";
      Drag.tdiv.style.top=parseInt(tt)+"px";
      Drag.tdiv.filters.alpha.opacity=f;
    }
    ,aa/ab)
  },
  inint:function(){
    for(var i=0;i<parentTable.cells.length;i++){
      var subTables=parentTable.cells[i].getElementsByTagName("table");
      for(var j=0;j<subTables.length;j++){
        if(subTables[j].className!="dragTable")
          break;
        subTables[j].rows[0].className="dragTR";
        subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
      }
    }
    document.οnmοusemοve=Drag.draging;
    document.οnmοuseup=Drag.dragEnd;
  }
}
Drag.inint();
</script>
     </head>
< body >
< table cellspacing ="4" width ="100%" id ="parentTable" >
< tr >
   < td width ="25%" valgin ="top" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >CSS </td> </tr>
       < tr > < td >CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。 </td> < tr >
     </table>
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >AJAX </td> </tr>
       < tr > < td >Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是目前很新的一项网络应用技术。 </td> < tr >
     </table>
   </td>
   < td width ="25%" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >Javascript </td> </tr>
       < tr > < td >Javascript是一种基于对象的脚本语言，使用它可以开发Internet客户端的应用程序。Javascript在HTML页面中以语句的方式出现，并且执行相应的操作。 </td> < tr >
     </table>
   </td>
   < td width ="25%" >
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >XML </td> </tr>
       < tr > < td >XML是eXtensible Markup Language的缩写，即可扩展标记语言。它是一种可以用来创建自定义标记的语言，由万维网协会（W3C）创建，用来克服HTML的局限。 </td> < tr >
     </table>
     < table class ="dragTable" cellspacing ="0" >
       < tr > < td >网页变幻 </td> </tr>
       < tr > < td >保持页面的HTML不变，通过分别调用三个外部CSS文件，实现三个完全不同的页面效果，蓝色经典、清明上河图、交河古城。 </td> < tr >
     </table>
   </td>
</tr>
</table>
</body>
</html>

来源：《精通CSS+DIV网页样式与布局 》