添加专题中心

css/style.css

@@ -1,9 +1,9 @@
 /* CSS Document */
-body{ margin:0; padding:0;font-family:"宋体", "微软雅黑" arial, sans-serif; background:#fff; font-size:12px; color:#333;}
+body{ margin:0; padding:0;font-family:"宋体", "微软雅黑" arial, sans-serif; background:#fff; font-size:14px; color:#333;}
 div,form,img,ul,ol,li,dl,dt,p,dd,input,span,textarea,i{margin:0; padding:0; border:none; outline:none; font-style:normal;}
 li{list-style-type:none;}
 img{vertical-align:top;}
-h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
+h1,h2,h3,h4,h5,h6 { margin:0; padding:0; font-weight:normal;}
 
 /* Link */
 a:link { text-decoration:none;}
@@ -66,10 +66,14 @@ a:hover{
 	margin:10px 0;
 }
 .formItem dt{
-	margin: 5px 0
+	font-weight: normal !important;
+	margin:15px 0 5px 0;
 }
 .formItem dd{
-	margin:0 0 10px 0
+	padding:0 0 10px 0
+}
+.formItem dd:last-child{
+	margin:35px 0 10px 0;
 }
 .formItem input.text {
  min-width: 250px;
@@ -79,11 +83,13 @@ a:hover{
 .formItem .btnList{
 	text-align: right;
 }
+.formItem .btnList .button+.button{
+	margin-left:15px;
+}
 .button {
 	display: inline-block;
 	padding:5px 10px;
 	border:1px solid #1987AA;
-	margin:0 5px;
 	cursor: pointer;
 }
 .button.btn-orange{
@@ -333,6 +339,7 @@ a:hover{
 	margin-top:10px;
 }
 .menu_list{
+	font-size: 14px;
 }
 .menu_list ul span{
 	float:left;
@@ -346,7 +353,7 @@ a:hover{
 .menu_list ul li a:hover{
 	color:#faae4b;
 }
-.add_ques,.add_subj{
+.add_ques,.add_subj,.btn_whole{
 	float:right;
 	text-align:center;
 	cursor:pointer;
@@ -411,6 +418,7 @@ a:hover{
 	line-height:30px;
 	background:#f1f1f1;
 	margin-top:10px;
+	margin-bottom: 50px;
 	text-align:center;
 }
 .page_list a,.page_list a:visited{
@@ -447,12 +455,10 @@ a.disabled:hover{
 }
 .subject_box,.edit_subject_box,.bank_box,.edit_bank_box,.subject_box_jie,.edit_subject_box_jie,.delete_box_jie{
 	display:none;
-	position:absolute;
+	position: absolute;
+  z-index: 99999;
 	width:438px;
-	border:1px solid #999;
-	top:20%;
-	left:50%;
-	margin-left:-220px;
+	/*border:1px solid #999;*/
 	background:#fff;
 }
 .bank_top{
@@ -464,13 +470,13 @@ a.disabled:hover{
 .bank_top h2{
 	font-family:"微软雅黑";
 	font-size:16px;
-	text-indent:10px;
+	text-indent:15px;
 	color:#fff;
 	background:#0da4d3;
-	border-bottom:1px solid #999;
+	/*border-bottom:1px solid #999;*/
 }
 .bank_mainbox{
-	margin:0 10px;
+	margin:0 15px;
 }
 .bank_mainbox form span{
 	float:left;
@@ -496,12 +502,10 @@ a.disabled:hover{
 /*------------------------删除框--------------------------*/
 .delete_box{
 	display:none;
-	position:absolute;
+	position: absolute;
+  z-index: 99999;
 	width:438px;
-	border:1px solid #999;
-	top:20%;
-	left:50%;
-	margin-left:-220px;
+	/*border:1px solid #999;*/
 	background:#fff;
 }
 .delete_top{
@@ -516,7 +520,7 @@ a.disabled:hover{
 	text-indent:10px;
 	color:#fff;
 	background:#0da4d3;
-	border-bottom:1px solid #999;
+	/*border-bottom:1px solid #999;*/
 }
 .delete_main{
 }
@@ -1342,14 +1346,6 @@ a.disabled:hover{
 	height:35px;
 	padding:0 15px;
 }
-.chapter_list dd{
-	padding:5px 15px;
-	border-bottom: 1px dashed #ccc;
-}
-.jie_title{
-	margin: 0 0 0 15px;
-	font-size: 12px;
-}
 .chapter_title_one{
 	font-size: 15px;
 	background: none;
@@ -1394,16 +1390,241 @@ a.disabled:hover{
 .chapter_list_four{
 	margin-left: 15px;
 }
+.node_list_one{
+	font-size: 14px;
+}
+.node_list_one li{
+	padding:15px 0;
+	border-bottom: 1px dashed #ccc;
+}
+.node_oper{
+	margin:0 10px 0 0;
+	color:#ccc;
+}
+.node_oper a{
+	padding:0 5px;
+}
+.node_num{
+	margin:0 10px 0 0;
+}
+.node_list_two li,.node_list_three li,.node_list_four li{
+	line-height: 31px;
+	padding:0 0 0 15px;
+	border:none;
+}
+.node_stitle{
+	margin:0 175px 0 0;
+	padding:0 0 0 15px;
+}
 
 
-
-
-
-
-
-
-
-
-
-
-
+.big_title{
+	margin:10px 0;
+}
+.recommend_wrap{
+	margin:0 10px 0 0;
+}
+.recommend_special{
+	border:1px solid #ddd;
+}
+.recommend_special li{
+	border-bottom: 1px dashed #ddd;
+	padding:3px 0;
+}
+.recommend_special li a{
+	color:#006D8F;
+}
+.recommend_special li:hover{
+	background:#f1f1f1;
+}
+.recommend_special li:last-child{
+	border-bottom: none;
+}
+.recommend_special table tr td,.recommend_special table tr th{
+	padding:0 10px;
+}
+.recommend_special table tr td:first-child,.recommend_special table tr th:first-child{
+	padding:0 0 0 15px;
+}
+.recommend_special table tr td:last-child,.recommend_special table tr th:last-child{
+	padding:0 15px 0 0;
+}
+.special_sort{
+	position:relative;
+}
+.sort_tip{
+	position:absolute;
+	top:1px;
+	left:40px;
+	z-index: 999;
+	width:75px;
+	text-align: center;
+	background:#000;
+	border-radius: 3px;
+	color:#fff;
+	display:none;
+}
+.sort_tip span{
+	position:absolute;
+	top:10px;
+	left:-8px;
+	width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-right: 8px solid #000;
+  border-bottom: 5px solid transparent;
+}
+.recommend_add{
+	font-size: 14px;
+	font-weight: bold;
+}
+.colorRed{
+	margin:0 3px 0 0;
+	font-size: 16px;
+	color:#f00;
+}
+.special_wrap{
+	margin:20px 0 0 0;
+	font-size: 14px;
+}
+.special_wrap ul li{
+	float:left;
+	width:480px;
+	min-height: 150px;
+	border:1px solid #ddd;
+	margin:0 10px 15px 0;
+}
+.special_title{
+	font-size: 14px;
+	line-height: 30px;
+}
+.special_wrap .special_title{
+	padding:3px 0 3px 15px;
+}
+.special_wrap a .special_title{
+	color:#006D8F;
+}
+.special_wrap .special_title:hover{
+	background:#f1f1f1;
+}
+.special_content{
+	padding:3px 15px;
+	border-top: 1px solid #ddd;
+}
+.special_caozuo a{
+	padding:0 15px 0 0;
+}
+.special_kemu,.special_caozuo{
+	margin:0 0 5px 0;
+}
+.form_input{
+	width:30px;
+	height:30px;
+	padding:0 9px;
+}
+.special_bgjia{
+	width:445px;
+	height:125px;
+	background:url(special_bgjia.jpg) no-repeat center center;
+	cursor:pointer;
+}
+.margin_B10{
+	margin-bottom: 15px;
+}
+.margin_T10{
+	margin-top: 15px;
+}
+.specail_subject_top{
+	margin:15px 0 0 0;	
+}
+.specail_subject_top_title{
+	background:#f1f1f1;
+	padding:8px 15px;
+}
+.specail_subject_title{
+	margin:0 180px 0 0;
+	font-size: 16px;
+	height:30px;
+	line-height: 30px;
+}
+.specail_subject_content{
+	margin:1px 0 1px 0;
+	padding:8px 15px;
+	background:#f2f2f2;
+	min-height: 66px;
+}
+.specail_subject{
+	font-size: 14px;
+}
+.specail_subject ul li{
+	padding:10px 15px;
+	border-bottom:1px dashed #ddd;
+}
+.specail_subject ul li:hover{
+	background:#f1f1f1;
+}
+.specail_subject .fR{
+	font-size: 12px;
+	margin:0 15px 0 0;
+}
+.suject_checked_list ul li{
+	font-size: 14px;
+	line-height: 23px;
+	border-bottom: 1px dashed #fff;
+}
+.suject_checked_list ul li:hover{
+	border-bottom: 1px dashed #ddd;
+}
+.suject_checked_list .checkbox label{
+	padding-left:0;
+}
+.checkbokWid{
+	position:absolute;
+	right:0;
+	width:18px;
+	height:18px;
+	border:1px solid #ddd;
+}
+.pop_box{
+	display: none;
+  position: absolute;
+  z-index: 99999;
+  width: 438px;
+  background: #fff;
+}
+.popbox_title{
+	line-height: 40px;
+	font-family: "微软雅黑";
+  font-size: 16px;
+  text-indent: 10px;
+  color: #fff;
+  background: #0da4d3;
+}
+.popbox_input{
+	width:100%;
+	font-size: 14px;
+	border: 1px solid #ccc;
+	padding:5px;
+}
+.popbox_select{
+	width:100%;
+	padding:5px;
+	font-size: 14px;
+}
+#cover{
+	position:fixed;
+	z-index: 9999;
+	top:0;
+	left:0;
+	display:none;
+	width:100%;
+	height:100%;
+	opacity: 0.6;
+	background:#000 none repeat 0% 0%;
+}
+.overflowNone{
+	overflow-y:hidden;
+}
+.bg_black{
+	background:#f0f0f0;
+}

js/jquery.js

@@ -31,73 +31,235 @@ function checkPwd(){
 
 function ReplacePwd(that){
 	$(that).val( $(that).val().replace(/./g,'*') )
-}
+};
 
-/*--------------------删除框-------------------------*/
 
+// $(document).ready(function() {
+// 	$(".add_subj").click(function(){
+//         center($('.subject_box'));
+//         $(".subject_box").fadeIn();     
+//     });
+// 	function leftTop(obj){
+//             var screenWidth = $(window).width();
+//             var screenHeight = $(window).height();
+//             var scrolltop = $(document).scrollTop();
+//             var scrollleft = $(document).scrollLeft();
+//             var objLeft = (screenWidth - obj.width())/2 + scrollleft;
+//             var objTop = (screenHeight - obj.height())/2 + scrolltop;
+//             obj.css({left: objLeft + 'px', top: objTop + 'px'});
+//     }
+//     function center(obj) {
+//         leftTop(obj);
+       
+//         //浏览器窗口大小改变时
+//         $(window).resize(function() {
+//              leftTop(obj);
+//         });
+//         //浏览器有滚动条时的操作、
+//         $(window).scroll(function() {
+//             leftTop(obj);
+//         });
+       
+//     }
+// })
+
+/*--------------------删除框-------------------------*/
 $(document).ready(function() {
 	$(".del_img").click(function(){
+		center($('.delete_box'));
 		$(".delete_box").show();
-		})
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
 	$(".bank_cancel").click(function(){
 		$(".delete_box").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
+
+	$(".box_cancel").click(function(){
+		$(".pop_box").hide();
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 				
 	$(".add_subj").click(function(){
+		center($('.subject_box'));
 		$(".subject_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".subject_box").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 		
 	$(".edit_subm").click(function(){
+		center($('.edit_subject_box'));
 		$(".edit_subject_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".edit_subject_box").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 	$(".add_jie").click(function(){
+		center($('.subject_box_jie'));
 		$(".subject_box_jie").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".subject_box_jie").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 		
 	$(".edit_jie").click(function(){
+		center($('.subject_box_jie'));
 		$(".edit_subject_box_jie").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".edit_subject_box_jie").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 				
 	$(".add_ques").click(function(){
+		center($('.bank_box'));
 		$(".bank_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".bank_box").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 	$(".del_jie").click(function(){
+		center($('.delete_box_jie'));
 		$(".delete_box_jie").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
 		})
 	$(".bank_cancel").click(function(){
 		$(".delete_box_jie").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
 
 				
 	$(".edit_ques").click(function(){
+		center($('.edit_bank_box'));
 		$(".edit_bank_box").show();
-		})
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
 	$(".bank_cancel").click(function(){
 		$(".edit_bank_box").hide();
-		})
+		$("#cover").hide();
+		$("body").removeClass("overflowNone");
+		});
+
+	$(".specialAdd").click(function(){
+		center($('.specialAdd_box'));
+		$(".specialAdd_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".recommend").click(function(){
+		center($('.recommend_box'));
+		$(".recommend_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".recommendImg").click(function(){
+		center($('.recommendImg_box'));
+		$(".recommendImg_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".myModal").click(function(){
+		center($('.myModal_box'));
+		$(".myModal_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".specialOff").click(function(){
+		center($('.specialOff_box'));
+		$(".specialOff_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".specialSujectAdd").click(function(){
+		center($('.specialSujectAdd_box'));
+		$(".specialSujectAdd_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".specialEdit").click(function(){
+		center($('.specialEdit_box'));
+		$(".specialEdit_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".specialDel").click(function(){
+		center($('.specialDel_box'));
+		$(".specialDel_box").show();
+		$("#cover").show();
+		$("body").addClass("overflowNone");
+		});
+
+	$(".special_sort").hover(function(){
+		$(this).children(".sort_tip").show();
+		},function(){
+		  $(this).children(".sort_tip").hide();
+		});
+
+});
 	
-	})		
+	function leftTop(obj){
+            var screenWidth = $(window).width();
+            var screenHeight = $(window).height();
+            var scrolltop = $(document).scrollTop();
+            var scrollleft = $(document).scrollLeft();
+            var objLeft = (screenWidth - obj.width())/2 + scrollleft;
+            // var objTop = (screenHeight - obj.height())/2 + scrolltop;
+            var objTop = (screenHeight - obj.height())/2 + scrolltop-50;
+            obj.css({left: objLeft + 'px', top: objTop + 'px'});
+    }
+    function center(obj) {
+        leftTop(obj);
+       
+        //浏览器窗口大小改变时
+        $(window).resize(function() {
+             leftTop(obj);
+        });
+        //浏览器有滚动条时的操作、
+        $(window).scroll(function() {
+            leftTop(obj);
+        });
+       
+    }		
 
 			
 /*---------------问答题  多选题  单选题  判断题  题型下拉-------------------*/
@@ -122,6 +284,28 @@ $(document).ready(function() {
 		$(this).children(".answer").slideToggle();
 		})
 
+
+   $(function(){  
+	    var k = $('#myinput');
+	    k.css("color","#757575");
+	    k.val("请填写专题内容"); 
+	    var default_value = k.val(); 
+	      
+	    k.focus(function() { 
+	        k.css("color","black");  
+	        if (k.val() == default_value) {  
+	            k.val('');  
+	        }  
+	    });  
+	    k.blur(function() { 
+	        k.css("color","black");  
+	        if (k.val() == '') {  
+	            k.val(default_value);  
+	            k.css("color","#757575");  
+	        }  
+	    });  
+	});
+
 });
 	
 

special_index.html

@@ -0,0 +1,369 @@
+<!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=utf-8" />
+<title>专题中心</title>
+<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
+<link href="css/style.css" rel="stylesheet" type="text/css" />
+<script type="application/javascript" src="js/jquery-1.9.1.min.js"></script>
+<script type="application/javascript" src="js/bootstrap.js"></script>
+<script type="application/javascript" src="js/jquery.js"></script>
+</head>
+
+<body>
+
+<!--div exam_top start-->
+<div class="exam_top">
+    <div class="exam_topbox">
+        <div class="exam_topleft">
+            <h2></h2>
+            <ul>
+               <li><a href="index_post.html">题库</a></li>
+               <li><a href="feedback.html">反馈中心<span> (05)</span></a></li>
+               <li class="hover"><a href="special_index.html">专题中心</a></li>
+            </ul>
+        </div>
+        <div class="exam_topright">
+            <ul>
+               <span>欢迎您，XXX</span>
+               <li><a href="#">设置</a></li>
+               <li><a href="#">退出</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!--div exam_top end-->
+
+<!--div conbox start--> 
+<div class="conbox">
+    
+    <!--div menu_list start-->
+    <div class="menu_list clearfix">
+        <div class="add_ques"><a class="button btn-orange specialAdd" href="#">添加专题</a></div>
+        <ul class="clearfix">
+           <span>您的位置：</span>
+           <li>专题列表</li>
+        </ul>
+    </div>
+    <!--div menu_list end-->
+    
+    <!--div main start-->
+    <div class="main">
+      <div class="main_box">
+        <div class="recommend_wrap">
+          <h4 class="big_title">推荐专题</h4>
+          <ul class="recommend_special clearfix">
+            <li class="bg_black">
+              <table width="100%">
+                <tr>
+                  <th width="6%">排序</th>
+                  <th width="75%">专题标题</th>
+                  <th width="10%">科目数量</th>
+                  <th width="9%">操作</th>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add recommend">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"></td>
+                  <td width="75%" class="special_title">
+                    <div class="fR">
+                      <img width="68" height="30" src="images/postBg_1.jpg">&nbsp;&nbsp;<a class="recommendImg" href="#">编辑</a>
+                    </div>
+                    <a href="special_subject.html">公路工程管理与实务复习题专题&nbsp;&nbsp;&nbsp;&nbsp;<span class="colorRed">顶</span></a>
+                  </td>
+                  <!-- <td width="15%"></td> -->
+                  <td width="10%">科目【2】</td>
+                  <td width="9%"><a href="#" class="specialOff">下架</a></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="1"></div></td>
+                  <td width="75%" class="special_title"><a href="special_subject.html">公路工程管理与实务复习题专题</a></td>
+                  <td width="10%">科目【2】</td>
+                  <td width="9%"><a href="#" class="specialOff">下架</a></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="2"></div></td>
+                  <td width="75%" class="special_title"><a href="special_subject.html">公路工程造价基础理论及相关法规专题</a></td>
+                  <td width="10%">科目【2】</td>
+                  <td width="9%"><a href="#" class="specialOff">下架</a></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="3"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="4"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="5"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="6"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="7"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+            <li>
+              <table width="100%">
+                <tr>
+                  <td width="6%"><div class="special_sort"><div class="sort_tip"><span></span>越小越靠前</div><input type="text" class="form-control form_input" id="" value="8"></div></td>
+                  <td width="75%" class="special_title"><a class="btn btn-default btn-sm recommend_add myModal">+</a></td>
+                  <td width="10%"></td>
+                  <td width="9%"></td>
+                </tr>
+              </table>
+            </li>
+          </ul>
+        </div>
+        <div class="special_wrap clearfix">
+          <h4 class="big_title">专题列表</h4>
+          <ul>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+            <li>
+              <a href="special_subject.html"><h3 class="special_title">公路工程管理与实务复习题专题</h3></a>
+              <div class="special_content">
+                专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......
+                <div class="special_kemu">科目【1】</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="page_list">
+          <a href="#" class="disabled">[上一页]</a>
+          <a class="active" href="#">1</a>
+          <a href="#">2</a>
+          <a href="#">3</a>
+          <a href="#">4</a>
+          <a href="#">5</a>
+          <a href="#">[下一页]</a>
+        </div>
+      </div>
+    </div>
+    <!--div main end-->
+    
+</div>
+<!--div conbox end-->
+
+
+<!-- Modal -->
+<div class="recommend_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">置顶专题</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt>请上传图片：<span class="colorRed">480*192</span></dt>
+        <dd>
+          <input type="file" id="exampleInputFile">
+        </dd>
+        <dt>请选择你要推荐的专题：</dt>
+        <dd>
+          <select class="popbox_select">
+            <option>公路工程管理与实务复习题集专题</option>
+            <option>建设工程法规及相关知识专题</option>
+            <option>市政工程管理与实务复习题集专题</option>
+            <option>全国二级建造师公路工程管理与实务真题专题</option>
+            <option>公路工程管理与实务复习题集专题</option>
+            <option>建设工程法规及相关知识专题</option>
+            <option>市政工程管理与实务复习题集专题</option>
+            <option>全国二级建造师公路工程管理与实务真题专题</option>
+          </select>
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<div class="recommendImg_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">置顶专题图片修改</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt>请上传新的图片：<span class="colorRed">480*192</span></dt>
+        <dd>
+          <input type="file" id="exampleInputFile">
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<div class="myModal_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">推荐专题</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt>请选择你要推荐的专题：</dt>
+        <dd>
+          <select class="popbox_select">
+            <option>公路工程管理与实务复习题集专题</option>
+            <option>建设工程法规及相关知识专题</option>
+            <option>市政工程管理与实务复习题集专题</option>
+            <option>全国二级建造师公路工程管理与实务真题专题</option>
+            <option>公路工程管理与实务复习题集专题</option>
+            <option>建设工程法规及相关知识专题</option>
+            <option>市政工程管理与实务复习题集专题</option>
+            <option>全国二级建造师公路工程管理与实务真题专题</option>
+          </select>
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<div class="specialAdd_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">添加专题</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt><span class="colorRed">*</span>专题名称：</dt>
+        <dd>
+          <input type="text" class="popbox_input" id="" placeholder="请填写专题名称">
+        </dd>
+        <dt><span class="colorRed">*</span>专题内容：</dt>
+        <dd>
+          <textarea id="myinput" class="popbox_input" rows="3"></textarea>
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+
+<div class="specialOff_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">下架专题</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt>您确定要下架该内容吗？</dt>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+</body>
+<div id="cover"></div>
+</html>

special_subject.html

@@ -0,0 +1,176 @@
+<!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=utf-8" />
+<title>专题中心</title>
+<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
+<link href="css/style.css" rel="stylesheet" type="text/css" />
+<script type="application/javascript" src="js/jquery-1.9.1.min.js"></script>
+<script type="application/javascript" src="js/bootstrap.js"></script>
+<script type="application/javascript" src="js/jquery.js"></script>
+</head>
+
+<body>
+
+<!--div exam_top start-->
+<div class="exam_top">
+    <div class="exam_topbox">
+        <div class="exam_topleft">
+            <h2></h2>
+            <ul>
+               <li><a href="index_post.html">题库</a></li>
+               <li><a href="feedback.html">反馈中心<span> (05)</span></a></li>
+               <li class="hover"><a href="special_index.html">专题中心</a></li>
+            </ul>
+        </div>
+        <div class="exam_topright">
+            <ul>
+               <span>欢迎您，XXX</span>
+               <li><a href="#">设置</a></li>
+               <li><a href="#">退出</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!--div exam_top end-->
+
+<!--div conbox start--> 
+<div class="conbox">
+    
+    <!--div menu_list start-->
+    <div class="menu_list clearfix">
+        <ul class="clearfix">
+          <span>您的位置：</span>
+          <li><a href="special_index.html">专题列表</a>>></li>
+          <li>科目列表</li>
+        </ul>
+    </div>
+    <!--div menu_list end-->
+    
+    <!--div main start-->
+    <div class="main">
+      <div class="main_box">
+        <div class="specail_subject_wrap">
+          <div class="specail_subject_top clearfix">
+            <div class="specail_subject_top_title">
+              <div class="fR special_caozuo">
+                <a href="#" class="specialSujectAdd">添加</a>
+                <a href="#" class="specialEdit">编辑</a>
+              </div>
+              <h3 class="specail_subject_title">公路工程管理与实务复习题专题</h3>
+            </div>
+            <div class="specail_subject_content">专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......</div>
+          </div>
+          <div class="specail_subject">
+            <ul>
+              <li><div class="fR"><a href="#" class="specialDel">移除</a></div>2B310000 公路工程施工技术</li>
+              <li><div class="fR"><a href="#" class="specialDel">移除</a></div>2B320000 公路工程项目施工管理</li>
+              <li><div class="fR"><a href="#" class="specialDel">移除</a></div>2B330000 公路工程项目施工相关法规与标准</li>
+              <li><div class="fR"><a href="#" class="specialDel">移除</a></div>2B310000 公路工程施工技术</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--div main end-->
+    
+</div>
+<!--div conbox end-->
+
+
+<!-- Modal -->
+<div class="specialSujectAdd_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">添加科目</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt></dt>
+        <dd>
+          <select class="popbox_select">
+            <option>公路工程管理与实务复习题集</option>
+            <option>建设工程法规及相关知识</option>
+            <option>市政工程管理与实务复习题集</option>
+            <option>全国二级建造师公路工程管理与实务真题</option>
+          </select>
+        </dd>
+        <dt>请勾选推荐科目：</dt>
+        <dd>
+          <div class="suject_checked_list">
+            <ul>
+              <li class="checkbox">
+                <label>
+                  <input type="checkbox" class="checkbokWid" id="blankCheckbox" value="option1" aria-label="...">2B310000 公路工程施工技术2B310000
+                </label>
+              </li>
+              <li class="checkbox">
+                <label>
+                  <input type="checkbox" class="checkbokWid" id="blankCheckbox" value="option1" aria-label="...">2B320000 公路工程项目施工管理
+                </label>
+              </li>
+              <li class="checkbox">
+                <label>
+                  <input type="checkbox" class="checkbokWid" id="blankCheckbox" value="option1" aria-label="...">2B330000 公路工程项目施工相关法规与标准
+                </label>
+              </li>
+              <li class="checkbox">
+                <label>
+                  <input type="checkbox" class="checkbokWid" id="blankCheckbox" value="option1" aria-label="...">2B310000 公路工程施工技术
+                </label>
+              </li>
+              <li class="checkbox">
+                <label>
+                  <input type="checkbox" class="checkbokWid" id="blankCheckbox" value="option1" aria-label="...">2B320000 公路工程项目施工管理
+                </label>
+              </li>
+            </ul>
+          </div>
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<div class="specialEdit_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">编辑专题</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt><span class="colorRed">*</span>专题名称：</dt>
+        <dd>
+          <input type="text" class="popbox_input" id="" value="公路工程管理与实务复习题专题">
+        </dd>
+        <dt><span class="colorRed">*</span>专题内容：</dt>
+        <dd>
+          <textarea class="popbox_input" rows="3">专题简介内容专题简介内容专题简介内容，专题简介内容专题简介内容......</textarea>
+        </dd>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<div class="specialDel_box pop_box">
+  <div class="bank_top">
+    <span class=""></span>
+    <h2 class="popbox_title">移除科目</h2>
+  </div>
+  <div class="bank_main">
+    <div class="bank_mainbox">
+      <dl class="formItem">
+        <dt>您确认移除该科目吗？</dt>
+        <dd class="btnList"><a class="button btn-gray box_cancel">取消</a><a class="button btn-orange bank_sure">确认</a></dd>
+      </dl>
+    </div>
+  </div>
+</div>
+
+</body>
+<div id="cover"></div>
+</html>