页面格式乱七八糟
<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>油画列表</title>
<link rel="stylesheet" type="text/css" href="css\list.css">
</head>
<body>
<div class="container">
<fieldset>
<legend>油画列表</legend>
<div style="height: 40px">
<a href="#" class="btn-button">新增</a>
</div>
<!-- 油画列表 -->
<table cellspacing="0px">
<thead>
<tr style="width: 150px;">
<th style="width: 100px">分类</th>
<th style="width: 150px;">名称</th>
<th style="width: 100px;">价格</th>
<th style="width: 400px">描述</th>
<th style="width: 100px">操作</th>
</tr>
</thead>
<tr>
<c:forEach items="${pageModel.pageDate }" var="painting">
<c:choose>
<c:when test="${painting.category==1}">
<td>现实主义</td>
</c:when>
<c:when test="${painting.category==2}">
<td>抽象主义</td>
</c:when>
<c:otherwise>
<td>未知的类型</td>
</c:otherwise>
</c:choose>
<td>${painting.pname }</td>
<td><fmt:formatNumber pattern="¥0.00" value="${painting.price }"></fmt:formatNumber></td>
<td>${painting.description }</td>
<td>
<a class="oplink" href="#">预览</a>
<a class="oplink" href="#">修改</a>
<a class="oplink" href="#">删除</a>
</td>
</c:forEach>
</tr>
</table>
<!-- 分页组件 -->
<ul class="page">
<li><a href="/management?method=list&p=1">首页</a></li>
<li><a href="/management?method=list&p=${pageModel.hasPreviousPage?pageModel.page-1:1 }">上页</a></li>
<c:forEach begin="1" end="${pageModel.totalPages }" var="pon" step="1">
<li ${pon==pageModel.page?"class='active'":""}><a href="/management?method=list&p=${pon }">${pon }</a></li>
</c:forEach>
<li><a href="/management?method=list&p=${pageModel.hasNextPage?pageModel.page+1:pageModel.totalPages }">下页</a></li>
<li><a href="/management?method=list&p=${pageModel.totalPages }">尾页</a></li>
</ul>
</fieldset>
</div>
</body>
</html>
========================================================
package com.imooc.mgallery.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.imooc.mgallery.eneity.PageModel;
import com.imooc.mgallery.service.PatitingService;
/**
* Servlet implementation class managementController
*/
@WebServlet("/management")
public class managementController extends HttpServlet {
private PatitingService patitingService = new PatitingService();
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public managementController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String method = request.getParameter("method");
if(method.equals("list")) {
this.list(request,response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
public void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String r=request.getParameter("r");
String p=request.getParameter("p");
if(r==null) {
r="6";
}
if(p==null) {
p="1";
}
PageModel pageModel=patitingService.pagination(Integer.parseInt(p),Integer.parseInt(r));
request.setAttribute("pageModel", pageModel);
request.getRequestDispatcher("/WEB-INF/jsp/list.jsp").forward(request, response);
}
}
=========================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>门户数据管理平台</title>
<style>
body{
margin: 0 auto;
}
a{
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.pg_header{
position: fixed;
top: 0;
width: 100%;
height: 48px;
background-color: lightseagreen;
color: white;
z-index: 10;
}
.pg_header .logo{
height: 48px;
width: 200px;
text-align: center;
color: white;
}
.pg_header .logo a img{
height: 48px;
width: 200px;
cursor: pointer;
}
.pg_header .person_info{
position: relative;
height: 48px;
width: 160px;
/*text-align: center;*/
}
.pg_header .person_info img{
border: 0;
height: 48px;
width: 50px;
/*使用border-radius可以定义边框的圆角程度*/
border-radius: 50%;
}
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: lightseagreen;
top: 50px;
z-index: 20;
display: none;
}
.pg_header .person_info .info a{
display: block;
color: white;
padding: 5px;
}
.pg_header .person_info:hover .info{
display: block;
}
.pg_header .icons{
line-height: 48px;
padding: 0 20px 0 5px;
}
.pg_header .icons:hover{
background-color: lightseagreen;
}
.pg_header .icons span{
padding: 1px 5px;
line-height: 1px;
border-radius: 50%;
background-color: red;
font-size: 12px;
}
.pg_content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 300px;
border:0px;
border-right: 1px solid #ccc;
}
.pg_content .content{
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 302px;
overflow: auto;
min-width: 980px;
z-index: 8;
border:0px;
overflow: hidden;
}
.menu_item{
display: block;
padding: 10px 20px;
border-bottom: 1px solid #ccc;
font-size: 20px;
color: #666666;
}
.menu_item:hover{
color: white;
background: lightseagreen;
}
</style>
</head>
<body>
<!-- 顶端导航栏 -->
<div class="pg_header">
<!-- Logo与名称 -->
<div class="logo left">
<a href="javascript:void(0)" target="_blank">
<img src="image/logo_1.png">
</a>
</div>
<!-- 用户头像与菜单 -->
<div class="person_info right" style="vertical-align: top;" >
<img src="image/head.png">
<span style="line-height: 50px;vertical-align: top;">小企鹅</span>
<div class="info">
<a href="javascript:void(0)">我的信息</a>
<a href="javascript:void(0)">修改密码</a>
<a href="javascript:void(0)">注销</a>
</div>
</div>
<div class="icons right">
<i class="far fa-bell"></i>
</div>
</div>
<div class="pg_content">
<!-- 左侧功能区菜单 -->
<div class="menu">
<a href = "/management?method=list" class="menu_item" target="ifcontent">油画列表</a>
<a href = "#" class="menu_item" target="ifcontent">新增作品</a>
</div>
<!-- 主体框架 -->
<div class="content">
<iframe name="ifcontent" style="width:100%;height:100%;overflow-y: hidden;border:0px;min-width: 800px;" src="/management?method=list"></iframe>
</div>
</div>
</body>
</html>
=========================================================
老师,是啥原因造成的?
正在回答
同学你好,这里是因为同学将forEach放置位置有误,导致数据都在一个<tr>标签中 ,修改代码如下所示:
祝学习愉快~
- 参与学习 人
- 提交作业 9400 份
- 解答问题 16556 个
综合就业常年第一,编程排行常年霸榜,无需脱产即可学习,北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员,不需要基础,只要你有梦想,想高薪
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星