Fiz a importação dos arquivos, a modificação e adaptação deles para a visualização do detalhe vindo de um livro, seguindo abaixo:
detalhe.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<c:url value="/" var="contextPath" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="icon" href="//cdn.shopify.com/s/files/1/0155/7645/t/177/assets/favicon.ico?11981592617154272979"
type="image/ico" />
<link href="https://plus.googlecom/108540024862647200608" rel="publisher" />
<title>${produto.titulo }-Casa do Código</title>
<link href="${contextPath}resources/css/cssbase-min.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' />
<link href="${contextPath}resources/css/fonts.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/fontello-ie7.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/fontello-embedded.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/fontello.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/layout-colors.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/responsive-style.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/guia-do-programador-style.css" rel="stylesheet" type="text/css" media="all" />
<link href="${contextPath}resources/css/produtos.css" rel="stylesheet" type="text/css" media="all" />
<link rel="canonical" href="http://www.casadocodigo.com.br/" />
</head>
<body>
<header id="layout-header">
<div class="clearfix container">
<a href="/" id="logo"> </a>
<div id="header-content">
<nav id="main-nav">
<ul class="clearfix">
<li><a href="/carrinho" rel="nofollow">Carrinho</a></li>
<li><a href="/pages/sobre-a-casa-do-codigo" rel="nofollow">Sobre Nós</a></li>
<li><a href="/pages/perguntas-frequentes" rel="nofollow">Perguntas Frequentes</a></li>
</ul>
</nav>
</div>
</div>
</header>
<nav class="categories-nav">
<ul class="container">
<li class="category"><a href="http://www.casadocodigo.com.br">Home</a></li>
<li class="category"><a href="/collections/livros-de-agile"> Agile </a></li>
<li class="category"><a href="/collections/livros-de-front-end"> Front End </a></li>
<li class="category"><a href="/collections/livros-de-games"> Games </a></li>
<li class="category"><a href="/collections/livros-de-java"> Java </a></li>
<li class="category"><a href="/collections/livros-de-mobile"> Mobile </a></li>
<li class="category"><a href="/collections/livros-desenvolvimento-web"> Web </a></li>
<li class="category"><a href="/collections/outros"> Outros </a></li>
</ul>
</nav>
<article id="${produto.id }">
<header id="product-highlight" class="clearfix">
<div id="product-overview" class="container">
<img width="280px" height="395px"
src="http://cdn.shopify.com/s/files/1/0155/7645/products/css-eficiente-featured_large.png?v=1435245145"
class="product-featured-image" />
<h1 class="product-title">${produto.titulo }</h1>
<p class="product-author">
<span class="product-author-link"> </span>
</p>
<p class="book-description">${produto.descricao }</p>
</div>
</header>
<section class="buy-options clearfix">
<form action="/carrinho/add" method="post" class="container">
<ul id="variants" class="clearfix">
<c:forEach items="${produto.precos }" var="preco">
<input type="hidden" value="${produto.id }" name="produtoId"/>
<li class="buy-option">
<label class="variant-label" for="product-variant-9720393823">${preco.tipo}
<input type="radio" name="tipo" class="variant-radio"
value="${preco.tipo}" checked="checked" />
</label>
<small class="compare-at-price">R$ 39,90</small>
<p class="variant-price">${preco.valor }</p>
</li>
</c:forEach>
</ul>
<button type="submit" class="submit-image icon-basket-alt" alt="Compre Agora '${produto.titulo }'" title="Compre Agora '${produto.titulo }'"></button>
</form>
</section>
<div class="container">
<section class="summary">
<ul>
<li><h3>
E muito mais... <a href='/pages/sumario-java8'>veja o sumário</a>.
</h3></li>
</ul>
</section>
<section class="data product-detail">
<h2 class="section-title">Dados do livro:</h2>
<p>
Número de páginas: <span>${produto.paginas }</span>
</p>
<p></p>
<p>Data de publicação: ${produto.dataLancamento }</p>
<p>
Encontrou um erro? <a href='/submissao-errata' target='_blank'>Submeta uma errata</a>
</p>
</section>
</div>
</article>
<footer id="layout-footer">
<div class="clearfix container">
<div id="collections-footer">
<!-- cdc-footer -->
<p class="footer-title">Coleções de Programação</p>
<ul class="footer-text-links">
<li><a href="/collections/livros-de-java">Java</a></li>
<li><a href="/collections/livros-desenvolvimento-web">Desenvolvimento Web</a></li>
<li><a href="/collections/livros-de-mobile">Mobile</a></li>
<li><a href="/collections/games">Games</a></li>
<li><a href="/collections/livros-de-front-end">Front End</a></li>
</ul>
<p class="footer-title">Outros Assuntos</p>
<ul class="footer-text-links">
<li><a href="/collections/livros-de-agile">Agile</a></li>
<li><a href="/collections/outros">e outros...</a></li>
</ul>
</div>
<div id="social-footer">
<!-- books-footer -->
<p class="footer-title">Links da Casa do Código</p>
<ul class="footer-text-links">
<li><a href="http://livros.casadocodigo.com.br" rel="nofollow">Meus E-books</a></li>
<li><a href="/pages/sobre-a-casa-do-codigo">Sobre a Casa do Código</a></li>
<li><a href="/pages/perguntas-frequentes">Perguntas Frequentes</a></li>
<li><a href="https://www.caelum.com.br">Caelum - Ensino e Inovação</a></li>
<li><a href="http://www.codecrushing.com/" rel="nofollow">Code Crushing</a></li>
<li><a href="http://www.casadocodigo.com.br/pages/politica-de-privacidade" rel="nofollow">Política de
Privacidade</a></li>
</ul>
<p class="footer-title">Redes Sociais</p>
<ul>
<li class="social-links"><a href="http://www.twitter.com/casadocodigo" target="_blank" id="twitter"
rel="nofollow">Facebook</a> <a href="http://www.facebook.com/casadocodigo" target="_blank" id="facebook"
rel="nofollow">Twitter</a></li>
</ul>
</div>
<div id="newsletter-footer">
<!-- social-footer -->
<p class="footer-title">Receba as Novidades e Lançamentos</p>
<div id="form-newsletter">
<form action="" method="POST" id="ss-form" class="form-newsletter">
<ul>
<li><input type="hidden" name="pageNumber" value="0" /><input type="hidden" name="backupCache" value="" /><input
type="email" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="seu@email.com" /></li>
<li><input type="submit" name="submit" value="Quero Receber!" id="submit-newsletter" /></li>
</ul>
</form>
<ul>
<li class="ie8"><a href="" rel="nofollow">Receba as Novidades e Lançamentos</a></li>
</ul>
</div>
<ul class="footer-payments">
<li></li>
<li></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Fiz o que foi recomendado no post
https://cursos.alura.com.br/forum/topico-nao-carrega-css-21274#530926
e também o que foi dito nesse
https://cursos.alura.com.br/forum/topico-css-nao-carrega-25014#541006
ProdutoController
package br.com.casadocodigo.loja.controllers;
import javax.validation.Valid;
// import omitido
@Controller
@RequestMapping("/produtos")
public class ProdutosController {
// ...
@RequestMapping("/detalhe")
public ModelAndView detalhe(Long id) {
ModelAndView mv = new ModelAndView("produtos/detalhe");
mv.addObject("produto", produtoDao.buscaPeloId(id));
return mv;
}
}
AppWebConfiguration
package br.com.casadocodigo.loja.configuration;
import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.format.datetime.DateFormatter;
import org.springframework.format.datetime.DateFormatterRegistrar;
import org.springframework.format.support.DefaultFormattingConversionService;
import org.springframework.format.support.FormattingConversionService;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.support.StandardServletMultipartResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import br.com.casadocodigo.loja.controllers.HomeController;
import br.com.casadocodigo.loja.daos.ProdutoDAO;
import br.com.casadocodigo.loja.infra.FileSaver;
// ativa o módulo de MVC para o projeto
@EnableWebMvc
// diz para o Spring quais são os pacotes que ele deve escanear a partir das
// classes informadas.
@ComponentScan(basePackageClasses = { HomeController.class, ProdutoDAO.class, FileSaver.class })
public class AppWebConfiguration extends WebMvcConfigurerAdapter {
/**
* Diz para o Spring qual é o prefixo e sulfixo da localização dos arquivos
* de JSPs dentro da pasta WEB-INF
*
* @return @Bean (classe gerenciada) do Spring
*/
@Bean
public InternalResourceViewResolver internalResourceViewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/views/");
resolver.setSuffix(".jsp");
return resolver;
}
/**
* Método responsável por configurar a externalização do arquivo padrão de
* mensagens da aplicação, configurando seu Encoding e também o tempo para
* recarrega-lo, importante para que não seja necessário o restart da
* aplicação quando o arquivo de mensagens for modificado.
*
* @return {@link ReloadableResourceBundleMessageSource}
*/
@Bean
public MessageSource messageSource() {
ReloadableResourceBundleMessageSource message = new ReloadableResourceBundleMessageSource();
message.setBasename("/WEB-INF/messages");
message.setDefaultEncoding("UTF-8");
message.setCacheSeconds(1);
return message;
}
/**
* Método responsável por manipular os padrões de datas no sistema,
* incluindo seus registradores.
*
*/
@Bean
public FormattingConversionService mvcConversionService() {
DefaultFormattingConversionService service = new DefaultFormattingConversionService();
DateFormatterRegistrar register = new DateFormatterRegistrar();
register.setFormatter(new DateFormatter("dd/MM/yyyy"));
register.registerFormatters(service);
return service;
}
/**
* Método responsável por configurar o Multipart de arquivos enviados em
* formulários, para indexação e disponibilização no servidor
*
* @return
*/
@Bean
public MultipartResolver multipartResolver() {
return new StandardServletMultipartResolver();
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
@Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
}