-1
Ich fragte mich, wenn jemand mir zeigen, wie ich die Hintergrundfarbe von ONLY meine index.jsp Seite mit twitter Bootstrap ändern kann? Ich habe versucht, die Körper-Hintergrundfarbe zu ändern, aber es ändert sich nie für die Indexseite. Es ändert immer die Farbe für meine anderen Seiten, die ich erstellt habe, ich weiß nicht warum. Wenn mir jemand zeigen kann, wie ich die Hintergrundfarbe auf nur BLACK ändern kann, wäre ich sehr dankbar. Danke :)Wie Hintergrundfarbe einer einzelnen Seite mit CSS ändern - twitter bootstrap
Ich ging voran und säuberte meinen Code und versuche wieder von Grund auf neu. Ich habe meine index.jsp und CSS-Code hier als Referenz veröffentlicht.
index.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Database Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<spring:url value="/webjars/bootstrap/3.2.0/css/bootstrap.min.css" var="bootstrap"/>
<spring:url value="/webjars/jquery/1.11.1/jquery.min.js" var="jquery"/>
<spring:url value="/webjars/bootstrap/3.2.0/js/bootstrap.min.js" var="bootstrapJS"/>
<spring:url value="/resources/css/index.css" var="indexCss"/>
<link href="${bootstrap}" rel="stylesheet"/>
<link href="${indexCss}" rel="stylesheet"/>
</head>
<body>
<!--<div class="container">
<form action="test" method="post">
<input type="Submit" name="Submit">
</form>
</div>-->
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Test</h3>
<nav>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">test Web-App</h1>
<p class="lead">Add or view your stuff below.</p>
<p><form action="books" method="post" ><input type="Submit" value="Books" name="Submit" class="btn btn-lg btn-default"></form></p>
<p> <form action="movies" method="post" ><input type="Submit" value="Movies" name="Submit" class="btn btn-lg btn-default"> </form></p>
<p><form action = "music" method = "post"><input type ="Submit" value = "Music" name = "Submit" class ="btn btn-lg btn-default"></form></p>
<p><form action = "contacts" method = "post"><input type ="Submit" value = "Contact" name = "Submit" class ="btn btn-lg btn-default"></form></p>
</div>
<img class="visible-xs img-responsive src="C:/Users/test/Documents/CODING/JobProjects/Hibernate Projects/EntertainmentApp/src/main/webapp/resources/images/title.jpg"/>
<img src="resources/images/title.jpg" class="img-fluid" alt="Responsive image">
<div class="container">
<form action="test" method="post">
<input type="Submit" name="Submit">
</form>
</div>
<div class="mastfoot">
<div class="inner">
<p>Created by <a href="test">test</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="${jquery}"></script>
<script src="${bootstrapJS}"></script>
</body>
</html>
CSS Seite:
.entertainmentDisplay {
margin-top: 20%;
margin-left:25%;
margin-right: 25%;
}
.bottomColor {
color: #282828 ;
}
a,
a:focus,
a:hover {
color: #fff;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
background-color: #fff;
border: 1px solid #fff;
margin: 5px;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
color: #333;
text-shadow: none;
background-color: #fff;
border: 1px solid #000000;
margin: 5px;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #989898 ;
}
body {
color: #fff;
text-align: center;
/*text-shadow: 0 1px 3px rgba(0,0,0,.5);*/
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: inline;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
table.zebra-style {
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align:left;
margin-bottom:25px;
border: 2px solid black;
}
table.zebra-style th {
color: #fff;
font-size: 16px;
font-weight: normal;
padding: 10px 8px;
background:#666;
}
table.zebra-style td {
color: black;
padding: 8px;
font-size:14px;
}
table.zebra-style tr.odd {
background:#f2f2f2;
}
'
Quentin