前端页面CSS样式存在报错
前台的页面有部分CSS好像没有生效报错如下
项目结构如下
index页面代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content=""/>
<!-- //Custom Theme files -->
<link href="${pageContext.request.contextPath}/front/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="${pageContext.request.contextPath}/front/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- js -->
<script src="${pageContext.request.contextPath}/front/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/bootstrap-3.1.1.min.js"></script>
<!-- //js -->
<!-- cart -->
<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/simpleCart.min.js"></script>
<!-- cart -->
<script type="text/javascript">
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="navbar-brand"><a href="">IMOOC</a></h1>
</div>
<!--navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/list.do" class="active">首页</a></li>
<!-- 此处分类应从数据库中读取 -->
<c:forEach items="${categoryList}" var="category">
<li class="dropdown">
<a href="/listById.do?id=${category.id}">${category.name}</a>
</li>
</c:forEach>
<%-- <li class="dropdown">--%>
<%-- <a href="">Java</a>--%>
<%-- </li>--%>
<%-- <li class="dropdown">--%>
<%-- <a href="">前端</a>--%>
<%-- </li>--%>
</ul>
</div>
</nav>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--//header-->
<!--banner-->
<div class="banner">
<div class="container" style="height: 300px">
<h2 class="hdng">IMOOC <span>图书</span></h2>
<p>读万卷书，行万里路</p>
<a href="#">SHOP NOW</a>
<!--
<div class="banner-text">
<img src="../../../images/tushu.jpeg" alt=""/>
</div>
-->
</div>
</div>
<!--//banner-->
<!--gallery-->
<div class="gallery">
<div class="container">
<div class="gallery-grids">
<c:forEach items="${pageInfo.list}" var="book">
<div class="col-md-3 gallery-grid " style="float:left">
<a href="#">
<img src="${book.imgPath}" class="img-responsive" alt=""/>
<div class="gallery-info">
<p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> view</p>
<a class="shop" href="/detail.do?id=${book.id}">SHOP NOW</a>
<div class="clearfix"></div>
</div>
</a>
<div class="galy-info">
<p style="size: 30px">${book.name}</p>
<div class="galry">
<div class="prices">
<h5 class="item_price">￥${book.price}</h5>
</div>
<div class="rating">
<c:forEach begin="1" end="${book.level}" var="i">
<span>☆</span>
</c:forEach>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</c:forEach>
</div>
<div align="right">
<!-- 分页部分可以参照MyBatis拦截器的例子-->
<div class="col-md-12 gallery-grid glry-two text-right">
<a href="/list.do?pageNum=1" style="color:#666666;"><span class="glyphicon glyphicon-backward"></span></a>
<c:if test="${pageInfo.pageNum!=1}">
<a href="/list.do?pageNum=${pageInfo.pageNum-1}" style="color:#666666;"><span class="glyphicon glyphicon-chevron-left"></span></a>
</c:if>
共${pageInfo.total}条 ${pageInfo.pageNum}/${pageInfo.pages}
<c:if test="${pageInfo.pageNum!=pageInfo.pages}">
<a href="/list.do?pageNum=${pageInfo.pageNum+1}" style="color:#666666;"><span class="glyphicon glyphicon-chevron-right"></span></a>
</c:if>
<a href="/list.do?pageNum=${pageInfo.pages}" style="color:#666666;"><span class="glyphicon glyphicon-forward"></span></a>
</div>
<%-- <div class="page">--%>
<%-- <div class="container">--%>
<%-- <ul>--%>
<%-- <li><a href="">首页</a></li>--%>
<%-- <li><a href="">上一页</a></li>--%>
<%-- <li><a href="">当前第1页</a></li>--%>
<%-- <li><a href="">下一页</a></li>--%>
<%-- <li><a href="">尾页</a></li>--%>
<%-- </ul>--%>
<%-- </div>--%>
</div>
</div>
</div>
</div>
<!--//gallery-->
<!--subscribe-->
<!--//subscribe-->
<!--footer-->
<!--//footer-->
<div class="footer-bottom">
<div class="container">
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div>
</div>
</body>
</html>
package com.imooc.ibook.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.imooc.ibook.biz.BookBiz;
import com.imooc.ibook.biz.CategoryBiz;
import com.imooc.ibook.biz.impl.BookBizImpl;
import com.imooc.ibook.biz.impl.CategoryBizImpl;
import com.imooc.ibook.entity.Book;
import com.imooc.ibook.entity.Category;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
public class DefaultController {
private CategoryBiz categoryBiz = new CategoryBizImpl();
private BookBiz bookBiz = new BookBizImpl();
//list.do获取所有的图书的数据
public void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Category> categoryList = categoryBiz.selectAll();
String pageNum = request.getParameter("pageNum");
if (pageNum == null) {
pageNum = "1";
}
PageHelper.startPage(Integer.parseInt(pageNum), 3);
List<Book> list = bookBiz.findAll();
PageInfo pageInfo = PageInfo.of(list);
request.setAttribute("pageInfo",pageInfo);
request.getServletContext().setAttribute("categoryList", categoryList);
request.getRequestDispatcher("/front/index.jsp").forward(request, response);
}
public void listById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
// List<Category> categoryList = categoryBiz.selectAll();
String pageNum = request.getParameter("pageNum");
if (pageNum == null) {
pageNum = "1";
}
PageHelper.startPage(Integer.parseInt(pageNum), 2);
List<Book> list = bookBiz.findById(id);
PageInfo pageInfo = PageInfo.of(list);
request.setAttribute("pageInfo",pageInfo);
// request.getServletContext().setAttribute("categoryList", categoryList);
request.setAttribute("id",id);
request.getRequestDispatcher("/front/list.jsp").forward(request, response);
}
}
list页面如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content=""/>
<!-- //Custom Theme files -->
<link href="${pageContext.request.contextPath}/front/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="${pageContext.request.contextPath}/front/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- js -->
<script src="${pageContext.request.contextPath}/front/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/bootstrap-3.1.1.min.js"></script>
<!-- //js -->
<!-- cart -->
<script src="${pageContext.request.contextPath}/front/js/simpleCart.min.js"></script>
<!-- cart -->
<script type="text/javascript">
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="navbar-brand"><a href="">IMOOC</a></h1>
</div>
<!--navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/list.do" class="active">首页</a></li>
<!-- 此处分类应从数据库中读取 -->
<c:forEach items="${categoryList}" var="category">
<li class="dropdown">
<a href="/listById.do?id=${category.id}">${category.name}</a>
</li>
</c:forEach>
<%-- <li class="dropdown">--%>
<%-- <a href="">Java</a>--%>
<%-- </li>--%>
<%-- <li class="dropdown">--%>
<%-- <a href="">前端</a>--%>
<%-- </li>--%>
</ul>
</div>
</nav>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--//header-->
<!--banner-->
<div class="banner">
<div class="container" style="height: 300px">
<h2 class="hdng">IMOOC <span>图书</span></h2>
<p>读万卷书，行万里路</p>
<a href="#">SHOP NOW</a>
<!--
<div class="banner-text">
<img src="../../../images/tushu.jpeg" alt=""/>
</div>
-->
</div>
</div>
<!--//banner-->
<!--gallery-->
<div class="gallery">
<div class="container">
<div class="gallery-grids">
<c:forEach items="${pageInfo.list}" var="book">
<div class="col-md-3 gallery-grid " style="float:left">
<a href="#">
<img src="${book.imgPath}" class="img-responsive" alt=""/>
<div class="gallery-info">
<p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> view</p>
<a class="shop" href="/detail.do?id=${book.id}">SHOP NOW</a>
<div class="clearfix"></div>
</div>
</a>
<div class="galy-info">
<p style="size: 30px">${book.name}</p>
<div class="galry">
<div class="prices">
<h5 class="item_price">￥${book.price}</h5>
</div>
<div class="rating">
<c:forEach begin="1" end="${book.level}" var="i">
<span>☆</span>
</c:forEach>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</c:forEach>
</div>
<div align="right">
<!-- 分页部分可以参照MyBatis拦截器的例子-->
<div class="col-md-12 gallery-grid glry-two text-right">
<a href="/listById.do?pageNum=1&id=${id}" style="color:#666666;"><span class="glyphicon glyphicon-backward"></span></a>
<c:if test="${pageInfo.pageNum!=1}">
<a href="/listById.do?pageNum=${pageInfo.pageNum-1}&id=${id}" style="color:#666666;"><span class="glyphicon glyphicon-chevron-left"></span></a>
</c:if>
共${pageInfo.total}条 ${pageInfo.pageNum}/${pageInfo.pages}
<c:if test="${pageInfo.pageNum!=pageInfo.pages}">
<a href="/listById.do?pageNum=${pageInfo.pageNum+1}&id=${id}" style="color:#666666;"><span class="glyphicon glyphicon-chevron-right"></span></a>
</c:if>
<a href="/listById.do?pageNum=${pageInfo.pages}?id=${id}" style="color:#666666;"><span class="glyphicon glyphicon-forward"></span></a>
</div>
<%-- <div class="page">--%>
<%-- <div class="container">--%>
<%-- <ul>--%>
<%-- <li><a href="">首页</a></li>--%>
<%-- <li><a href="">上一页</a></li>--%>
<%-- <li><a href="">当前第1页</a></li>--%>
<%-- <li><a href="">下一页</a></li>--%>
<%-- <li><a href="">尾页</a></li>--%>
<%-- </ul>--%>
<%-- </div>--%>
</div>
</div>
</div>
</div>
<!--//gallery-->
<!--subscribe-->
<!--//subscribe-->
<!--footer-->
<!--//footer-->
<div class="footer-bottom">
<div class="container">
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div>
</div>
</body>
</html>
31
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕阿满
2021-01-13 10:49:36
同学你好，从同学的截图中看到css样式是正确加载的，但是一些图片，字体样式文件等没有正确加载。建议同学检查一下download文件夹下是否如下三个图片，如果是上传的图片，请在发布后的target文件下的download文件下查找。
如下是字体样式文件，在同学的项目结构中，并没有看到字体样式文件夹fonts。建议同学可以去下载课程源码并复制fonts文件添加到同学的项目中，如：
祝学习愉快~
3. Java 数据库开发与实战应用
- 参与学习 人
- 提交作业 357 份
- 解答问题 8016 个
本阶段将带你学习MySQL数据库，JDBC接口，MyBatis框架等，带你掌握的数据的存放和管理。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星