<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>MyDay-我的美好一天</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->	
  	  <script src="js/jquery-1.11.3.js"></script>
  	
  </head>
  <style>
  *{
  margin: 0;
  padding: 0;
  }
  .newheader{
  height: 60px;
  background-color: #00CD66;
  width:1520px;
  position: fixed;
  z-index: 11;
  }
  .head-nav{
  height: 60px;
  color: yellow;
  position:relative;
  left:-20px;
  }
  .head-nav #header-nav{
  height: 60px;
  color: yellow;
  margin-top:0; 
  }
 .logo{
  
 } 
 .logo img{
 height: 60px;
 width: 60px;
 float: left;
 margin: auto 20px;
 position:relative;
 top:-15px;
 }
  .pr{
 float: left;
 margin: auto 10px;
  }
.pr a{
color: white;
text-decoration: none;
position:relative;
top:20px;

}
.login{
height:60px;
}
.color-white{
margin: 10px 10px 10px 10px;
}
.mr5{
position:relative;
bottom: -20px;
}
body{
background-repeat: no-repeat;
background-size:cover;
background-position: 0 60px;
height:100%;

}
.homeback{
z-index: -1;

position:absolute;
width:1520px;
height:2440px;
top:60px;
}
  </style>
  
  
  
  <body>
  <img  class="homeback" alt="" src="./img/home.png" style="z-index: -1">
  	<div class="newheader">
  		<div class="head-nav pr" id="head-navpre1">
			<ul id="header-nav">
					<a class="logo">
						<img alt="" src="./img/sLogo.png"  >
					</a>
					<li class="pr" style="display: block;">
						<a href="./market.jsp" >跳蚤市场</a>
					</li>
					<li class="pr" style="display: block;">
						<a href="./404.jsp" >校园超市</a>
					</li>
					<li class="pr" style="display: block;">
						<a href="./LostAndFound.jsp">失物招领</a>
					</li>
					<li class="pr" style="display: block;">
					<a href="./404.jsp">资源共享</a>
					</li>
					<li class="pr" style="display: block;">
					<a href="./404.jsp">兴趣论坛</a>
					</li>
			</ul>
		</div>
		<span class="login pr" style="float: right;">
				<a href="./1.jsp"   class="mr5 color-white" >登录</a>
				<em class="vertical-line" ></em>
				<a href="/register" class="mr5 color-white">注册</a>
		</span>
	</div>
	
	
	
	<!-- 以上导航 -->
	
	
	
	
	<style>
	*::selection{
	background: none;
	}
	#box ul li{
		margin: 0;
		padding:0;
		list-style: none;
		text-align: center;
		line-height: 270px;
		font-size: 30px;
	}
	#box{
	width:650px;
	height:320px;
	position:relative;
	bottom: -180px;
	}
	#box li{
		width:100%;
		height:100%;
		position:absolute;
		opacity:0;
		transition:1s;
		
	}
	#box ul li:FIRST-CHILD {
		opacity:1;
    }
    .btn{
    	witdh:80px;
    	height:30px;
    	background: rgba(0,0,0,0);
    	color:#fff;
    	top:135px;
    	position:absolute;
    	text-align: center;
    	line-height: 30px;
    	cursor: pointer;
    }
    #nextt{
    	right:0;
    }
    .btn:HOVER {
		background: rgba(0,0,0,0.05);
    }
    .btn:ACTIVE {
		background: rgba(0,0,0,0.5);
}

.shouye{
	height:500px;
	position: relative;
	width:1520px;
}
.sub{
	width:100px;
	height:35px;
	border-radius:7px;
	border: none;
	background: #FFB90F;
	color: white;
	font-size:120%;	
	letter-spacing: 4px;
	display: inline-block;
	text-align:center;
	vertical-align: middle;
	margin-top: 20px;
	padding-top:5px;
	outline: none;
	position: relative;
	top:180px;
	left:250px;
	text-decoration: none;
  }
.sub:HOVER{
  background: #EEAD0E;
  }
  .sub:ACTIVE{
  background: #FFB90F;
  }
	</style>
	
	
	<div class="shouye">
	<a href="./1.jsp"  class="sub" >登录</a>
	<div id="box">
		<ul>
			<li class="ll" id=0>美好的一天从MyDay开始</li>
			<li class="ll"  id=1>校园超市为你方便购物</li>
			<li class="ll"  id=2>失物招领让你的宝贝回家</li>
			<li class="ll"  id=2>资源共享丰富你的知识</li>
			<li class="ll"  id=2>跳蚤市场轻松解决你不需要的物品</li>
		</ul>
		<div class="btn"  id="prevv" onclick="clickprev()">prev</div>
		<div class="btn"  id="nextt" onclick="clicknext()">next</div>
	</div>
	</div>
	<script type="text/javascript">
		var ll = document.getElementsByClassName("ll");
		var pre = document.getElementById("prevv");
		var next = document.getElementById("nextt");
		var index = 0;
		var int;

        //定时器
		
		
		int=self.setInterval("wrapernext()",3000);
		
		
		
		//3秒后开始定时
		//setTimeout("SetInterval()",3000);

		
		function wrapernext(){
		index++;
		if(index == ll.length) index=0;
		console.log(ll.length);
		for(var i=0;i<ll.length;i++){
		ll[i].style.opacity=0;
		}
		ll[index].style.opacity=1;
  		};
		
		function clicknext(){
		window.clearInterval(int) ;
		int=null;
		wrapernext();
		if(int==null){
		int=self.setInterval("wrapernext()",3000);
		}
		};
		
		
	    function wraperprev(){
		index--;
		if(index == -1) index=ll.length-1;
		console.log(ll.length);
		for(var i=0;i<ll.length;i++){
		ll[i].style.opacity=0;
		}
		ll[index].style.opacity=1;
		};
		
		
		function clickprev(){
	    window.clearInterval(int) ;
		int=null;
		wraperprev();
		if(int==null){
		int=self.setInterval("wrapernext()",3000);
		}
		}
		
		
		
		
	</script>
	
	
	<!-- 以上是主题介绍 -->
	
	<!-- 
	<style>
	.adv{
	: 4px solid yellow;
	position: relative;
	height: 600px;
	}
	.circle{
	width:150px;
	height:150px;
	border-radius:50%;
	background: #48D1CC; 
	position: relative;
	float:left;
	color:white;
	line-height:120px;
	display:inline-block;
	text-align: center;
  	}
	.cir-one,.cir-one+a{
	left:150px;
	}
	.cir-two,.cir-two+a{
	right:-700px;
	}
	.cir-three,.cir-three+a{
	left:350px;
	}
	.cir-four,.cir-four+a{
	right:-1200px;
	}
	.good{
	: 4px solid yellow;
	float:left;
	color:#ADD8E6;
	position:relative;
	display:inline-block;
	}
	.inline{
	height:150px;
	padding: 0px;
	position: relative;
	}
	
	</style>
	
	
	<div class="adv">
		<div style="border: 1px solid red;" class="inline">
		<div class="circle cir-one">跳蚤市场</div>
		<a class="good">
		很好不错特别棒
		</a>
		</div>
 		<div style="border: 1px solid red;" class="inline">
		<div class="circle cir-two">校园超市</div>
		<a class="good">
		很好不错特别棒
		</a>
		</div>
		<div style="border: 1px solid red;" class="inline">
		<div class="circle cir-three">失物招领</div>
		<a class="good">
		很好不错特别棒
		</a>
		</div>
		<div style="border: 1px solid red;" class="inline">
		<div class="circle cir-four">资源共享</div>
		<a class="good">
		很好不错特别棒
		</a>
		</div>		
		</div>
		
	</div>
	
	 -->
	
	
	





	<!-- 	background-image:url('./img/timg.jfif');
	 -->

	
	<!-- 以下功能介绍 -->
	
	<style>
	.backch{
	width:1520px;
	height:620px;
	position: relative;
	bottom: -830px;
	background-image: url('./img/hover.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	}
	.homepage_introduce{
	
	position: relative;
	bottom: -950px;
	width:1520px;
	height:360px;    	
	
	}
	
	.active{
	width: 258.4px;
	height: 300px;
	position: relative;
	display: inline-block;
	vertical-align: top;
	background-size:contain;
	background-repeat:no-repeat;
	z-index:2;
	border-radius:10px; 
	margin-top: 30px;
	margin-right: 20px;
	}
	.action img{
   width: 258.4px;
	height: 300px;
    position: relative;
    z-index: -1;
	}
	
	/*
	.active:HOVER{
    background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100% );
    background:rgba(,,,0.1);
    color:white;
    height: 320px;
    margin-top: 20px;
}*/
	.homepage_introduce ul{
	list-style-type:none;
	padding-top: 0;
	position:relative;
	text-align: center;
	display: inline-block;
	height:360px;
	width:1520px;
	}
	.colorWhite{
	text-decoration: none;
	
	}
	
	.active div{
	visibility: hidden;
	}
	
	</style>
	
	<div class="backch">
	<div class="homepage_introduce"  >
	
   <ul>
  <li class="active one" onmouseenter="onmove(this,'hover1') " onmouseleave="onout(this,'hover1')"  >
  	<div id="hover1" style="height:100%  ;">
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
  <li class="active" onmouseenter="onmove(this,'hover2') " onmouseleave="onout(this,'hover2')"  >
    <div id="hover2" style="height:100%  ;">
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
  <li class="active" onmouseenter="onmove(this,'hover3') " onmouseleave="onout(this,'hover3')"  >
   <div id="hover3" style="height:100%  ;">
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
   <li class="active" onmouseenter="onmove(this,'hover4') " onmouseleave="onout(this,'hover4')"  >
   <div id="hover4" style="height:100%  ;">
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
  
  <li class="active" onmouseenter="onmove(this,'hover') " onmouseleave="onout(this,'hover')"  ">
    <div id="hover" style="height:100%  ;">
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
  </ul>
  
</div>
  </div>
  
  
  
  
  <script type="text/javascript">

 
  function onmove(x,ho){
  x.style.visibility="hidden";  
  document.getElementById(ho).style.visibility="visible";
  
}
 function onout(x,ho){
  x.style.visibility="visible";
  document.getElementById(ho).style.visibility="hidden";
  
}

  
  </script>
  
  <!--
  
  <ul >
   <li class="active">
    <div>
      <p class="f18 floatingName"><a href="https://www.trustie.net" class="colorWhite">TrustieForge</a></p>
      <p class="f16 mb20"></p>
      <p class="f12 mb30 break_full_word floatingContent">开源创作与软件生产相结合，支持大规模群体开展软件协同创新活动。</p>
    </div>
  </li>
  <li class="active">
    <div>
      <p class="f18 floatingName"><a href="http://codepedia.trustie.net/" class="colorWhite">Codepedia</a></p>
      <p class="f16 mb20">众包标注平台</p>
      <p class="f12 mb30 break_full_word floatingContent">也为软件领域积累丰富的自然语言标注。</p>
    </div>
  </li>
   <li class="active">
    <div>
      <p class="f18 floatingName"><a href="https://www.trustie.net" class="colorWhite">TrustieForge</a></p>
      <p class="f16 mb20"></p>
      <p class="f12 mb30 break_full_word floatingContent"></p>
    </div>
  </li>
  <li class="active">
    <div>
      <p class="f18 floatingName"><a href="http://ossean.trustie.net/" class="colorWhite">OSSEAN</a></p>
      <p class="f16 mb20">资源共享平台</p>
      <p class="f12 mb30 break_full_word floatingContent">高效汇聚全球开源开放的软件工程大数据，持续分析与评估开源生态发展态势</p>
    </div>
  </li>
   <li class="active">
    <div>
      <p class="f18 floatingName"><a href="https://www.trustie.net" class="colorWhite">TrustieForge</a></p>
      <p class="f16 mb20"></p>
      <p class="f12 mb30 break_full_word floatingContent"></p>
    </div>
  </li>
</ul>
  -->
  </div>
	
	
	
  </body>
</html>

