专家信息修改页面，改善教育背景模块样式

src/main/webapp/css/index.css

.coulstblock .coulstbox .coulstbtn{padding:24px 10px; margin-right: 20px;}
.coulstblock .coulstbox .coulstbtn span,#conbtn span{padding:5px 40px; display:block; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
/*专家信息头部*/
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; overflow:hidden; padding:20px 50px; position: relative;}
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; overflow:hidden; padding:20px 30px; position: relative;}
.head-left{ float:left;width:200px; height:200px; position:relative;overflow:hidden;}
.replace-photo{ display:block; width:100%; height:50px; position:absolute; bottom:-50px;background:url(../images/take-photo.png) no-repeat center center; background-color:rgba(0,0,0,0.4);font-size:16px;line-height:44px; color:#fff; text-align:center;}
/*.take-photo{ display:block; width:20px; height:20px; position:absolute; top:50%; margin-top:-10px; left:50%; margin-left:-10px;background:url(../images/take-photo.png) no-repeat center center; }*/
.head-center{ float:left; width:500px; min-height:150px; margin-top:20px; margin-left:64px;}
.input-txt{ width:175px; height:26px; color:#666; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; float:left; padding-left:10px;}
.infor{clear:both; width:100%; height:26px; margin-bottom:10px; }
.head-center{ float:left; min-height:150px;margin: 0px 30px;}
.input-txt{ width:180px; height:26px; color:#666; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; float:left; padding-left:10px;}
.infor{clear:both; width:100%;overflow:hidden; margin:10px; }
.infor span{ display:block; width:60px; height:26px; float:left;font-size:14px;line-height:26px; color:#333; margin-left:10px;}
.select{  width:173px; height:24px; border-radius:5px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; background:url(../images/downselect.png) no-repeat 150px center; float:left; overflow:hidden;}
.selectbtn{ width:200px; height:24px; border:none; background:url(../images/downselect.png) no-repeat 150px center; font-size:14px;line-height:26px; color:#999;}
#orgImage{display:none;}
/*专家信息内容*/
.information-content{  width:1050px;height:auto; margin:auto;margin-top:20px; position:relative;overflow: hidden;}
.content-left{min-height:394px; float:left;overflow:hidden; }
.menublock{ margin-bottom:10px;width:298px; background:#fff; border:1px #eaeaea solid; padding-bottom:10px;}
.content-left{min-height:394px;max-width: 252px;width:24%; float:left;overflow:hidden; }
.menublock{ margin-bottom:10px;width:100%; background:#fff; border:1px #eaeaea solid; padding-bottom:10px;}
.left-title{ width:165px; height:44px;font-size:20px;line-height:44px; border-bottom:1px #ffad55 solid; padding-left:10px; }
.subsidebar{ display:block; width:100%; height:26px; padding-left:18px;font-size:14px;line-height:26px;color:#313131; margin-top:5px;}
.subcolor{ background:#ff9900; color:#fff;}
.subsidebar:hover{ background:#ff9900; color:#fff;}
.content-right{ width:735px;min-height:100px; float:right; }
.right-box{ width:100%; background:#fff; border:1px #eaeaea solid; margin-bottom:20px; }
.content-right{ width:75%;min-height:100px; float:right; }
.right-box{ width:100%; background:#fff; border:1px #eaeaea solid; margin-bottom:10px; }
/*.introduction{min-height:200px;}*/
.right-title{ position:relative; overflow:hidden; padding-right:20px;}
.right-title span{ float:left;font-size:20px;line-height:48px; /*color:#ff9900; */padding-left:15px;}
.editbox{ clear:both; width:665px; margin:auto;font-size:14px;line-height:20px;color:#666;}
.reedit{ clear:both; width:665px; min-height:210px; padding:10px;margin-left:35px; border:1px #f99550 solid; box-shadow:0 0 1px #f99550 inset; font-size:14px;line-height:20px; color:#3e3e3e;resize:none;
}
.edit{ display:block; float:left; width:22px; height:22px; background:url(../images/edit.png) no-repeat right center;margin: 15px 6px;cursor:pointer;}
.edit:hover{background:url(../images/edit.png) no-repeat left center;}
.modifybox{ display:none;}
.infor-browse{ clear:both; margin-bottom:20px;}
.btn-marL{ margin-left:35px;cursor:pointer; }
.edit{ display:block; float:left; width:22px; height:22px; background:url(../images/edit.png) no-repeat left center;margin: 15px 6px;cursor:pointer;}
.addclick{position:absolute; right:20px; background: url(../images/addclick.png) 0 14px no-repeat; padding-left: 22px;line-height: 48px;color: #ff9900;cursor: pointer;}
.exitlist{position:absolute;top:2px;margin-left:6px; width:22px; height:22px; background:url(../images/edit.png) no-repeat left center;cursor:pointer;}
.btnbox{ overflow:hidden;padding:16px 20px;}
.btnbox .btn{margin:0 6px;}
.btnbox .deletebtn{color:#F00;box-shadow: none;border: none;background:none; float:right;	}
.modifybox{ display:none;padding:10px 36px; margin: 6px 0;background: #FFF9EF;}
.infor-browse{ clear:both;padding-bottom:16px;}
.infor-browse2{padding-bottom:0;}
.btn-marL{cursor:pointer; }
.btn-marB{ margin-bottom:30px;cursor:pointer;}
.btn{ width:105px; padding:0;cursor:pointer;}
.btn:hover, .btn:focus { text-decoration: none; color:#fff;}
.bus-title{ clear:both;font-size:14px;line-height:26px; color:#3e3e3e; }
.check{ width:257px; height:26px; float:left;margin-left:35px;font-size:14px;line-height:26px;color:#3e3e3e;}
.txt-width{ width:358px;}
.star{ color:#ff9900; display:inline; font-size:16px;}
.edu{ font-size:16px;line-height:26px; color:#868686;}
.txtType{ position:relative;}
.txtExp{ position:relative;width: 60%;}
.required_star{ color:#ff9900;float:left;background:url(../images/requiredicon.png) center center no-repeat;background-size:100% 100%; display:block;width:8px;height:8px;position:absolute; top: 6px;left: -12px; }
.edu{ font-size:16px;line-height:30px; color:#868686;padding: 0 16px; margin: 10px;width: 100%;}
.edu-h{ height:52px;}
.edu-txt{ float:none; width:402px;}
.edu-txt{ width:100%;margin-left: 8px;height: 30px;font-size: 14px;line-height: 18px;}
.date-box{ }
.datebox{ width:540px; overflow:hidden; height:26px;}
hr{ width:18px; float:left; background:#ffc688; height:2px; border:none; margin:10px;}
.checkbox{ float:left; width:60px;margin-left:15px;margin-top: -1px;}
.date-btn{ float:left; width:175px; background:url(../images/select.png) no-repeat right; z-index:999;}
.date-btn{ float:left; width:180px; background:url(../images/select.png) no-repeat right #fff;background-size:13% 100%; z-index:999;}
.opacity{ width:150px;}
label.edu-radio{ float:none;font-size:16px;line-height:26px; color:#868686; }
.edu-select{ margin-left:10px; width:240px; }
.radiobox{ width:115px; float:left;}
.date-title{float:left;    margin-right: 4px;}
.edu-sel{ float:right;}
.edu-about li{ list-style:inside;}
.edu-about{ list-style:inside;font-size:14px;line-height:26px;color:#868686; margin:0 35px; margin-bottom:35px; cursor:pointer;}
.edu-about li{ list-style:inside; overflow:hidden;position:relative;margin: 0 35px;}
.edu-about{ list-style:inside;font-size:14px;line-height:26px;color:#868686;padding:10px 0 26px 0;cursor:pointer;}
.edu-about span{ display:none;}
.infor-browse .edu-about{ color:#666;}
.add-icon{ cursor:pointer;}
.modi{ cursor:pointer;padding-left:10px;}
/* .floatL{ float:right;} */
.addbox{ display:none;}
/*下拉*/
.mr_sj {position: absolute;right: 18px;top: 12px;border: 6px solid #fff;border-color: #ff9900 transparent transparent;display: block;font-size: 0;height: 0;width: 0;}
.mr_timed_div .mr_btn {border: 0;text-align: left;width: 160px;height: 28px;background-color: #fff;}
.mr_timed_div {position: relative;width: 180px;height: 30px;cursor: pointer; background-color: #fff;}
.mr_timed_div .xl_list {position: absolute;top: 30px;left: -1px;z-index: 2;background-color: #fff;box-shadow: 2px 2px 4px #efefe4; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;width:180px;}
.ul_edubg { max-height: 182px;overflow: auto;display:none;border: 1px solid #e7e7e7;}
.mr_timed_div .xl_list li {line-height: 36px;padding-left: 10px;list-style:none;margin: 0 10px;}
/*日期组件*/
.mr_calendar_ym {position: absolute;top: 34px;left:6px;height: 160px;width: 244px;background-color: #fff;z-index: 5000;border: 1px solid #e7e7e7;border-radius: 4px;box-shadow: 2px 2px 4px #e7e7e7;cursor:pointer;display:none;}
.mr_calendar_ym ul {float: left;}
.mr_calendar_ym span{display:block;}
.mr_calendar_ym .mr_year {width: 34%;height: 160px;border-right: 1px solid #efefef;overflow: auto;}
.mr_calendar_ym .mr_year li {list-style:none;margin:0;cursor: pointer;line-height: 32px;background-color: #fff;color: #333;text-align: center;}
.mr_calendar_ym .mr_month { word-wrap: normal;padding: 10px 10px 10px 16px;background-color: #fff; width:66%;height:158px;}
.mr_calendar_ym .mr_month li {list-style:none;margin:0;float: left;cursor: pointer;width: 33%;height: 22px;line-height: 22px;color: #333;background-color: #fff;margin: 0 0 10px;}
.mr_calendar_ym .full_year{width: 100%;height: 160px;border-right: 1px solid #efefef;overflow: auto;}
.mr_calendar_ym .full_year li{list-style:none;margin:0;cursor: pointer;line-height: 32px;background-color: #fff;color: #333;text-align: left;padding-left:16px;}
.mr_calendar_ym li.active { background-color: #ff9900!important;color: #fff!important;}
/*------------------------------------------------------------------------------------*/
.radio+.radio, .checkbox+.checkbox {

src/main/webapp/information.html

		<div class="information-head">
			<div class="head-left headRadius"><a><img id="headImage"><a href="photo-set.html" class="replace-photo"></a></a></div>		
			<div class="head-center">
				<div class="infor-browse">
				<div class="infor-browse" style="padding:10px;">
					<a class="named" id="nameS" style="font-size:20px;"></a><a href="#" class="modify"></a><a class="edit" style=" margin:4px 6px;"></a>
					<div class="position" ><span id="office"></span ><span id="titleS"></span ></div>				
					<div class="science"><span id="industryS"></span ><span id="orgNameS"></span ></div>			
					<div class="address" id="address"></div>
				</div>
				<div class="modifybox">
				<div class="modifybox" style="padding:10px;">
				<div class="infor">
					<span><em class="emspace">姓</em>名</span>
					<input type="text" class="input-txt name" id="name">
				
 				<!-- 教育背景 -->
				<div class="right-box introduction">
					<div class="right-title"><span>教育背景</span><a class="edit"></a></div>
					<div class="infor-browse">
						<ul class="edu-about" style=" list-style-type:circle" id="eduBgShow">
						
						</ul>
					</div>
					<div class="modifybox">
					<div class="infor edu btn-marL">
						<b class="star">*</b><em class="emspace">学</em>校
						<input type="hidden" id="eduId" />
						
						<input type="text" class="input-txt edu-txt" id="school">
					</div>
					<div class="infor edu btn-marL date-box">
						<div class="date-title"><b class="star">&nbsp;</b> 毕业年份</div>
                        <!--<input type="number" class="date-btn input-txt" id="year" value="2016" />-->
                        <input type="text"  maxLength="4" class="date-btn input-txt" id="year"  onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" value="2016">
					<div class="right-title"><span>教育背景</span>
						<a class="addclick">点击添加</a>
					</div>
					<div class="infor-browse infor-browse2">
						<ul class="edu-about" style=" list-style-type:circle">
							<!-- id="eduBgShow"-->
							<li>北科大－计科系－信管－硕士－2016<em class="exitlist"></em></li>
							<li>航空航天大学－计科系－信管－硕士－2016<em class="exitlist"></em></li>
						<!--<input type="text" class="date-btn input-txt" id="year" />-->
					</div>
					<div class="infor edu btn-marL">
						<b class="star">&nbsp;&nbsp;</b><em class="emspace">院</em>系
						<input type="text" class="input-txt edu-txt" id="college">
					</div>
					<div class="infor edu btn-marL">
						<b class="star">&nbsp;&nbsp;</b><em class="emspace">专</em>业
						<input type="text" class="input-txt edu-txt" id="major">
					</div>
					<div class="infor edu btn-marL edu-h">
					<!--	<div class="sf"><b class="star">*</b><em class="emspace">身</em>份</div>
						<div class="radiobox">
							<input type="radio" name="student" id="a" value="0" class="radio edu-radio"><label for="a" class="radio edu-radio"><em class="emspace">学</em>生</label>
							<input type="radio" name="student" id="b" value="1" class="radio edu-radio"><label for="b" class="radio edu-radio" >访问学者</label>
						</div>-->
						<div class="edu-select" style=" float:none;">
							获得学位
							<div class="select edu-sel" >
								<select class="selectbtn" id="degree">
									<option value="">请选择您的学位</option>
									<option value="学士">学士</option>
									<option value="硕士">硕士</option>
									<option value="博士">博士</option>
								</select>
							</div>
							
						</div>
						
					</div>
                    <div class="clear"></div>
					<input type="button" value="保存" class="infor-save btn btn-marL" id="saveEduBg">
					<input type="button" value="取消" class="close btn btn-marB" >
                    <div class="clearfix"></div>
					<ul class="edu-about" id="eduBgList">
						
					</ul>
					</div>
                         <!--添加修改表单-->
                         <div class="modifybox" style="display:block">
                            <form class="txtExpForm">
                                <div class="infor edu">
                                    <div class="txtType floatL"><b class="required_star"></b><em class="emspace">学</em>校</div>
                                    <input type="hidden" id="eduId" />
                                    <div class="txtExp floatL"><input type="text" class="input-txt edu-txt" id="school"></div>
                                </div>
                                <div class="edu date-box clearfix">
                                    <div class="txtType floatL">毕业年份</div>
                                    <div class="txtExp floatL">
                                    	<input type="text" class="date-btn input-txt edu-txt" id="year" name="YYYY" value="">
                                        <!--年选择器-->
                                        <div class="mr_calendar_ym clearfix" style="width:180px;">
                                            <ul class="full_year">
                                                   
                                            </ul>
                                        </div>
                                        <!--年月选择器-->
                                        <!--<div class="mr_calendar_ym clearfix" style="display: block;">
                                            <ul class="mr_year">
                                                   
                                            </ul>
                                            <ul class="mr_month">
                                                
                                            </ul>
                                        </div> --> 
                                        
                                        
                                    </div>
                                    
                                                                               
                                            
                                </div>
                                <div class="infor edu">
                                     <div class="txtType floatL"><em class="emspace">院</em>系</div>
                                     <div class="txtExp floatL"><input type="text" class="input-txt edu-txt floatL" id="college"></div>
                                </div>
                                <div class="infor edu">
                                    <div class="txtType floatL"><em class="emspace">专</em>业</div>
                                    <div class="txtExp floatL"><input type="text" class="input-txt edu-txt" id="major"></div>
                                </div>                                
                                <div class="edu ulbox clearfix">
                                    <div class="txtType floatL">获得学位</div>
                                    <div class="mr_timed_div input-txt edu-txt floatL">                                 	
                                        <i class="mr_sj"></i>
                                        <input type="hidden" name="degree_text">
                                        <input type="button" class="mr_btn" name="degree_val" onClick="showmenu()" id="div_select2" value="本科">
                                        <div class="xl_list">
                                            <ul class="ul_edubg" id="li_show">
                                                <li onclick="selectThis('学士')">学士</li>
                                                <li onclick="selectThis('硕士')">硕士</li>
                                                <li onclick="selectThis('博士')">博士</li>
                                                <li onclick="selectThis('其他')">其他</li>
                                            </ul>
                                        </div>                                                  
                                    </div>                                                            
                                </div>
                                <div class="btnbox">
                                    <input type="button" value="保存" class="infor-save btn" id="saveEduBg">
                                    <input type="button" value="取消" class="close btn">
                                    <input type="button" value="删除本条" class="deletebtn">
                                </div>
                            </form>
                         </div>
                         <!--添加修改表单//-->
                         
                     <!--<ul class="edu-about" id="eduBgList">-->
                    			<!-- id="eduBgShow"-->
                            <li>北科大－计科系－信管－硕士－2016<em class="exitlist"></em></li>
                            <li>航空航天大学－计科系－信管－硕士－2016<em class="exitlist"></em></li>
                        </ul>
                     </div>
				</div>
				
				<div class="right-box introduction">
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>
<script type="text/javascript" src="js/information.js"></script>
<script>
$(".date-btn").click(function(){
	$(this).siblings(".mr_calendar_ym").show();
	})
	if(document.attachEvent) {  
	window.attachEvent("onload", yearAdd);  } 
else {  
	window.addEventListener('load', yearAdd, false);}
	function yearAdd(){   
		//先给年下拉框赋内容   
		var y  = new Date().getFullYear();  
		for (var i = (y-60); i < (y+10); i++){ //以今年为准，前60年，后10年   
			  $(".mr_year").append('<li>'+i+'年</li>');
			  $(".full_year").append('<li>'+i+'年</li>');
			  if(i==y){
				$(".mr_year>li:contains("+ i +")").addClass("active"); 
				$(".full_year>li:contains("+ i +")").addClass("active"); 
			}
		}
		//赋月份的下拉框   
	for (var i = 1; i < 13; i++)  { 
		  $(".mr_month").append('<li>'+i+'月</li>'); }  
	
	document.reg_testdate.YYYY.value = y;   
	document.reg_testdate.MM.value = new Date().getMonth() + 1;   
	var n = MonHead[new Date().getMonth()];   
	if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;   
		writeDay(n); //赋日期下拉框Author:meiz
	}
</script>
</body>
</html>

src/main/webapp/js/common.js

//模拟下拉菜单
function selectThis(value){ 
	$("#div_select").text(value); 
	$("#div_select2").val(value);
	$("#li_show").css("display","none"); 
} 

src/main/webapp/js/information.js

		 
		 });
//放在编辑上面添加一个class和减少一个class
$("#container .edit").hover(function(){
	$(this).addClass("edit-position-left")	
	},function(){
	$(this).removeClass("edit-position-left")			
		});
//$("#container .edit").hover(function(){
//	$(this).addClass("edit-position-left")	
//	},function(){
//	$(this).removeClass("edit-position-left")			
//		});
//获取点击那个编辑，及
$("#container .edit").click(function(){
	var edit =$(".edit").index(this);