JSP脚本显示在浏览器中

时间：2018-07-18 08:47:53

标签： html css jsp browser scriptlet

我正在为一个考试项目的网站工作，我试图以动态方式显示产品目录。 示例：数据库中有n个产品，我想创建n个“ catel” div元素，并为每行创建3个diplay元素。 我没有任何错误，但是在启动页面时，我仅看到一个单元格并且可见scriptlet代码，我该如何解决呢？ 

@CHARSET "UTF-8";

header {
	float:left;
	margin-top:0px;
	margin-left:0px;
	margin-right:-2px;
	padding:0px 0px 0px 0px;
	min-height:80px;
	height: 12%;
	width: 101%;
	background: white;
	opacity: 0.80;
	top:0%;
	position: fixed;
	overflow:hidden;
}

body{
	background-position: center center;
	background-repeat:  no-repeat;
	background-attachment: fixed;
	background-size:  cover;
	overflow:hidden;

}

table.head{
	width: 100%;
	overflow:hidden;
}

table.head tr{
	margin-left:0;
	margin-top:0;
	margin-bottom:0
}

table.head tr td.first{
  	width:40%;
}

table.head tr td.second{
	width:60%;
}



div.logo{
	position: relative;
	float: left;
	display: block;
	width:250px;
	height:75px;
	/*width: 32%;
	height: 20%;*/
	margin-top:0px;
	margin-bottom:0px;
	margin-left:2%;
	
}

div.logocell{
	display:none;
	margin-top:0px;
	margin-bottom:0px;
	position:absolute;
	right:10px;
}

.imgcell{
	width:80px;
	height:80px;
	
}

table.head tr td.first div.logo a img.logo{
	width:100%;
	height:100%;
}

div.topnav{
	overflow: hidden;
	text-decoration: none;
	display: block;
	padding-right:2.5%;
}

div.topnav a{
	border-radius: 25px;
	float: right;
    display: block;
    color: #180B30;
    text-align: center;
    text-decoration: none;
    font-size: 28px;
    padding-right: 2%;
    padding-left: 2%;
    margin-top: 5px;
    margin-bottom:5px;
}

div.topnav a:hover{
	background-color:#180B30;
	color:white;
}


/*smartphone*/
@media screen and (max-width: 400px) {
  table.head tr td div.topnav {display: none;}
  table.head tr td.first div.logo{display:none;}
  table.head tr td.first div.logocell{display:inline;}
  table.head tr td.second div.container{display:none;}
  table.head tr td.first div.container#ico{
    float: left;
    display: inline-block;
    margin-top:7%;
    position:relative;
    display:block;
  }
 section div.dropdown-content {
		float:left;
		margin-left:0px;
		padding-left:0pc;
	    display: none;
	    position: fixed;
	    left:0;
	    top:80px;
	    min-width:240px;
	    min-height: 300px;
	    width: 20%;
	    height:100%;
	    overflow: hidden;
	    z-index: 1;
	    background: white;
		opacity: 0.80;
  }
  div.container#frame{
    width:99%;
    height:79%;
    min-width:350px;
    left:0.5%;
    top:12.5;
    overflow:hidden;
  }
  footer div.social a.fa {
  	font-size:300%;
  	width:50%;
  	margin-right:5%;
  	margin-left:4%;
  	padding-right:15%;
  	text-align:center;
  }
  footer div.social{
  padding-right:15%;
  margin-left:5%;
  }
  section article#descrizione{
  margin-bottom:50%;
  }
  section article#colel{
  padding-bottom:25%;
  }
  section div#cont{
  margin:1% 1% 35% 1%;
  height:120%;
  width:98%;
  } 
  form#login h3{
  font-size:130%;
  }
  input[type=text], input[type=password]{
  width:70%;
  height:10%;
  }
  section form#login .button#entra{
  min-width:60px;
  width:10%;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  }
  section form#login{
  margin-top:25%;
  }
  section div#login{
	float:top;
	width:96%;
	height:75%;
	border-radius: 25px;
	margin:6% 2% 2% 2%;
  }

  section div#signup{
	float:bottom;
	width:96%;
	height:125%;
	border-radius: 25px;
	margin:5% 2% 35% 2%;
  }
  
  section div#signup form#reg button#registrati{
  width:40%;
  }
  section div#general{
  margin-top:3%;
  overflow:hidden;
  }
  section div#signup form#signup{
  margin:2% 0 2% 0;
  width:96%;
  padding:0;
  }
  section div#signup form#reg .button#registrati{
  width:130px;
  }
}

/*tablet*/
@media screen and (min-width:401px) and (max-width: 1200px) {
  table.head tr td div.topnav {display: none;}
  table.head tr td.first { width: 60%; height:12%;}
  table.head tr td.second { padding-right:2%;}
  table.head tr td.second div.container#ico{
    float: right;
    display: inline-block;
    margin-top:4%;
    margin-right:2%;
    position:relative;
    display:block;
  }
  div.container#frame{
    width:100%;
    height:75%;
    top:16.5%;
    overflow:hidden;
    left:0%;
  }
  footer div.social{
    padding-right:50px;
    margin-left:5%;
  }
  footer div.social a.fa {
  	font-size:300%;
  	width:80px;
  	margin-right:2%;
  	padding-right:50px;
  	text-align:center;
  }
  section article#descrizione{
  margin-bottom:30%;
  }
  section div#cont{
  margin:2% 2% 13% 2%;
  height:115%;
  max-height:650px;
  width:96%;
  }
  form#login h1{
  font-size:200%;
  }
  input[type=text], input[type=password]{
  width:70%;
  max-width:250px;
  height:10%;
  }
  section form#login .button#entra{
  min-width:60px;
  width:10%;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  }
  section div#general img{
  min-height:400px;
  z-ondex:-1;
  }
  section div#general div#button{
  margin-top:100px;
  float:left;
  margin-left:0;
  }
  section div#signup{
  height:75%;
  margin-top:2%;
  margin-bottom:10%;
  overflow:auto;
  }
  section div#signup form#reg{
  width:90%;
  
  }
}
/*computer*/
@media screen and (min-width: 1200px) {
  .topnav.responsive {position: relative;}
  .dropdown-content{display:none;}
  .show{display:none;}
  .topnav.responsive .container#ico {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.container#ico{
	background-color: transparent;
    display: none;
    cursor: pointer;
    width: 50px;
    height:50px;
    float: right;
    margin-top:4%;
    margin-bottom:4%;
    margin-right:4%;
}

.bar1, .bar2, .bar3 {
    width: 250%;/*35*/
    height: 15%;/*5*/
    background-color: #333;
    color: #180B30;
    margin: 30% 0%;
    transition: 0.4s;
    float: center;
    opacity:1;
    
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.dropdown-content {
	float:right;
    display: none;
    position: fixed;
    right:0;
    top:80px;
    min-width:240px;
    min-height: 300px;
    width: 20%;
    height:100%;
    overflow: hidden;
    z-index: 1;
    background: white;
	opacity: 0.80;
}

.dropdown-content a {
    color: #180B30;
    padding: 12px 16px;
    text-decoration: none;
    float:left;
    width:100%;
}
.dropdown-content a:hover{
	display:block;
	background-color:#180B30;
	color:white;
	opacity:0.70;
}

.show {
	display:block;
	overflow:hidden;
}

section{
	background-color:transparent;
	display:block;
	top:12%;
	width:100%;
	height:100%;
	position:absolute;
	margin:3px 0 0 0;	
	overflow:auto;
}

div#gallery{
	/*background-color:grey;*/
	width:100%;
	opacity:1;
	border:1px solid white;
	color:white;
	font-size:120%;
	position:relative;
	margin-top:5%;
	padding:0.5% 3%;
	margin-left:0;
	margin-right:0;
	margin-bottom:50%;
		
}

div#gallery div#catel{
	background-color: grey;
	opacity:0.9;
	border:1px solid white;
	padding:3% 5%;
	margin-bottom:5%;
	
}

div#gallery div#catel img{
	width: 100%; 
	height:300px;
	opacity:1;
}

div#gallery div#catel div#des{
	color:white;
	text-decoration: none;
}



footer{
	display:block;
	background: white;
	min-height:40px;
	max-height:40px;
	width:100%;
	bottom:0px;		 
	position:fixed;  
	opacity: 0.9;
	overflow:hidden;
}

footer div.social{
	width:100%;
	height:80%;
	display:inline;
	margin:0;
	padding:0;
	opacity:0.9;
}

footer div.social a.fa {
    font-size: 200%;
    width: 3%;
    height:50%;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    position:relative;
    opacity:0.9;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-facebook:hover {
	color:#3B5998;
	background:white;
}

.fa-twitter {
  background: #55ACEE;
  color:white;
}

.fa-twitter:hover{
	background:white;
	color:#55ACEE;
}
.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-google:hover{
	background:white;
	color:#dd4b39;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-linkedin:hover{
	background:white;
	color:#007bb5;
}
<%@ page language="java" import="java.util.ArrayList;" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>IROPLAS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\WEB-INF\style.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body
	background="C:\Users\bufal\workspace\ProgettoTSW\img\background.jpg">
	<header class="container-fluid">
	<table class="head">
		<tr>
			<td class="first">
				<div class="container" id="ico" onclick="menuCross(this)">
					<div class="bar1"></div>
					<div class="bar2"></div>
					<div class="bar3"></div>
				</div>
				<div class="logocell">
					<a href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Home.html">
						<img class="imgcell"
						src="C:\Users\bufal\workspace\ProgettoTSW\img\Logocell.png"
						alt="logo">
					</a>
				</div>
				<div class="logo">
					<a href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Home.html">
						<img class="logo"
						src="C:\Users\bufal\workspace\ProgettoTSW\img\logo_2.jpg"
						alt="logo">
					</a>
				</div>

			</td>
			<td class="second">
				<div class="topnav" id="topNav">
					<a
						href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Profilo.html">Profilo</a>
					<a
						href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Contatti.html">Contatti</a>
					<a
						href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Prodotti.hmtl">Prodotti</a>
					<a
						href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Collaborazioni.html">Collaborazioni</a>
					<a
						href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Azienda.html">Azienda</a>
				</div>
				<div class="container" id="ico" onclick="menuCross(this)">
					<div class="bar1"></div>
					<div class="bar2"></div>
					<div class="bar3"></div>
				</div>
			</td>
		</tr>
	</table>
	</header>
	<section>
	<div class="dropdown-content" id="dropDown">
		<h2>
			<a
				href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Azienda.html">Azienda</a>
			<a
				href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Collaborazioni.html">Collaborazioni</a>
			<a
				href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Prodotti.html">Prodotti</a>
			<a
				href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Contatti.html">Contatti</a>
			<a
				href="C:\Users\bufal\workspace\ProgettoTSW\WebContent\Profilo.html">Profilo</a>
		</h2>
	</div>

	<!-- barra filtri + ricerca --> 
	<%! ArrayList<Model.BProdotto> a = Model.BProdottoDAO.doRetrieveAll();%>
	<%!	int n = Model.BProdotto.getNumeroProdotti(a);%>

	<div id="gallery">
		<% do { %>
		<div class="row">
			<% do { %>
			<div class="col-md-4">
				<div id="catel">
					<img src="C:\\Users\\bufal\\Desktop\\2.jpg" alt="Lights">
					<div id="des">
						<h3 id="nome">NomeProdotto</h3>
						<p id="prezzo">Prezzo</p>
						<!-- carrello -->
					</div>
				</div>
			</div>
			<% } while (n%3!=0); %>
			
		</div>
		<% } while (n>0); %>
	</div>

	</section>

	<script>
		function menuCross(x) {
			x.classList.toggle("change");
			document.getElementById("dropDown").classList.toggle("show");
		}

		function menuOff() {
			var x = document.getElementById("topNav");
			if (x.className === "topnav") {
				x.className += " responsive";
			} else {
				x.className = "topnav";
			}
		}
	</script>
	<footer>
	<div class="social">
		<a href="#" class="fa fa-facebook"></a>
	</div>
	<div class="social">
		<a href="#" class="fa fa-twitter"></a>
	</div>
	<div class="social">
		<a href="#" class="fa fa-linkedin"></a>
	</div>
	<div class="social">
		<a href="#" class="fa fa-google"></a>
	</div>
	</footer>
</body>
</html>

浏览器视图

enter image description here

0 个答案:

没有答案
相关问题
最新问题