You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
750 lines
16 KiB
750 lines
16 KiB
<%@ 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">
|
|
-->
|
|
|
|
</head>
|
|
<style>
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.newheader{
|
|
height: 60px;
|
|
background-color: #00CD66;
|
|
width:1520px;
|
|
position: fixed;
|
|
z-index: 11;
|
|
top:0;
|
|
}
|
|
.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:1431px;
|
|
top:60px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<body>
|
|
<img class="homeback" alt="" src="./img/p1.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/buy.jsp" >跳蚤市场</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="./404.jsp" >校园超市</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="./LostAndFound/found.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="./Login/login.jsp" class="mr5 color-white" >登录</a>
|
|
<em class="vertical-line" ></em>
|
|
<a href="./Register/register.jsp" 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{
|
|
text-decoration:none;
|
|
text-align:center;
|
|
width:100px;
|
|
height:35px;
|
|
padding-top:5px;
|
|
border-radius:7px;
|
|
border: none;
|
|
background: #FFB90F;
|
|
color: white;
|
|
font-size:120%;
|
|
letter-spacing: 4px;
|
|
display: block;
|
|
vertical-align: bottom;
|
|
margin-top: 20px;
|
|
outline: none;
|
|
position: relative;
|
|
top:180px;
|
|
left:250px;
|
|
}
|
|
.sub:HOVER{
|
|
background: #EEAD0E;
|
|
}
|
|
.sub:ACTIVE{
|
|
background: #FFB90F;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="shouye">
|
|
<a href="./Login/login.jsp" type="button" 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>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.rain{
|
|
position: relative;
|
|
top:690px;
|
|
width:1520px;
|
|
height:2px;
|
|
}
|
|
.rain ul li {
|
|
width:302px;
|
|
height:400px;
|
|
position: relative;
|
|
float:left;
|
|
display: block;
|
|
margin: 0;
|
|
top:50px;
|
|
}
|
|
.rain ul li img{
|
|
width:302px;
|
|
position: relative;
|
|
z-index: -5;
|
|
top:-100px;
|
|
transition: all 0.4s ease-in-out;
|
|
transition-timing-function:cubic-bezier(0.05,0.3,0.4,0.2);
|
|
}
|
|
|
|
|
|
|
|
|
|
.text{
|
|
position:relative;
|
|
width:302px;
|
|
bottom: 0px;
|
|
height:400px;
|
|
}
|
|
|
|
.text:HOVER img{
|
|
top:0px;
|
|
}
|
|
.text h1,h2,p{
|
|
position:relative;
|
|
bottom: 400px;
|
|
color: white;
|
|
width:302px;
|
|
}
|
|
|
|
.text h2{
|
|
position:relative;
|
|
transform: translateX(-130px);
|
|
transition: all 0.4s ease-out;
|
|
opacity:0;
|
|
transition-delay: 0.4s
|
|
}
|
|
.text:HOVER h2{
|
|
transform: translateX(0px);
|
|
opacity:1;
|
|
}
|
|
|
|
.text p{
|
|
position:relative;
|
|
transform: translateY(130px);
|
|
transition: all 0.4s ease-out;
|
|
opacity:0;
|
|
transition-delay: 0.4s
|
|
}
|
|
.text:HOVER p{
|
|
transform: translateX(0px);
|
|
opacity:1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="rain">
|
|
<ul>
|
|
<li>
|
|
<div class="text" onclick="window.location.href='./Market/buy.jsp';">
|
|
<img alt="" src="./img/rainbow1.png">
|
|
|
|
<h1>跳蚤市场</h1>
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="text" onclick="window.location.href='./LostAndFound/found.jsp';">
|
|
<img alt="" src="./img/rainbow2.png">
|
|
<h1>失物招领</h1>
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="text" onclick="window.location.href='./404.jsp';">
|
|
<img alt="" src="./img/rainbow3.png">
|
|
<h1>校园超市</h1>
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="text" onclick="window.location.href='./404.jsp';">
|
|
<img alt="" src="./img/rainbow4.png">
|
|
<h1>兴趣论坛</h1>
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="text" onclick="window.location.href='./404.jsp';">
|
|
<img alt="" src="./img/rainbow5.png">
|
|
<h1>资源共享</h1>
|
|
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
|
|
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 小组介绍 -->
|
|
|
|
<style>
|
|
.team {
|
|
position:relative;
|
|
z-index:-6;
|
|
width:1520px;
|
|
top:-1050px;
|
|
}
|
|
.team img{
|
|
position:relative;
|
|
z-index:-6;
|
|
width:1520px;
|
|
}
|
|
</style>
|
|
|
|
<div class="team">
|
|
<img alt="" src="./img/p3.png">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 以下功能介绍 -->
|
|
|
|
<!--
|
|
<style>
|
|
.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-image: url('./img/one.png');
|
|
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="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>
|
|
|
|
|
|
|
|
-->
|
|
<!--
|
|
<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>
|