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

5 years ago
<%@ 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>