div 拖动移动

jjklmm

浏览: 57069 次
性别:
来自: 北京

最近访客更多访客>>

jk_zero

dagf113225

zhifux868

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
web html css

JavaScript div

源代码如下：

<!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" />
<meta http-equiv="content-language" content="zh-cn" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌."/>
<script type="text/javascript">

</script>
<style type="text/css">
body,table,td,th,input,textarea,button,select{font:13px/16px Verdana,"宋体",sans-serif;}
table{border-collapse:collapse;}
p{margin:0px;}
.container{margin:8px;}
.column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
.module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
.title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
.cont{padding:3px;overflow:hidden;}
.hide .cont{display:none;}
.pageTitle{font-weight:bold;text-align:center;}
input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
.webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
.ghost{border:1px dashed red;}
.float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
</style>

</head>
<body>
<center><span class="pageTitle" onClick="with(this.nextSibling){value=this.innerHTML;style.display='block';focus()};this.style.display='none';">You can input a topic here!</span><input class="pageTitle" onBlur="with(this.previousSibling){D.title=innerHTML=this.value?this.value:'Demo';style.display='block';};this.style.display='none'" /></center>

<div class="container" id="container">
<ul class="column">
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> Coodinate</div>
    <div class="cont" id="aaa">content</div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> contentEditable</div>
    <div class="cont" onClick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> long long ago</div>
    <div class="cont">安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌.</div>
   </li>
</ul>

<ul class="column">
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> this.parentNode</div>
    <div class="cont"><button onClick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> webNote</div>
    <div class="cont"><div class="webNote" onblur="webNote.cannotEdit()" onClick="webNote.canEdit(event)">You can note something here.<br/><a href="http://www.miiceic.org.cn/">中程在线</a><br /><a href="http://www.miiceic.org.cn/">企业培训</a><br /><a href="http://www.amboedu.com/">职业教育</a><br /><a href="http://www.ciitn.com/">信息产业培训网</a></div><textarea class="webNote"></textarea></div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> Google</div>
    <div class="cont"><center><a href="http://jjklmm.iteye.com/" style="font:bold 31px/2 Arial;">http://jjklmm.iteye.com/</a></center></div>
   </li>
</ul>

<ul class="column">
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> pia~~</div>
    <div class="cont"><a href="http://www.miiceic.org.cn/">中程在线</a> <a href="http://www.miiceic.org.cn/">企业培训</a> <a href="http://www.amboedu.com/">职业教育</a> <a href="http://www.ciitn.com/">信息产业培训网</a></div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> biu~~</div>
    <div class="cont"><a href="http://www.miiceic.org.cn/">中程在线</a><br /><a href="http://www.miiceic.org.cn/">企业培训</a><br /><a href="http://www.amboedu.com/">职业教育</a><br /><a href="http://www.ciitn.com/">信息产业培训网</a></div>
   </li>
   <li class="module">
    <div class="title"><span onClick="fold()">+</span> 无话可说</div>
    <div class="cont" id="bbb"><a href="http://www.miiceic.org.cn/">中程在线</a> <a href="http://www.miiceic.org.cn/">企业培训</a> <a href="http://www.amboedu.com/">职业教育</a> <a href="http://www.ciitn.com/">信息产业培训网</a></div>
   </li>
</ul>

</div>
<div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">©2011 http://jjklmm.iteye.com/</div>
</body>
</html>

分享到：

页面访问速度优化---HTTP缓存设置 | css优化之logo

2011-09-09 10:59
浏览 887
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论