【我的工作台】上加入我的文章模块

资源信息加入咨询、分享、关注

css/common.css

/*header部分*/
#header{width:100%;min-width:1100px; height:60px; background:rgba(255,153,0,1); position:fixed; top:0; z-index:999; }
.logo{ display:block; width:80px; height:40px; background:url(../images/logo2.png) no-repeat;background-size:100% 100%;  margin-left:80px; margin-top:10px; float:left;}
.searchblock{ width:280px; height:35px; position:absolute; left:50%; top:50%; margin-left:-132px; margin-top:-17.5px; display:none;}
.searchblock{ width:280px; height:35px; position:absolute; left:50%; top:50%; margin-left:-140px; margin-top:-17.5px; display:none;}
.search-txt{ width:220px;line-height:35px; height:35px; background:#fff; border:none;-moz-border-radius:6px 0 0 6px;-webkit-border-radius:6px 0 0 6px; border-radius:6px 0 0 6px; behavior:url(../js/ie-css3.htc); float:left;font-size:14px;padding-left:10px; color:#a3a3a3;}
.search-btn{ width:35px; height:35px; background:#fff; border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;-webkit-border-radius:0 6px 6px 0; float:left; cursor:pointer; behavior:url(../js/ie-css3.htc);cursor:pointer;}
.search-icon{ display:block; width:20px; height:20px; background:url(../images/index-icon.png) no-repeat; background-position:left; margin:8px;}

css/index.css

/*------------------------------------------------------------------------------------*/
/*专家信息页*/
/*咨询模块按钮入口*/
.coulstblock{position:fixed;width:100%;bottom:0;right:0;z-index:1001; cursor: pointer; background:rgba(256,256,256,.9); border:1px solid #dddddd; border-radius:4px 4px 0 0; box-shadow: -3px -2px 8px -1px rgba(0,0,0,0.2); display:none;}
.coulstblock{position:fixed;width:100%;bottom:0;right:0;z-index:1001;background:rgba(256,256,256,.9); border:1px solid #dddddd; border-radius:4px 4px 0 0; box-shadow: -3px -2px 8px -1px rgba(0,0,0,0.2); display:none;}
.coulstblock .coulstbox{display:block;padding:10px 20px;width:90%;margin:auto; overflow:hidden;}
.coulstblock .coulstbox .prohead{ width:80px;margin-left:40px; overflow:hidden;}
.coulstblock .coulstbox .proinfomation{margin:0 2%;width:60%; overflow:hidden;}
.coulstblock .coulstbox .proinfomation{margin:0 2%;max-width:50%; overflow:hidden;}
.coulstblock .coulstbox .coulstbtn{padding:24px 10px; margin-right: 20px;}
.coulstbtn span,#conbtn span{padding:5px 30px;margin-right:6px; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
.coulstbtn span,#conbtn span{display:inline-block;padding:10px 40px;margin-right:6px; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
.coulstbtn .shareWeixin{background: #52DA4D;}
.shareCode{position: absolute;top:-146px;left: 50%;margin-left: -70px;display: none;width: 140px;height:140px;}
.shareCode{position: absolute;top:-156px;left: 50%;margin-left: -75px;display: none;width: 150px;height:150px;}
.shareCode img{width: 100%;}
.coulstbtn .attentBtn{position:relative;padding-left:42px;border:1px solid #ff9900;color:#ff9900;background: transparent;}
.coulstbtn .attentBtn em{position:absolute;top:4px;left:24px;display:inline-block; width:16px;height:18px;background:url(../images/favoricon.png) 0 -31px no-repeat;background-size:100% auto;}
.coulstbtn .attentBtn{position:relative;padding-left:53px;border:1px solid #ff9900;color:#ff9900;background: transparent;}
.coulstbtn .attentBtn em{position:absolute;top:50%;margin-top:-9px;left:34px;display:inline-block; width:16px;height:18px;background:url(../images/favoricon.png) 0 -32px no-repeat;background-size:100% auto;}
.coulstbtn .attentBtn i{font-style: normal;}
.coulstbtn .attentBtn.attented{color:#ffffff;padding-left:44px;background: #f4c600;border:1px solid #f4c600;}
.coulstbtn .attentBtn.attented{color:#ffffff;padding-left:54px;background: #f4c600;border:1px solid #f4c600;}
.coulstbtn .attentBtn.attented em{background:url(../images/favoricon.png) 0 -48px no-repeat;background-size:100% auto;}
/*专家信息头部*/
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; padding:20px 30px; position: relative;}
	background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.2)); /* 标准的语法 */
}
#artical_topic{position: absolute;bottom:0;padding:6px 10px;font-size:14px;line-height:16px;color:#FFFFFF}
.art_img{ width: 100%; height:160px; overflow: hidden;background: url(../images/default-artical.jpg) center center no-repeat;background-size:100% auto;}
.art_img{ width: 100%; height:160px; overflow: hidden;
	background: url(../images/default-artical.jpg) center center no-repeat;
	background-size:cover;/*宽高覆盖区域*/
	-moz-background-size:cover;
	-webkit-background-size:cover;}
.tagsBox{padding:4%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.tagsBox span{color:#666;margin:0 2px;font-size: 13px;}

css/workspace.css

.objectsrc:hover{ background:#F1D299;}
.objectsrc p{ line-height:24px; text-align:center;}
.objectsrc .objectstate{/* background:url(../images/progressing.png) 52px 2px no-repeat;*/}
.otherRes{padding:10px;}
.otherRes li{ width: 202px;float:left;border: 1px solid #e4e5e7;margin:0 12px 12px 0;border-radius: 6px;cursor: pointer;}
.otherRes li:last-child{margin:0 0 12px 0;}
.otherRes li a{display: block;}
.art_topicBox{position: relative;display: block;}
.art_topicbox{ position:absolute;top:0;width:100%;height:100%;
	background: -webkit-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.2)); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.2)); /* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.2)); /* Firefox 3.6 - 15 */
	background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.2)); /* 标准的语法 */
}
#artical_topic{position: absolute;bottom:0;padding:6px 10px;font-size:14px;line-height:16px;color:#FFFFFF}
.art_img{ width: 200px; height:160px; overflow: hidden;
	background: url(../images/default-artical.jpg) center center no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;}
.tagsBox{padding:4%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.tagsBox span{color:#666;margin:0 2px;font-size: 13px;}
/*公告*/
.workconright{ width:29%;}
.worknotice{ width:100%; height:464px;/*  border:1px solid #d6d6d6; */background:#fff; position: relative;text-align: center; margin:1px;}

resourceInfo.html

							</div>
						</div>
					</div>
					<div class="coulstbtn" style="position:absolute;bottom:30px;">
						<span  id="consultin">咨询</span>
					<div class="coulstbtn floatL" style="position: absolute;bottom: 20px;">
						<span id="conbtn">咨询</span>
						<span class="shareWeixin" style="position: relative;">分享至微信
							<div class="shareCode">
								<img src="images/code.jpg">
							</div>
						</span>
						<span class="attentBtn" id="attentBtn"><em></em><i>关注</i></span>
					</div>
				</div>
			</div>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/resourceInfo.js"></script>
<script type="text/javascript">
	//分享关注按钮
	$('.shareWeixin').hover(function(){$('.shareCode').stop(true,false).fadeToggle();});
	var attentFlag;
	$('.attentBtn').click(function(){
		if(attentFlag != 0){
			$(this).addClass('attented');
			$('.attentBtn i').text('取消关注');
			attentFlag=0;
		}else{
			$(this).removeClass('attented');
			$('.attentBtn i').text('关注');
			attentFlag=1;
		}
	})
</script>
</body>
</html>

workindex.html

            </div>
            <!--正在使用的资源-->
            <div class="workblock">
                <div class="worktit">我的资源<a class="worklinkbtn floatR"id="allResource">查看全部</a></div>
                <div class="worktit">我的资源<a class="worklinkbtn floatR" id="allResource">查看全部</a></div>
                <div class="wbcon">
                   <!--  <div class="sharesrcbox11">
                                                                           
                    </div> -->
                    <div id="consdcen">
                    
                    </div>
                </div>
            </div> 
            <!--我的文章-->
            <div class="workblock">
                <div class="worktit">我的文章<a class="worklinkbtn floatR" id="allArtical">查看全部</a></div>
                <div class="wbcon">
                    <div id="conArtical">
                    	<ul class="otherRes clearfix">
							<li>
								<a href="articalInfo.html">
									<div class="art_topicBox">
										<div class="art_img"></div>
										<div class="art_topicbox">
											<h6 id="artical_topic" >李光福：为核电安全发展护航  腐蚀防护任重道远</h6>
										</div>
									</div>
									<div class="tagsBox">
										<span>显示</span>
										<span>电脑</span>
										<span>文章浏览</span>
									</div>
								</a>
							</li>
							<li>
								<a href="articalInfo.html">
									<div class="art_topicBox">
										<div class="art_img" style="background: url(images/banner/artical_01.jpg) 0 0 no-repeat;background-size:cover;"></div>
										<div class="art_topicbox">
											<h6 id="artical_topic" >李光福：为核电安全发展护航  腐蚀防护任重道远</h6>
										</div>
									</div>
									<div class="tagsBox">
										<span>显示</span>
										<span>电脑</span>
										<span>文章浏览</span>
									</div>
								</a>
							</li>
							<li>
								<a href="articalInfo.html">
									<div class="art_topicBox">
										<div class="art_img" style="background: url(images/nodata.png) 0 0 no-repeat;background-size:cover;"></div>
										<div class="art_topicbox">
											<h6 id="artical_topic" >李光福：为核电安全发展护航  腐蚀防护任重道远</h6>
										</div>
									</div>
									<div class="tagsBox">
										<span>水晶防护</span>
										<span>电脑</span>
										<span>文章浏览画面文章浏览画面</span>
									</div>
								</a>
							</li>
						</ul>
                    </div>
                </div>
            </div> 
            <!--正在进行的科研项目-->
            <!-- <div class="workblock">
                <div class="worktit">正在进行的科研项目<a class="worklinkbtn floatR">查看全部</a></div>

workspaces.html


 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
				<li>		
					<a class="proinfor clearfix" target="_blank" href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="information-brow.html">
						<div class="headblock floatL"><img id="proHead" class="headimg headRadius" src="images/default-photo.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>
							<div class="listtit2"><span id="proTitle">国家级营养师</span><span id="proOffice">，教授</span><span id="proOrg">，北京体育大学</span><span id="proAddress"> | 北京</span></div>
							<div class="ellipsisSty listtit3" id="proRlist">国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师国家级营养师</div>
				<li>		
					<a class="proinfor clearfix" target="_blank"  href="resourceInfo.html">
						<div class="headblock floatL ResImgBox"><img id="proHead" class="resImg" src="images/default-resource.jpg"></div>
						<div class="media-body">
						<div class="mediaBody">
							<span class="listtit">资源名称</span>
							<p class="ellipsisSty listtit2">资源用途资源用途资源用途资源用途资源用途资源用途资源用途资源用途</p>
							<span class="listtit" ><span id="proName">章先生</span><em class="authicon authicon-cu" style="position:absolute;margin:4px 0 0 2px ;"></em></span>