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.
627 lines
12 KiB
627 lines
12 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>My JSP 'buy.jsp' starting page</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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<style>
|
|
*::selection{
|
|
background: none;
|
|
}
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body{
|
|
width:1520px;
|
|
position:relative;
|
|
background: #F5F5F5;
|
|
}
|
|
.back{
|
|
width:1520px;
|
|
z-index: -1;
|
|
position: absolute;
|
|
|
|
}
|
|
.newheader{
|
|
height: 60px;
|
|
background-color: #00CD66;
|
|
width:1520px;
|
|
position: fixed;
|
|
z-index: 110;
|
|
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%;
|
|
|
|
}
|
|
</style>
|
|
|
|
<img class="back" alt="" src="./img/tzsc.png">
|
|
|
|
|
|
<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="/paths" >跳蚤市场</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/courses" >校园超市</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/shixuns">失物招领</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/competitions">资源共享</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/moop_cases">兴趣论坛</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" class="mr5 color-white">注册</a>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 以上导航 -->
|
|
|
|
|
|
|
|
|
|
<!-- 以下两大类别 -->
|
|
|
|
|
|
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.twobord{
|
|
position:absolute;
|
|
height: 100px;
|
|
top:600px;
|
|
width:1520px;
|
|
}
|
|
.twotypes{
|
|
position:absolute;
|
|
width:1000px;
|
|
height: 100px;
|
|
left:260px;
|
|
text-align: center;
|
|
}
|
|
.chose{
|
|
height:100px;
|
|
float:left;
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
.chose1{
|
|
width:400px;
|
|
z-index:11;
|
|
left:50px;
|
|
cursor: pointer;
|
|
}
|
|
.chose2{
|
|
width:370px;
|
|
right: 50px;
|
|
position: absolute;
|
|
z-index: 11;
|
|
cursor: pointer;
|
|
}
|
|
.chose div{
|
|
position:absolute;
|
|
width: 300px;
|
|
height:100px;
|
|
display: inline-block;
|
|
float: left;
|
|
left:100px;
|
|
background: rgba(5,5,5,0);
|
|
}
|
|
.chose img{
|
|
position:absolute;
|
|
width:100px;
|
|
display: inline-block;
|
|
left:0px;
|
|
float: left;
|
|
top:0px;
|
|
height:100px;
|
|
|
|
}
|
|
.chose p{
|
|
text-align: left;
|
|
text-indent: 10px;
|
|
z-index: 10;
|
|
}
|
|
.chose div p:FIRST-CHILD {
|
|
margin-top: 10px;
|
|
font-size: 30px;
|
|
} .chose div p:LAST-CHILD{
|
|
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="twobord">
|
|
<div class="twotypes">
|
|
<div class=" chose chose1" onclick="tiao()">
|
|
<img alt="" src="./img/look.png" >
|
|
<div>
|
|
<p > 查看求购</p>
|
|
<p >逛市场可以赚大钱哦~</p>
|
|
</div>
|
|
</div>
|
|
<div class="chose chose2" onclick="tiao()">
|
|
<img alt="" src="./img/fabu.png">
|
|
<div>
|
|
<p>发布闲置</p>
|
|
<p>逛市场可以赚大钱哦~</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function tiao(){
|
|
window.location.href='http://www.baidu.com';
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- 以下类别导航 -->
|
|
|
|
<style>
|
|
.bord-nav{
|
|
border-radius:7px;
|
|
position: relative;
|
|
top:150px;
|
|
height:60px;
|
|
width:1070px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
}
|
|
#buy-nav{
|
|
position:relative;
|
|
padding:10px auto;
|
|
height:60px;
|
|
width:1070px;
|
|
}
|
|
.type{
|
|
float: left;
|
|
margin-left: 100px;
|
|
position: relative;
|
|
top:35%;
|
|
}
|
|
.type a{
|
|
font-size: 20px;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div style="position: relative;">
|
|
<div class="bord-nav">
|
|
<ul id="buy-nav">
|
|
|
|
<li class="type" style="display: block;">
|
|
<a href="" >书籍</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="" >美妆</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="">宠物粮</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="">笔记</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="">手机</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="">手机</a>
|
|
</li>
|
|
<li class="type" style="display: block;">
|
|
<a href="">手机</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 商品显示 -->
|
|
<style>
|
|
.homepage_introduce{
|
|
top:320px;
|
|
position: relative;
|
|
width:1100px;
|
|
height:auto;
|
|
margin: 0 auto;
|
|
padding: 0 0;
|
|
top:160px;
|
|
}
|
|
|
|
.active{
|
|
width: 207px;
|
|
height: 300px;
|
|
position: relative;
|
|
left:-20px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background:white;
|
|
background-size:contain;
|
|
background-repeat:no-repeat;
|
|
z-index:2;
|
|
border-radius:5px;
|
|
margin-left: 0px;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
|
|
.active:HOVER{
|
|
height: 300px;
|
|
margin-top: -5px;
|
|
}
|
|
.homepage_introduce ul{
|
|
list-style-type:none;
|
|
padding-top: 0;
|
|
position:relative;
|
|
display: inline-block;
|
|
height:auto;
|
|
width:1150px;
|
|
margin-bottom: 10px;
|
|
left:30px;
|
|
}
|
|
.colorWhite{
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- <li class="active" >
|
|
<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" >
|
|
<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" >
|
|
<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" >
|
|
<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>
|
|
|
|
<ul >
|
|
<li class="active one" >
|
|
<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" >
|
|
<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" >
|
|
<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" >
|
|
<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" >
|
|
<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>
|
|
-->
|
|
|
|
|
|
|
|
<!--
|
|
|
|
<div class="homepage_introduce" >
|
|
|
|
<ul class="exam">
|
|
<li class="active one" v-for="item in items" >
|
|
<div id="hover1" style="height:100% ;">
|
|
{{item}}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="homepage_introduce" >
|
|
|
|
<ul class="exam">
|
|
<%! int id[]={0,1,2,3,4,5,6,7,8,9}; %>
|
|
|
|
<%
|
|
|
|
for(int i=0;i<id.length;i++ ){
|
|
|
|
%>
|
|
|
|
<li class="active one" onclick="act(<%=id[i]%>)">
|
|
<div id="hover1" style="height:100% ;">
|
|
<%=id[i]%>
|
|
</div>
|
|
</li>
|
|
|
|
<%
|
|
}
|
|
|
|
%>
|
|
</ul>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function act(id){
|
|
console.log(id);
|
|
//这个就是跳转，在后面加参数
|
|
window.location.href='./HelloServlet?id='+id;
|
|
|
|
}
|
|
|
|
|
|
var exam = new Vue({
|
|
el: '.exam',
|
|
data: {
|
|
items:0
|
|
},
|
|
/*methods:{
|
|
nextp:function(){
|
|
console.log(000);
|
|
|
|
while(i=9)
|
|
i--;
|
|
this.items[i]=this.items[i]+10;
|
|
console.log(i);
|
|
|
|
}
|
|
}*/
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
.pagination{
|
|
position:relative;
|
|
text-align: center;
|
|
top:150px;
|
|
margin-bottom: 20px;
|
|
z-index: 2;
|
|
}
|
|
.pagination ul li{
|
|
position: relative;
|
|
display: inline-block;
|
|
border-radius:50%;
|
|
width:25px;
|
|
height:25px;
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
.pagination ul li a{
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
#firstpage{
|
|
background: #00CD66;
|
|
}
|
|
#a{
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<div>
|
|
<div class="pagination">
|
|
<ul class="on">
|
|
<li class="prev"><a><</a></li>
|
|
<li class="li" id="firstpage"><a id="a">1</a></li>
|
|
<li class="li"><a>2</a></li>
|
|
<li class="li"><a>3</a></li>
|
|
<li class="li"><a>4</a></li>
|
|
<li class="next" ><a>></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(".pagination .li").click(function(){
|
|
var a = $(this).html();
|
|
console.log(a);
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
$(this).attr('id','firstpage');
|
|
$("#firstpage a").attr('id','a');
|
|
|
|
})
|
|
|
|
|
|
$(".pagination .prev").click(function(){
|
|
|
|
|
|
if($("#firstpage").children().html()!='1')
|
|
{
|
|
var pre = $("#firstpage").prev();
|
|
var prea = $("#firstpage").prev().children();
|
|
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
pre.attr('id','firstpage');
|
|
prea.attr('id','a');
|
|
}
|
|
})
|
|
|
|
$(".pagination .next").click(function(){
|
|
|
|
|
|
if($("#firstpage").children().html()!='4')
|
|
{
|
|
var pre = $("#firstpage").next();
|
|
var prea = $("#firstpage").next().children();
|
|
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
pre.attr('id','firstpage');
|
|
prea.attr('id','a');
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|