📄 17.html

📁 文件是《精通Javascript+jQuery》的书中实例

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽的清单</title>
<link href="17.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="jquery-1.2.4a.js"></script>
<script language="javascript" src="ui.base.min.js"></script>
<script language="javascript" src="ui.droppable.min.js"></script>
<script language="javascript" src="ui.draggable.min.js"></script>
<script language="javascript" src="ui.sortable.min.js"></script>
<script language="javascript" src="17.js"></script>
</head>
<body id="uidemo">
	<div id="container">
    	<div id="header" class="ui-sortable">
        	<h2>头版头条</h2>
			<dl class="sort">
				<dt>新闻首页</dt>
				<dd>2008母校清华迎来97华诞</dd>
				<dd>五十年艺韵悠长，清华大学学生艺术团历史成果展揭幕</dd>
			</dl>
		</div>
			
		<div id="content" class="ui-sortable">
			<h2>详细内容</h2>
			<dl class="sort">
				<dt>热门日志</dt>
				<dd>97圈长跑，献给清华母校97华诞</dd>
				<dd>picasaweb.google.com/isaacshun再次更新</dd>
			</dl>
		</div>
			
		<div id="sidebar" class="ui-sortable">
			<h2>滚动新闻</h2>
			<dl class="sort">
				<dt>今日热点</dt>
				<dd>校庆日安排</dd>
				<dd>五一长假</dd>
			</dl>
			<dl class="sort">
				<dt>博客</dt>
				<dd>isaac</dd>
                   <dd>fresheggs</dd>
			</dl>
			<dl class="sort">
				<dt>友情链接</dt>
				<dd>自由空间 FreeEE</dd>
				<dd>水木清华 SMTH</dd>
			</dl>
		</div>
		
		<div class="clear"></div>
	
		<div id="footer" class="ui-sortable">
			<h2>页脚项</h2>
			<dl class="sort">
				<dt>版权信息</dt>
				<dd>Copyright: Zeng Shun, EE, Tsinghua University</dd>
			</dl>
		</div>
	</div>
		
	<div id="trashcan" class="ui-sortable">
		<h2>回收站</h2>
	</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -