JSP脚本显示在浏览器中
我正在为一个考试项目的网站工作，我试图以动态方式显示产品目录。 示例：数据库中有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>
浏览器视图
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？