前端开发叠加效果的选项卡_拖动排序效果

前端开发测试环境域名|前端开发浏览器内核|unity前端开发流程

1.叠加效果的选项卡

用背景图片做的带叠加效果的选项卡,下面有运行预览,点击有效果。

选项卡标签
<div class=”tabControl1″>
<div class=”tabControlLayer”><span>基本参数</span></div>
<div class=”tabControlLayer”><a href=”javascript:void(0);”>文章属性</a></div>
<div class=”tabControlLayer”><a href=”javascript:void(0);”>文章评论</a></div>
</div>

选项卡css

.tabControl1{display:block;height:30px;padding:20px 0 0 200px; background:url(images/tabControlBg.gif) repeat-x left bottom;}
.tabControlLayer, .tabControlLayer span, .tabControlLayer a:hover{display:block;background:url(images/tabControl.gif) no-repeat;height:30px;float:left;}
.tabControlLayer{width:160px;background-position:top right;}
.tabControlLayer a{width:160px;display:block;color:#fff;background:none;height:24px;padding-top:6px;text-align:center;}
.tabControlLayer a:hover{width:188px;background-position:-194px top;margin-left:-14px; position:absolute;z-index:1}
.tabControlLayer span{width:188px;background-position:left top;height:24px;padding-top:6px;margin-left:-14px;text-align:center;position:absolute; z-index:2}

2.右边栏竖选项卡选项卡

三拆页,内容不同哦,可以在左边填上内容,再点击就看出来了。

3.拖动排序效果

图中右上角用红圈圈住的”排序”,先点击它后,下面列表就可以拖动了。

代码片段 1

<!DOCTYPE html>
<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>添加文章</title>
<style type=”text/css”>
html,
body,
div,
ul,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
input {
font-family: “微软雅黑”, “宋体”;
font-size: 14px;
margin: 0px;
padding: 0px;
}

html,
body {
overflow: auto;
}

a,
a:hover {
text-decoration: none;
}

a {
color: #999999;
}

a:hover {
color: #ff3333;
}

ul {
list-style: outside none none;
}

.clear {
clear: both;
display: block;
font-size: 0px;
height: 0px;
line-height: 0;
}

.left {
/text-align: left;
}

.center {
text-align: center;
}

#main {
background-color: #ffffff;
border: 1px solid #6f93ff;
margin: 4px auto;
overflow: hidden;
width: 95%;
}

#top {
background-color: #5d8dbe;
}

#top .logo {
display: none;
float: left;
height: 150px;
width: 250px;
}

.pages {
display: block;
float: left;
margin-top: 2px;
}

.pages a,
.pages .nowPage {
margin-right: 4px;
padding: 3px;
}

.pages a:hover {
border: 1px dotted #bbbbbb;
padding: 2px;
}

.pages .nowPage,
.pages .nowPage:hover {
border: medium none;
color: #333333;
cursor: default;
}

.pages .nowPage {
background: url(“data:image/gif;fileName:nowPage.gif;base64,R0lGODlhCQAFAJECAO7u7v///wAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjIwQjQxRjI1OTFFMTFFNDg4QUQ4MzZEMzUxMjUwQjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjIwQjQxRjM1OTFFMTFFNDg4QUQ4MzZEMzUxMjUwQjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjBCNDFGMDU5MUUxMUU0ODhBRDgzNkQzNTEyNTBCNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjBCNDFGMTU5MUUxMUU0ODhBRDgzNkQzNTEyNTBCNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAIALAAAAAAJAAUAAAIMlAWnwIrZTHwnWGsKADs=”) no-repeat scroll center bottom transparent;
display: block;
float: left;
line-height: 14px;
padding: 3px 3px 6px;
}

.page {
display: block;
float: left;
line-height: 14px;
padding: 0px 3px;
}

.first,
.prev,
.next,
.last {
background-image: url(“data:image/gif;fileName:page.gif;base64,R0lGODlhRAAkANUiAJmZmf8zM/86Oqenp/9QUJ2dnf9xcf+amvLy8v/6+v/4+Pv7+83Nzf39/bi4uP/l5f/Dw+Hh4f/i4uLi4v/Fxf+dnf9vb7e3t/90dP+YmLm5ufPz8/Hx8f/n587OzsvLy+Pj4//IyP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MURERjdFODU1OTE1MTFFNEJFQkVCOTc5RUI0NUFBM0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MURERjdFODY1OTE1MTFFNEJFQkVCOTc5RUI0NUFBM0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRERGN0U4MzU5MTUxMUU0QkVCRUI5NzlFQjQ1QUEzRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRERGN0U4NDU5MTUxMUU0QkVCRUI5NzlFQjQ1QUEzRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAACIALAAAAABEACQAAAb/QJFwSCwaj8ikcslsOp/QqHRKrVqvgOwR4WhyjQ5EM3zMApDmYoNROCvXbSOgwGgs5/ViuqwdTgZ7SH+BQ2YDE0qGiIV9cn0bGmaNRZCSbkSWGhtokppChJhZDR5tlkajpZKOkgUednqWrQ2gjACAlpMiILe4q5YDILC4vJy2uLkRvKbCvxHMksR8AAtsvUXUqbS4dAu+Wdy0n31cy0bkqs9k0lnq4SKEye5C8bnvWQPOSYb54pfC1x/iKFkQ0N+nAh+6JUKosFaxIxwuNIlo5AKHJhalXdnIsaPHjyBDihxZJIDJIw8MNElpxMCDJi6PmAyAZGaRBAcE0FSCU6eRxwACDiRYAlRoyZMykQqhQMBmEqZOicwkQEHJ1KpDoh7d2QHDTKVFun7dKfUrhg41zaIVobVsgAQVdI41Alfu159jBVQYunWm3gRts5psOhasiBCEC+MtTCBE36+J0wZIPJcIBMp3H0+FoHlwYCEzFeRUXES03cCFgypY7PeAgs9skaasbGR2ZrcmYyadqRu21suwhQA3HHsy5ySb3UouncGnEgXNyWYVkGG1VerWBUtXbkSChSbejViQ0GT8bpLo06tfz779xiAAOw==”);
background-repeat: no-repeat;
display: block;
float: left;
height: 14px;
width: 14px;
}

.first {
background-position: 0px 0px;
}

.prev {
background-position: -16px 0px;
}

.next {
background-position: -32px 0px;
}

.last {
background-position: -48px 0px;
}

.first:hover {
background-position: -1px -17px;
}

.prev:hover {
background-position: -17px -17px;
}

.next:hover {
background-position: -33px -17px;
}

.last:hover {
background-position: -49px -17px;
}

.sets {
float: right;
}

#table {
overflow-x: hidden;
overflow-y: auto;
padding: 6px;
position: relative;
}

#table table tr {
position: static;
}

#table table tr th {
background-color: #f6f6f6;
border-bottom: 1px solid #cccccc;
color: #bbbbbb;
font-weight: 700;
}

#table table tr td {
border-bottom: 1px solid #eeeeee;
color: #666666;
}

#table table tr td a {
color: #666666;
}

#table table tr:hover {
background-color: #f2f4f9;
color: #000000;
}

#table table.cursor_move tr:hover {
cursor: move;
}

#table table.cursor_move tr *:hover {
cursor: move;
}

.edit,
.delete,
.move {
background-position: 4px center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: left;
font-weight: normal;
height: 16px;
margin-left: 4px;
padding: 3px 4px 5px 24px;
}

.edit:hover,
.delete:hover,
.move:hover {
background-position: 3px center;
border: 1px dotted #bbbbbb;
padding: 2px 3px 4px 23px;
}

.simple .enabled,
.simple .disabled,
.simple .uncensored,
.simple .edit,
.simple .delete {
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
font-weight: normal;
height: 16px;
margin-left: 0px;
padding: 4px;
width: 16px;
}

.simple .enabled,
.simple .disabled,
.simple .uncensored {
margin: 0px auto;
}

.simple .enabled:hover,
.simple .disabled:hover,
.simple .uncensored:hover,
.simple .edit:hover,
.simple .delete:hover {
border: 1px dotted #bbbbbb;
padding: 3px;
}

.enabled {
background-image: url(“data:image/gif;fileName:enabled.gif;base64,R0lGODlhEAAQAPfPAIzUC3XZAnbaAnrJFketAozgAXvIF4G+N4HeAFXCBFfBBZfLMYO6VHO2S2W+CkO1AFvPAF3FC+Lq9lnGCljEAVnBAljCAFatEW64J1CqEU28AobhBIbDXGHBAILhAIPAX0G+AGq2M3fSC1jHFnXIBWfPCXXLAF/EEmbLCnPSBHHUAWPJCH3cBFqlLH/dAKPTTpTbK/Hp72vQD8niyJ3JYU62D33EKVm2Eke1Bk65CH/hANnoy2bPAXzYBInMIozWGVmuGbPabIa9TUuvDZC2S4fdDpfmCmi8N3PXBtrxt6PWZvL492vXAGvQBrfcfHS4MZPhHHa3SoLMDWbQD7naq5HgE1/PAEG3AJbiKnjXAazVdOTo3LPbhpTHW1W+CFK+AFK2AVvDAdDjt8HggXa3QJDHa5bkAKnPdJLhDVXNAGLLAHDHAIvgAFvHAVDCAEu5BdHkuaDMW8/qtXPZAn7MBJ/Sc3jMCW/TA5nPZtPmxXe4O1+qMmnMAVy9E8/mm83lqpTTJmSwGmrRCoXaBWfSBa/TfvTz90OxANDhwJDhCIa/QG6zQMfolWOrLKjVUWO6R6rUWZzJTMbhjpnkGHHRCOz07rfZjenw1FLHFJTKMYTWBWbXAuj64kLAAGPJA4G8OFfMAGzRAXW+On7PFIfXFna+H2jEBWTIH53EXbjkvW3SCWTHAmLOBfH083vVEVa+EYfAHfX9+n7MEvDx8F2/AL7jmbXRjWHMIK7VjWHUA6TIWVDCBHPIAGvOEH68RYbUEk6rA1DBAH7aC3vGHFHBAIzQOLbdamzTDKvYUs/fv1jJFIbTD4fMGYDdAdPkrgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MURBODFENTI1ODdDMTFFNEI2NzNDQzhBQzVBMjFENDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MURBODFENTM1ODdDMTFFNEI2NzNDQzhBQzVBMjFENDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxREE4MUQ1MDU4N0MxMUU0QjY3M0NDOEFDNUEyMUQ0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxREE4MUQ1MTU4N0MxMUU0QjY3M0NDOEFDNUEyMUQ0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAM8ALAAAAAAQABAAAAj/AJ8JFPinEA1UZ2oNXPjMWSQfo+ys6XCjARWGkjKhaUapFysIoLxcwDPQDyAoLOaokoFiRZgvxIDhEvhiEilXAVSE4uHgUxcgNRo9YwSjyiBhAu4I8kQm2SUOOAjUCYKliIcsSJjwOYBIQqojbx5EcWSkwLJiw0zYgBNjxqMcGkDsQWYGgBZOtojIqSRGTzA3uzq1gJTol5NYrbbMyiPKAoUEmK4sGvNjgxRLSwzt8DUhTYU+yg6VebaAjY4BXJIoWqWmjYJTrzIINAYAQQ9ZBkjwMnXi1oghHwbG0eRCxDFCTUpMiQAmBEMlzOik2JTLCq1ADBgO1AWrFIYnQhgGAQQAOw==”);
}

.disabled {
background-image: url(“data:image/gif;fileName:disabled.gif;base64,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”);
}

.uncensored {
background-image: url(“data:image/gif;fileName:uncensored.gif;base64,R0lGODlhEAAQANUwAP///7i4uLa2tre3t6+vr7W1tbCwsLKysrS0tLGxsbq6urm5udvb27Ozs66urq2trby8vMDAwMnJydfX176+vtDQ0L+/v93d3b29veLi4sbGxsrKysHBwdbW1ru7u9LS0tXV1aysrN/f397e3tzc3MjIyNPT08LCwsfHx+Hh4aurq83NzcTExM/Pz8XFxeDg4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTA0QTNERjY1ODdFMTFFNEFCNzdFODRGMkQzNDU0NUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTA0QTNERjc1ODdFMTFFNEFCNzdFODRGMkQzNDU0NUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDRBM0RGNDU4N0UxMUU0QUI3N0U4NEYyRDM0NTQ1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MDRBM0RGNTU4N0UxMUU0QUI3N0U4NEYyRDM0NTQ1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAADAALAAAAAAQABAAAAa9QJhQmPlIUKvLcAnLsDyDwiFBUIyYFwxGgGg0DgfDozJ8WSjcACdSMBgIDpLQZRmoAXiAgmBwKGApEVsBeBAUeFQJDhMgFAF2AAwDEHgIbyElFQqPAgEIlAALB3wPFi2bAwJReAEGVAcPESYBCwO2A5FTBw0IKhIiC7UBnRoRDQkJXCEdMBoCzwIKkQ0GAgsOC0IXC51cDAUFAa0OzEITHgVRCAUKBQQEZEsMJ1JTBA8QIExDExIbGxI+MAkCADs=”);
}

.edit {
background-image: url(“data:image/gif;fileName:edit.gif;base64,R0lGODlhEAAQAIcAAFlCF+/v78LCwufLdtikV8SXSOjZp8zMzP///6mIQtG2j/32wenp6a1qJfXfWt/f3+e/ite5dYRmLcm9r/Djuff399iZU+e9du7i1P/y4PHp4O7UfMunbtyXSOTJVMmEQO7YsMyVWPXr3715GfnHk/zgw/ffYtuwhNfCpPPkruKhUL2JS+XVsfXl1NCcRfbTrdKeZe3KbP/z5ceNR+7WgP33x/DSs+XUrteiYtW1eYxjKfLlvN2cUNShat2ZSvbu5Pbda/fmte3QdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtAAAAAAAAQAFAAAAIAAAAP3caJIEFZIEHgCLMxMZnBMdSBMc3JHpABMdcAAACBMc7JJCAheVuBMaxJIEQJjWAJJCx5JCjwAAAP3cAACAAQAAAgAAOBMaZEIAXAAAAAoACJJAXAAAAAAAAJIQZhgAABMdcAAAaAAAAF8AblwAMWoAaIsBeBMaxAAAAhsBkAAAADoAREIAXCAAVXAAT24AZRsCSHUAb2MAciJcUGUAdnMAcm8AaV8AbhMbLIsAAJICAgAAA4sHGIsAACJW0BMbBCJcWBMdSJHpAJICCP///5ICApIBe5IBuxL+GAAADAAAAAAAABMbWAAAAJIAmBsBiBMcJJIAIYsLCJIAPRsBkBsBkBsBlCJXSIsBeBMcJCJXUAAAAIAYnAAAAIsBeBMeABsCSBMb0AAAEQABABmG0BMeAAAACkZJRxBhOeYAEEJZAO/v7+fCwqTYdkiXxMyn2f//zEKIqf2PtunpwSVqrd9a37/n33W518ktZuPwryH5BAMAAPsALAAAAAAQABAAAAiqAPc9OECwYMEH+xImPFABgcOHCCoIQKjwQMQKGAMEYIDgBoETLkDss4ix5MYUF2zIeBFi5MWSFQzQCALhRYkeLiFWoLBhAZAYOGAshIhgh5AaDhxsUDFh6MMbA5Aq9dHigFMELCIsMGFCSAcNCKzmRJFDgQcHQniIwCjWIoIEGSyMKDCjRcm2DiWQIPGhAQaYeBEA0LGCA1iIgYkSbdtQ8cMKYgcanEwQYUAAOw==”);
}

.delete {
background-image: url(“data:image/gif;fileName:delete.gif;base64,R0lGODlhEAAQAIcAAOQkJviusPlkZ/ZJS/3i4/91ePrZ2uszNfZZW/rNzv99gO9FSPjFxf9vcvhdYPdUVu48Pv/u7uYsLfhhY/eMjvzd3v9rbf97ff9TVv9xc/BHSv7m5v9aXfy3uOkzNv9mZu5BQ/3W1vRMT/+GifprbfZUV+ouMP+BheYpKf/MzP9VWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJIEFZIEHhMcfAIAJBMaaAAAAhMZQP3gAJEQABMZEAAAABMZ4JHpAJIEQJjWAJJAKZJAHAACCBMdIBMc+JIEFZIEHhMczAIAJBMauAAAAhMZkP3gAJEQABMZYAAAABMaMJHpAJIEQJjWAJJAKZJAHAACCBMdcBMdSBMZ3IsAAJICAgAAUYsVuIsAAIvsEBMZtAAAGBMb+JHpAJICCP///5ICApIBe5IBuxMcvAACgAAAAJIBe5IBuxsJ0AAAtAARlAAAAQAFAAAAOQAAAP3cbJIEFZIEHgCLMxMZnBMdSBMc3JHpABMdcAAACBMc7JJCAheaCBMaxJIEQJjWAJJCx5JCjwAAAP3cAACAAQAAAgAAOhMaZEIAXAAAAAoACJJAXAACGgAAAJIBewAAABMdcAAAbBgAAF8AblwAMW4AbP3cABMaxAAAAosBeAAAYToAREIAXCAAVXAAT24AZVMALXUAb2MAchsO0GUAdnMAcm8AaV8AbhMbLIsAAJICAgAAA4sHGIsAACJW0BMbBFwAbhMdSJHpAJICCP///5ICApIBe5IBux7GIAAADAAAAAAAABMbWAAAAJIAmBsBiBMcJJIAIYsLCJIAPRsBkBsBkBsBlBsJyIsBeBMcJBsJ0AAAAIAYnAAAAIsBeBMeAAAE3BMb0AAAEQABABmG0BMeAAAACkoGRY4ukBC4MB4AAwAAAB9cAMAIAAAABwABAAABAAABAABAAABAAAAAAAAAAAAAAAAHAATcEIXIACH5BAMAAJYALAAAAAAQABAAAAidAC0JHEiwYMENBgl0CFGwQAGEAwlMEECBwMACChRkgEjAAYkLDgIMzHBhxAUSGzp+dKChIIkCJzJMmPDSwQKDlgSQyKigAIKbOC0huMCBQwagOAkgKKBCRYMFFZIiEJChqoUHEKISVEoVAQgIIj6IOGAgIoIJDUqAEOhhwYcBJspaClFiglqCEiDAZTAwgYi1BQGY4EswQVDCQRMHBAA7”);
}

.move {
background-image: url(“data:image/gif;fileName:move.gif;base64,R0lGODlhEAAQAJECAAAAAJmZmQAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0EwMDQxOEU1OTIyMTFFNEE2MDhBRjQwQjhFQUYzQzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0EwMDQxOEY1OTIyMTFFNEE2MDhBRjQwQjhFQUYzQzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QTAwNDE4QzU5MjIxMUU0QTYwOEFGNDBCOEVBRjNDNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3QTAwNDE4RDU5MjIxMUU0QTYwOEFGNDBCOEVBRjNDNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAIALAAAAAAQABAAAAIylC+Au+DMnIQrgIApulodbnghmASfJ6XqlFyY9VpuaNJfdtQlokc9pdKcZsLST3MUFAAAOw==”);
}

.indent5 {
text-indent: 5px;
}

#table tr td a:hover {
color: #333333;
text-decoration: underline;
}

#table table tr.mdash {
background-color: #f2f4f9;
opacity: 0.6;
position: absolute;
}

#table table tr.dash,
.move_line_left,
.move_line_right {
background: url(“data/attachment/album/201411/05/162642nax70j0yxj1rioz1.gif”) repeat-x scroll 0% 0% transparent;
height: 30px;
}

#table table tr.dash {
background-position: 0px -30px;
}

.move_line_left {
background-position: 0px 0px;
float: left;
width: 15px;
}

.move_line_right {
background-position: -15px 0px;
float: right;
width: 15px;
}

#main {
border: none;
width: auto;
margin: 0;
}

.tabControl1 {
display: block;
height: 30px;
padding: 20px 0 0 200px;
background: url(“data:image/gif;fileName:tabControlBg.gif;base64,R0lGODlhAQACAIAAAIGmzGl9kSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkQ0QzYxOTk1OTgyMTFFNEE4NjVFMjBEMDEwQjZEMzIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ0QzYxOUE1OTgyMTFFNEE4NjVFMjBEMDEwQjZEMzIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRDRDNjE5NzU5ODIxMUU0QTg2NUUyMEQwMTBCNkQzMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRDRDNjE5ODU5ODIxMUU0QTg2NUUyMEQwMTBCNkQzMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAABAAIAAAICRAoAOw==”) repeat-x left bottom;
}

.tabControlLayer,
.tabControlLayer span,
.tabControlLayer a:hover {
display: block;
background: url(“data:image/gif;fileName:tabControl.gif;base64,R0lGODlhJgIeAPdIAPr7/eTq8KK0xe70+n2Uq2JygnmexZSrxF6Dq3WEl3GAk2l6jGKGrfr8/qSuuOLn7mWRvnKYv3Wex22Wv4CmzGGPvnWawHyKm32OoNPc5IGWrKu2xGV8k2CIsWqIqIWgu2aZzGSSwN3k7Oju9F5seXqgxnGWvOnw97nDzo6dsHqhyOzy9/f6/Zajsn2Ztn2ewISYrfz9/YOeuvP4+1+JtW2Yw9zg5X6ixmKEqIWjwoedtV2LvF1qd3yiyfr7/qexvI2nw3mcwJ6tvl6LuF2HsV2Luv3+/nGZwlyMvYGZsWR1iMnS2XyhyGqMr3GaxWKFqoCZtYKnzYWmyKm4xmBufHidw83V3m5+k2CEqG+TuV6Nvoqiu2GEqoWlxX6jyn+ky36ky2KDpn6jy+zy+ICly+/0+erx9/L2+uvx+O3z+Gh8kevx9/T3+/H1+oWpzu7z+fH2+vP3++3y+PD1+evy+ICky+rw9/39/u70+erx+PD1+vP3+u7z+O3z+fD0+fr8/fj6/PT4+36OoH6OofH1+fP2+vj6/evy9+zx+PL2+36kyu/1+ezz+O3y+erw+PD0+u70+PX5+/b5+/L3+vb5/PP2++/z+evw9/T3+vb4+/X5/Pv8/fz9/vj7/PL1+vH2+fX4++zx9/b4/PL3++zy+fX4/Ozz+V2MvWKDp1+Ovvj7/V2Mu+/0+GKEp/T4+mKDqFyMvJmuxH2jymiTvvD2+oCgwZ2wxIilwury9+/z+F2Nvu30+fH2+1+KtmeCnery+O7y+HaCjX6jyWiFo+vw+Gh7j/L2+WR4i5+pt+zw9Onx94OozYKUp4SozfH0+oymv+7y+fD0+GGHr2ODpoGmzLK7xmGCpvL1+ae5zKq8zPX4+mWJrneLonefx+7×83+jymWHq6+5xHGEmHaJn3uNoff5+3ScxXyNoIyoxXyQpGCBpYGlyvH0+YugtoOkx3uewl2Lu3+gw4inx8vV4IqpyPDy9Pn6/c3U2663wniew3uewV+BplyJuJShsIiivIyguSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkJGMzFCQkM1OTg4MTFFNEIzMkVCMTk1M0NGQjdDNTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkJGMzFCQkQ1OTg4MTFFNEIzMkVCMTk1M0NGQjdDNTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQkYzMUJCQTU5ODgxMUU0QjMyRUIxOTUzQ0ZCN0M1MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQkYzMUJCQjU5ODgxMUU0QjMyRUIxOTUzQ0ZCN0M1MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5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”) no-repeat;
height: 30px;
float: left;
}

.tabControlLayer {
width: 160px;
background-position: top right;
}

.tabControlLayer a {
width: 160px;
display: block;
color: #fff;
background: none;
height: 24px;
padding-top: 6px;
text-align: center;
}

.tabControlLayer a:hover {
width: 188px;
background-position: -194px top;
margin-left: -14px;
position: absolute;
z-index: 1
}

.tabControlLayer span {
width: 188px;
background-position: left top;
height: 24px;
padding-top: 6px;
margin-left: -14px;
text-align: center;
position: absolute;
z-index: 2
}

.tabControl2 {
height: 8px;
background-color: #E9F0F7;
border-bottom: solid 1px #ccc;
}

#bottom {
border-top: solid 1px #ccc;
height: 4px;
background-color: #E9F0F7;
}

#content {
position: relative;
width: 1000px;
margin: 0 auto;
}

#content .leftBox {
width: 764px;
padding: 12px 14px;
float: left;
border-right: solid 1px #ccc;
}

#content .title {
display: block;
width: 70px;
float: left;
text-align: right;
padding: 8px 0;
height: 16px;
line-height: 16px;
}

#content .content {
padding: 2px;
display: block;
float: left;
}

#content .content input[type=”text”] {
border: solid 1px #ccc;
height: 22px;
line-height: 16px;
padding: 2px 4px;
color: #666;
}

#title,
#keyworks {
width: 680px;
}

#source,
#author {
width: 180px;
}

#content .content .selector {
padding: 5px 5px 5px 20px;
display: block;
float: left;
color: #333;
font-weight: bold;
}

#content .content .selector {
background: url(“data:image/gif;fileName:add.gif;base64,R0lGODlhEAAQAOYAADyFNLPZpIm5eNfu0m60WF6bVZrBlv///7vVuXu5Y4TNeMjdw5zYkYW2cOfw5UiOQWeqUpfMiZK+fqrUm3y7ZW/AYqXIn73itdnp0U+YQIDMdLjUrnWrZpbMhGaiWtzx2IXJe3O2Wuvz6Hi8bYu6dbzktaTbmpW/go3Mg0GMNc3gx6XPlYK0bVKVTLrcrnC9XmOfVOLt4ZbVimSqVLTbp67fpXnFau/27MTov8vmwrXdq3O1Y3y4aoy9emmrWkOLOna7X5HEf5bHhIzWhIzFe2CdV8TcueDy3Nbv1onPfIy1c1adRHOtawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAAcALAAAAAAQABAAAAezgAeCg4SFhTdGJw0sAhsihgcYEis5AzkuPBwqhRgkLkclJiY1OD0eC4M3EjQfDB0oMjJDOjweDoJGQgMMMiCCCjY2OksWgic6NSggI4I+QEAyQUWCLBe9hgQUEw/UNEka2No/ggIRETYVM4IE7B09LYIbEDoUL0DrBCEBKQaCIhw8aDxjly+AjwcxBqmAsYNGBwoUOhgEgKDQAhgZiKxYISDFg4qGHFgo8OBHCwMJIakkFAgAOw==”) no-repeat 1px center;
}

#content .content .search,
#content .content .upload {
padding: 5px 5px 5px 20px;
display: block;
color: #333;
font-weight: bold;
}

#content .content .search {
background: url(“data:image/gif;fileName:search.gif;base64,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”) no-repeat 1px center;
padding-left: 24px;
float: none;
width: 30px;
}

#content .content .upload {
background: url(“data:image/gif;fileName:rightMenuBg.gif;base64,R0lGODlhFgAZANUrAP///0yeT/7+/mOoZpnBmk+fUtHd0Yi4iYm5i1ukXdLe02WpZ1ijW9ji2Nfh1/T19dDc0YS3h/n5+d/l35K9lYe4iWysbtbg1tLf08zazWKoZfj4+Nfg16fHqHCuceHm4aDEof39/bnRurLMs83bzmaqaWCnY5O+lbvRvPv7+7nQuv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjgyNUQyOEE1QTRDMTFFNDlGRUNEQ0I0MTM2Q0ZCNDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjgyNUQyOEI1QTRDMTFFNDlGRUNEQ0I0MTM2Q0ZCNDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2ODI1RDI4ODVBNEMxMUU0OUZFQ0RDQjQxMzZDRkI0NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2ODI1RDI4OTVBNEMxMUU0OUZFQ0RDQjQxMzZDRkI0NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAACsALAAAAAAWABkAAAbGwBVASBQOVysB0ghQHoeA5rPoXAqOxKh12eQWl8mkFjkmP7tRlAopUHKj06bAUChgwlYoeCiYJAIBDB9fUVduSxIegIAWD2SPRk4hCIuLEYd8WlodlZUgYF+gApWgcF8kARRIpCsnARljXSkmAReri0gOARobTEgEAQdOrCsVAQRGRIAcR1VLDYBsypUiWCOdhJ0BWNqaSAva4QEDsQIQA+KVJQpwcaGhV3toWXlmbs5n9qBfTqal/2IigbkSR8o+SHzeCAgCADs=”) no-repeat 1px center;
padding-left: 24px;
float: none;
width: 84px;
}

#content .content .selector:hover {
border: dotted 1px #ccc;
padding: 4px 4px 4px 19px;
background-position: left center;
color: #111;
}

#content .content .upload:hover,
#content .content .search:hover {
border: dotted 1px #ccc;
padding: 4px 4px 4px 23px;
background-position: left center;
color: #111;
}

#content .content .selected {
padding: 5px;
display: block;
float: left;
color: #666;
}

#content .content .selected b {
color: #f00;
}

#content .leftBox .content .tattach {
display: block;
border: solid 1px #ccc;
width: 680px;
padding: 8px 4px;
}

#content .leftBox .content .tattach li {
float: left;
margin: 0 4px;
}

#content .content .tattach .zip {
display: block;
background: url(“data:image/jpeg;fileName:zip.jpg;base64,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”) no-repeat top center;
width: 98px;
padding-top: 100px;
text-align: center;
}

#content .rightBox {
width: 194px;
float: left;
}

#content .rightBox .uploadBox {
border: solid 1px #ccc;
border-left: none;
margin-top: 14px;
padding: 4px 4px 14px 14px;
}

#content .rightBox .title {
float: none;
}

#content .content .tattach {
border: solid 1px #ccc;
display: block;
}

#content .content .tattach .pic {
display: block;
background: url(“data:image/gif;fileName:picture.gif;base64,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”) no-repeat top center;
width: 98px;
padding-top: 100px;
text-align: center;
margin: 14px;
}

.con {
margin-top: 6px;
}

#table {
padding: 6px 0 14px;
}

#description {
width: 684px;
max-width: 684px;
min-width: 684px;
height: 180px;
max-height: 600px;
min-height: 180px;
}

#content .content .searchBox {
border: solid 1px #ccc;
display: block;
width: 300px;
height: 160px
}

#content .content .searchBox ul li {
padding: 3px 12px;
}

#content .content .searchBox ul li:hover {
background-color: #3399FD;
color: #fff;
}

.writeTime b {
font-weight: normal;
}

.writeTime .oldTime,
.writeTime .newTime {
display: block;
padding: 5px 2px;
}

.rightBox .rightMenu li {
padding: 8px 24px;
}

.rightBox .rightMenu li:hover {
background-color: #3399FD;
color: #fff;
cursor: pointer;
}

.rightBox .rightMenu li.current {
background: url(“data:image/gif;fileName:upload.gif;base64,R0lGODlhDwAjANUAANLf7P///+Hh4ePj49Le68zMzczNztLe6szOz8zMzOjo6M/X3tHd6NDZ4s/W3dHb5M7T2OLi4s7S19DX3/Hx8ebm5u3t7dHd6c3Q0s3P0dHc5/T09NDY4Nzc3O7u7s3P0vf398/V3M/U2s3Q09Da5NHb5eTk5O/v7+np6eXl5fr6+ufn5/39/c7R1ezs7M3Oz9Lf6/v7+/n5+d/f387S1tDa4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REZFOERBNUI1QTY2MTFFNDk4MjJBOUE0MkVFOEE5QUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REZFOERBNUM1QTY2MTFFNDk4MjJBOUE0MkVFOEE5QUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERkU4REE1OTVBNjYxMUU0OTgyMkE5QTQyRUU4QTlBRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERkU4REE1QTVBNjYxMUU0OTgyMkE5QTQyRUU4QTlBRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAAALAAAAAAPACMAAAaZwAlgSCwWCw+jcmhBMJbGwApDgBIDgYHEOsQGBA6uV5VoWL0BikEDRQdQmcPSHUi15vSISEkPsGYcUX0bBSVFfVguLxdXiAEVIzBdjgEREJOUAgsAlFhqB50xHWadAiGYfSY0jX0KcaxuJ2uHdDIJNYJuYHxuWnheCh9VvFgeTm1YIAkkZ1iaYlmXYhVUXABNjNZI1kNC3ABBADs=”) no-repeat left center #d2dfec;
color: #fff;
padding-left: 25px;
margin-left: -1px;
}

.rightBox .rightMenu li.current:hover {
background-color: #d2dfec;
color: #fff;
}

#sub {
width: 707px;
padding-left: 85px;
border-right: solid 1px #ccc;
}
</style>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script type=”text/javascript”>
$(function () {
// 选项卡按钮控制器————————————
$(“.tabControlLayer”).find(“a”).click(function () {
$(“#content .content” + ($(this).parent().index() + 1)).show().siblings(“:not(#sub)”).hide();
var text = $(this).text();
var span = $(this).parent().siblings().find(“span”);
span.replaceWith($(this).clone(true).text(span.text()));
$(this).replaceWith(“<span>” + text + “</span>”);
});
// ————————————————–
// 选项卡2 右边框竖式———————————-
$(“.rightMenu li”).click(function () {
if (!$(this).hasClass(“current”)) {
$(this).addClass(“current”).siblings(“.current”).removeClass(“current”);
$(“.leftBox .cbox”).eq($(this).index()).show().siblings(“.cbox”).hide();
}
});
// ————————————————–
//数据例表 ——————————————-
$(“#table table tr th :checkbox”).click(function () {
$(“#table table tr td :checkbox”).attr(“checked”, $(this).is(“:checked”));
});
// ————————————————–
// 拖动效果 ————————————–
var range = { x: 0, y: 0 };//鼠标元素偏移量
var lastPos = { x: 0, y: 0 }; //拖拽对象的四个坐标
var tarPos = { x: 0, y: 0, x1: 0, y1: 0, x2: 0, y2: 0 }; //目标元素对象的坐标初始化
var theDiv = null, move = false;//拖拽对象 拖拽状态
var theDivId = 0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线象
var main = $(“#table table tr:not(:first)”);
$(“.move”).click(function () {
var value = Number($(this).attr(“value”));
if (value) {
$(this).removeAttr(“style”);
$(“#table table”).removeClass(“cursor_move”);
$(main).unbind(“mousedown”);
$(document).unbind(“mousemove, mouseup”);
} else {
$(this).css({ border: “solid 1px #bbb”, padding: “2px 3px 4px 23px”, “background-position”: “3px center”, “background-color”: “#e9edf6” });
$(“#table table”).addClass(“cursor_move”);
main.bind(“mousedown”, function (event) {
//拖拽对象
theDiv = $(this);
//鼠标元素相对偏移量
//range.x = event.pageX – theDiv.offset().left;
range.y = event.pageY – theDiv.offset().top;
theDivId = theDiv.index();
theDivHeight = theDiv.height();
theDivHalf = theDivHeight / 2;
move = true;
theDiv.find(“td”).each(function (index) {
$(this).width($(this).parent().siblings(“:first”).find(“th”).eq(index).width());
});
theDiv.attr(“class”, “mdash”);
// 创建新元素 插入拖拽元素之前的位置
$(‘<tr class=”dash”><td colspan=”‘ + $(this).find(“td”).length + ‘”><div class=”move_line_left”></div><div class=”move_line_right”></div></td></tr>’).insertAfter(theDiv);
});
$(document).bind(“mousemove”, function (event) {
if (!move) return false;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//lastPos.x = event.pageX – range.x;
lastPos.y = event.pageY – range.y;
// 拖拽元素随鼠标移动
theDiv.css({ left: 6 + ‘px’, top: lastPos.y – theDiv.siblings(“tr:first”).offset().top – 6 + ‘px’ });
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = main.not(theDiv); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标,
tempDiv = $(“.dash”); //获得临时 虚线框的对象
$main.each(function () {
tarDiv = $(this);
//tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.y1 = tarPos.y + tarDiv.height() / 2;
tarPos.y2 = tarPos.y + tarDiv.height();
if (lastPos.y >= tarPos.y && lastPos.y <= tarPos.y1) {
tempDiv.insertBefore(tarDiv);
}
if (lastPos.y >= tarPos.y1 && lastPos.y <= tarPos.y2) {
tempDiv.insertAfter(tarDiv);
}
});
}).bind(“mouseup”, function (event) {
if (!move) return false;
theDiv.insertBefore($(‘.dash’)); // 拖拽元素插入到 虚线div的位置上
theDiv.removeAttr(“class”).removeAttr(“style”); //恢复对象的初始样式
theDiv.find(“td”).removeAttr(“style”)
$(‘.dash’).remove(); // 删除新建的虚线div
move = false;
$(“#table table tr:not(:first)”).each(function (index) {
$(this).find(“td”).find(“input[type=hidden].sequence”).val(index + 1);
$(this).find(“td”).first().text(index + 1);
})
});
}
$(this).attr(“value”, value ^ 1);
})
// ———————————————-
});
</script>
</head>

<body>
<div id=”main”>
<div id=”top”>
<div class=”logo”></div>
<div class=”tabControl1″>
<div class=”tabControlLayer”>
<span>基本参数</span>
</div>
<div class=”tabControlLayer”>
<a href=”javascript:void(0);”>文章属性</a>
</div>
<div class=”tabControlLayer”>
<a href=”javascript:void(0);”>文章评论</a>
</div>
</div>
<div class=”tabControl2″></div>
</div>
<div id=”content”>
<form action=”#”>
<div class=”content1″>
<div class=”leftBox”>
<div>
<span class=”title”>文章标题:</span>
<span class=”content”>
<input type=”text” id=”title” name=”title” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>文章来源:</span>
<span class=”content”>
<input type=”text” id=”source” name=”source” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>发布人:</span>
<span class=”content”>
<input type=”text” id=”author” name=”author” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>文章内容:</span>
<span class=”content”>
<input type=”hidden” name=”content” value=””>
<img src=”data/attachment/album/201411/05/162350aey56qa9en2eqqsr.jpg” width=”690″ height=”218″>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>选择栏目:</span>
<span class=”content”>
<a class=”selector” href=”javascript:void(0)”>选择一个或多个栏目</a>
<span class=”selected”>已选择
<b>0</b> 个栏目</span>
<input type=”hidden” name=”selected” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>附件:</span>
<span class=”content”>
<a class=”upload” href=”javascript:void(0)”>上传一个附件</a>
<span class=”tattach”>
<ul>
<li>
<a href=”javascript:void(0)” class=”zip”>file.zip</a>
</li>
<li>
<a href=”javascript:void(0)” class=”zip”>file1.zip</a>
</li>
</ul>
<span class=”clear”></span>
</span>
<input type=”hidden” name=”file” value=””>
</span>
<span class=”clear”></span>
</div>
</div>
<div class=”rightBox”>
<div class=”uploadBox”>
<span class=”title”>文章图片:</span>
<span class=”content”>
<a class=”upload” href=”javascript:void(0)”>上传一个图片</a>
<span class=”tattach”>
<ul>
<li>
<a href=”javascript:void(0)” class=”pic”>pic.jpg</a>
</li>
<li>
<a href=”javascript:void(0)” class=”pic”>pic1.jpg</a>
</li>
</ul>
<span class=”clear”></span>
</span>
<input type=”hidden” name=”file” value=””>
</span>
<span class=”clear”></span>
</div>
</div>
<span class=”clear”></span>
</div>
<div class=”content2″ style=”display:none;”>
<div class=”leftBox”>
<div class=”cbox”>
<div>
<span class=”title”>关键词:</span>
<span class=”content”>
<input type=”text” id=”keyworks” name=”keyworks” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>简介:</span>
<span class=”content”>
<textarea name=”description” id=”description”></textarea>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>关联文章:</span>
<span class=”content”>
<a class=”search” href=”javascript:void(0)”>搜索</a>
<span class=”searchBox”>
<ul>
<li>文章一</li>
<li>文章二</li>
<li>文章三</li>
</ul>
</span>
<input type=”hidden” name=”correlate” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>时间:</span>
<span class=”content”>
<span class=”writeTime”>
<b class=”oldTime”>创建时间 2014-10-22 10:22:22</b>
<b class=”newTime”>最后修改 2014-10-22 10:22:22</b>
<b>发布时间</b>
<input type=”text” name=”time” value=”2014-10-22 10:22:22″>
</span>
</span>
<span class=”clear”></span>
</div>
</div>
<div class=”cbox” style=”display:none;”>
<div>
<span class=”title”>关键词:</span>
<span class=”content”>
<input type=”text” id=”keyworks” name=”keyworks” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>简介:</span>
<span class=”content”>
<textarea name=”description” id=”description”></textarea>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>关联文章:</span>
<span class=”content”>
<a class=”search” href=”javascript:void(0)”>搜索</a>
<span class=”searchBox”>
<ul>
<li>文章一</li>
<li>文章二</li>
<li>文章三</li>
</ul>
</span>
<input type=”hidden” name=”correlate” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>时间:</span>
<span class=”content”>
<span class=”writeTime”>
<b class=”oldTime”>创建时间 2014-10-22 10:22:22</b>
<b class=”newTime”>最后修改 2014-10-22 10:22:22</b>
<b>发布时间</b>
<input type=”text” name=”time” value=”2014-10-22 10:22:22″>
</span>
</span>
<span class=”clear”></span>
</div>
</div>
<div class=”cbox” style=”display:none;”>
<div>
<span class=”title”>关键词:</span>
<span class=”content”>
<input type=”text” id=”keyworks” name=”keyworks” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>简介:</span>
<span class=”content”>
<textarea name=”description” id=”description”></textarea>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>关联文章:</span>
<span class=”content”>
<a class=”search” href=”javascript:void(0)”>搜索</a>
<span class=”searchBox”>
<ul>
<li>文章一</li>
<li>文章二</li>
<li>文章三</li>
</ul>
</span>
<input type=”hidden” name=”correlate” value=””>
</span>
<span class=”clear”></span>
</div>
<div>
<span class=”title”>时间:</span>
<span class=”content”>
<span class=”writeTime”>
<b class=”oldTime”>创建时间 2014-10-22 10:22:22</b>
<b class=”newTime”>最后修改 2014-10-22 10:22:22</b>
<b>发布时间</b>
<input type=”text” name=”time” value=”2014-10-22 10:22:22″>
</span>
</span>
<span class=”clear”></span>
</div>
</div>
</div>
<div class=”rightBox”>
<ul class=”rightMenu”>
<li class=”current”>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
</div>
<span class=”clear”></span>
</div>
<div class=”content3″ style=”display:none;”>
<div class=”con”>
<div id=”sets_bar”>
<span class=”pages”>
<a href=”#” class=”first”></a>
<a href=”#” class=”prev”></a>
<a href=”#” class=”page”>1</a>
<a href=”#” class=”page”>2</a>
<a href=”#” class=”page”>3</a>
<a href=”#” class=”page”>4</a>
<span class=”nowPage”>5</span>
<a href=”#” class=”page”>6</a>
<a href=”#” class=”page”>7</a>
<a href=”#” class=”page”>8</a>
<a href=”#” class=”page”>9</a>
<a href=”#” class=”next”></a>
<a href=”#” class=”last”></a>
<span class=”clear”></span>
</span>
<span class=”sets”>
<b class=”move” title=”排序” value=”0″>排序</b>
<b class=”delete” title=”删除”>删除</b>
<span class=”clear”></span>
</span>
<div class=”clear”></div>
</div>
<div id=”table”>
<table width=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<th width=”50″ height=”30″ class=”center”>ID</th>
<th width=”28″ class=”left”>
<input type=”checkbox” value=”0″>
</th>
<th class=”left”>内容</th>
<th class=”left”>发布者</th>
<th width=”140″ class=”left”>发布时间</th>
<th width=”60″ class=”center”>状态</th>
<th width=”50″ class=”left indent5″>操作</th>
</tr>
<tr>
<td height=”30″ class=”center”>1</td>
<td class=”left”>
<input type=”checkbox” value=”1″>
</td>
<td>大家来评论1</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”1″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>2</td>
<td class=”left”>
<input type=”checkbox” value=”2″>
</td>
<td>大家来评论2</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”启用” class=”disabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”2″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>3</td>
<td class=”left”>
<input type=”checkbox” value=”3″>
</td>
<td>大家来评论3</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”启用” class=”uncensored”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”3″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>4</td>
<td class=”left”>
<input type=”checkbox” value=”4″>
</td>
<td>大家来评论4</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”4″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>5</td>
<td class=”left”>
<input type=”checkbox” value=”5″>
</td>
<td>大家来评论5</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”5″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>6</td>
<td class=”left”>
<input type=”checkbox” value=”6″>
</td>
<td>大家来评论6</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”6″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>7</td>
<td class=”left”>
<input type=”checkbox” value=”7″>
</td>
<td>大家来评论7</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”7″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>8</td>
<td class=”left”>
<input type=”checkbox” value=”8″>
</td>
<td>大家来评论8</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”8″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>9</td>
<td class=”left”>
<input type=”checkbox” value=”9″>
</td>
<td>大家来评论9</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”9″>
</td>
</tr>
<tr>
<td height=”30″ class=”center”>10</td>
<td class=”left”>
<input type=”checkbox” value=”10″>
</td>
<td>大家来评论10</td>
<td>admin</td>
<td>2014-10-21 10:28:36</td>
<td class=”simple”>
<b title=”禁用” class=”enabled”></b>
</td>
<td class=”simple”>
<b class=”edit” title=”编辑”></b>
<b class=”delete” title=”删除”></b>
<input type=”hidden” name=”sequence” class=”sequence” value=”10″>
</td>
</tr>
</table>
</div>
</div>
<span class=”clear”></span>
</div>
<div id=”sub”>
<input type=”submit” name=”submit” id=”submit” value=”保存”>
</div>
</form>
</div>
<div id=”bottom”></div>
</div>
</body>

</html>

小公司前端开发流程|web 前端模块化发的开发|web前端 集成开发环境

» 本文来自:前端开发者 » 《前端开发叠加效果的选项卡_拖动排序效果》
» 本文链接地址:https://www.rokub.com/5065.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!