页面格式乱七八糟

页面格式乱七八糟

<%@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>

=========================================================

http://img1.sycdn.imooc.com//climg/601a8df009b86c7e14890543.jpg

http://img1.sycdn.imooc.com//climg/601a8dfb09ca681714620539.jpg

http://img1.sycdn.imooc.com//climg/601a8e020917c6be13190546.jpg

老师,是啥原因造成的?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,这里是因为同学将forEach放置位置有误,导致数据都在一个<tr>标签中 ,修改代码如下所示:

http://img1.sycdn.imooc.com//climg/601b7030093c62b306600163.jpg

http://img1.sycdn.imooc.com//climg/601b703b09382c5f02180084.jpg

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师