这是我上一个问题的继续。我在自己的网站上做了幻灯片放映的背景。当我添加一个js脚本时，它停止了我的CSS工作。在寻求帮助和尝试想法之后，没有任何效果，所以我决定重做所有事情。我尝试使用CSS网格来放置所有内容，但现在情况更糟了。我真的需要弄清楚这一点，因为该站点是我妻子的珠宝站点。
这是索引页面的html：
<!DOCTYPE html>
<html>
<head>
<title>Pinky's Pearls.com</title>
<meta charset="utf-8">
<meta http-equiv="x=UA-comparable" content="IE-edge">
<meta name="description" content="Pinky's Pearls is a website where one of a kind jewelry designed by Nichole <q>Nicki</q> can be seen and purchased">
<meta name="keywords" content="jewelry, beads, bracelets, rings, pendants, necklaces, pearls, crystal">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<meta name="author" content="samuel jaycox">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css">
<link rel="shortcut icon" type="image/png" href="pictures/pinky.png">
<script src="use.fontawesome.com/0c9491c5b9.js"></script>
</head>
<body>
<!--Start of background-->
<div id="background-container">
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_10.jpg" style="width:100%">
<h3>Class</h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_1.jpg" style="width:100%">
<h3>Rosary</h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_2.jpg" style="width:100%">
<h3>Sets</h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_3.jpg" style="width:100%">
<h3>Bracelets</h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<img class="sh_pic" src="pictures/gallary/PB0002.jpg" style="width:100%">
<h3>Sophistication</h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<img class="sh_pic" src="pictures/gallary/necklace-1.jpg" style="width:100%">
<h3>Necklace</h3>
</div>
</li>
</ul>
</div>
<!--end of background-->
<div id="wrapper">
<div class="grid-container">
<div class="item1">
<header>
<?php include_once("templates/template_header.php"); ?>
</header>
</div>
<div class="item2">
<nav>
<?php include_once("templates/template_navigation.php"); ?>
</nav>
</div>
<div class="item3">
<section class="one-third">
<div class="icon-wrap">
<img class="one-third-1" src="icons/necklace.png">
</div>
<h3>Necklaces</h3>
<p class="one_third_script"></p>
</section>
<section class="one-third">
<div class="icon-wrap">
<img class="one-third-1" src="icons/bracelet.png">
</div>
<h3>Bracelets</h3>
<p class="one_third_script"></p>
</section>
<section class="one-third">
<div class="icon-wrap">
<img class="one-third-1" src="icons/earrings.png">
</div>
<h3>Earrings</h3>
<p class="one_third_script"></p>
</section>
</div>
<div class="item4">
<div class="clearfix-padding"></div>
<section class="left-col">
<p class="left-side">At Pinky's Pearls.com you will find some of my best jewelry creations. It is my goal to create beautiful jewelry that anyone can wear to any occasion such as a wedding, birthday or to be given as a gift. I really hope you enjoy the pieces I have created. </p>
</section>
</div>
<div class="item5">
<section class="sidebar">
<img class="sidebar-pic" src="pictures/aunts_necklace.png">
</section>
<div class="clearfix-padding"></div>
</div>
<div class="item6">
<footer>
<div class="icon-text">
<div class="icon-text-text">
<ul class="footer-nav">
<li><a href="tearms.php">Tearms and Conditions</a></li>
<li><a href="shipping_info.php">Shipping Information</a></li>
</ul>
</div>
</div>
<div class="icon-text-icon">
<p class="email_text">Follow Me On</p>
<div class="social-icon">
<a href="#">
<img class="social-icon" src="icons/facebook.png" alt="Facebook" height="45" width="45"></a>
</div>
</div>
</footer>
<footer class="second">
<p>© All Rights Reserved</p>
</footer>
</div>
</div>
</div>
</body>
</html>
这里是css：很长：
@font-face {
src: url(fonts/BrockScript.ttf);
font-family: brock;
}
@font-face {
font-family: giddy;
src: url(fonts/GiddyupStd.otf);
}
* {
margin: 0px;
padding: 0px;
}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: left}
.item5 { grid-area: right; }
.item6 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu menu menu menu menu menu'
'main main main main main main'
'left left left left right right'
'footer footer footer footer footer';
grid-template-columns: auto auto auto auto auto auto;
grid-template-rows: 200px 100px 1500px 200px 150px;
grid-gap: 2px;
padding: 10px;
}
.grid-container > div {
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item4 {
grid-column-start: 1;
grid-column-end: 5;
}
#background-container {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(pictures/gallary/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: brock;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: black;
}
.cb-slideshow li:nth-child(1) span { background-image: url(pictures/gallary/necklace-1.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(pictures/gallary/PB0002.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(pictures/gallary/image_3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(pictures/gallary/image_2.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(pictures/gallary/image_1.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(pictures/gallary/image_10.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
img.logo {
width: 1355px;
height: 200px;
margin: 0;
border: 3PX solid black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
}
#header {
background-color: pink;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
border: 3px solid black;
}
h1.main_header {
font-family: brock;
font-size: 800%;
margin-top: 3%;
text-align: center;
}
#main-navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
margin-left: auto;
}
#main-navigation ul li {
width: 200px;
text-align: center;
position: relative;
float: left;
margin-left: 45px;
}
#main-navigation ul li a {
width: 200px;
height: 40px;
background-color: #ff93ac;
padding-bottom: 2px;
line-height: 40px;
text-align: center;
display: block;
font-size: 30px;
font-family: brock;
font-weight: bold;
margin-left: 100px;
border: 3px solid black;
border-radius: 20px;
text-decoration: none;
color: black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
}
#main-navigation ul li a:hover {
background-color: black;
border: 3px solid #ff93ac;
color: pink;
}
.submenu {
position: absolute;
top: 0px;
left: 205px;
display: none;
margin-left: 0;
}
#main-navigation ul li:hover ul.submenu {
display: block;
}
#main-navigation ul li:hover ul.submenu {
display: block;
}
.one-third {
width: 33.333333%;
float: left;
text-align: justify;
text-align: center;
}
.icon-wrap {
margin: 0 auto;
width: 120px;
height: 120px;
border-radius: 125%;
text-align: center;
background-color: #ff93ac;
border: 3px solid black;
margin-top: 23%;
margin-bottom: 12%;
}
.icon-wrap img.one-third-1 {
text-align: center;
width: 80px;
height: 90px;
color: black;
padding: 17%;
}
.intro {
margin-top: 5%;
margin-left: 20px;
text-align: center;
text-decoration: none;
text-transform: lowercase;
}
.intro::first-letter {
text-transform: uppercase;
}
.body {
margin-top: 0;
padding: 0;
font-weight: 500;
}
.body::first-letter {
font-size: 150%;
background-color: #ff93ac;
border-radius: 125%
}
.ending-comment {
text-indent: 25px;
}
.dedication {
font-family: giddy;
text-align: center;
font-size: 200%;
margin-top: 3%;
}
#wrapper {
max-width: 1200px;
min-width: 1200px;
}
#main-body {
font-family: brock;
font-size: 150%;
text-align: center;
}
h3 {
font-family: brock;
font-size: 200%;
line-height: 155%;
font-weight: 500;
color: black;
text-align: center;
margin-top: 2%;
padding: 0px;
}
h1 {
font-family: brock;
font-size: 300%;
margin-top: 3%;
text-align: center;
}
.left-col {
float: left;
margin: 0 auto;
width: 60%;
height: auto;
padding: 5%;
}
.sidebar {
float: left;
margin: 0 auto;
width: 10%;
height: auto;
padding: 1%;
}
.clearfix-padding {
clear: both;
padding: 2%;
}
footer {
font-family: brock;
font-size: 150%;
font-weight: bold;
background-color: #ff93ac;
border: 2px solid black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
max-width: 1500px;
min-width: 1500px;
max-height: 500px;
overflow: hidden;
}
.icon-text {
width: 33.333333%;
float: left;
text-align: justify;
text-align: center;
}
.icon-text-text {
float: left;
padding: 2% 2% 0 2%;
}
.icon-text-icon {
width: 33.333333%;
float: left;
}
.email_text {
float: left;
text-align: center;
}
div.social-icon {
display: inline;
padding: 5%;
}
img.social-icon {
max-width: 50px;
max-height: 50px;
}
.footer-nav {
text-align: right;
list-style-type: none;
}
.footer-nav a {
font-size: 65%;
color: black;
font-weight: bold;
text-decoration: none;
}
.footer-nav a:hover {
color: white;
}
footer.second {
border: 2px solid white;
background-color: black;
max-height: 50px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
color: #ff93ac;
font-size: 120%;
line-height: 155%;
}
h2 {
font-family: brock;
font-size: 200%;
margin-left: 5%;
}
form.contact fieldset {
border: 4px solid #ff93ac;
padding: 10px
}
form.contact legend {
text-align: center;
font-family: brock;
font-weight: bold;
font-size: 150%;
color: black;
padding: 5px
}
form.contact {
padding: 0;
margin: 0;
margin-top: 15px;
line-height: 150%;
}
form.contact label {
font-family: brock;
font-weight: bold;
font-size: 150%;
color: black;
}
form.contact label.fixwidth {
display: block;
width: 240px;
float: left;
}
p.contact-form {
font-family: brock;
font-size: 200%;
text-align: center;
margin-top: 3%;
}
.button-area input {
background: black;
color: #ff93ac;
font-weight: bold;
padding: 5px;
border: 2px solid pink;
}
.button-area {
text-align: center;
padding: 4px;
background-color: black;
margin-top: 3%;
border: 4px solid pink;
}
.button {
background-color: #ff93ac;
font-family: brock;
border: 3PX solid black;
border-radius: 20px;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
padding-right: 4px;
padding-left: 4px;
}
h3.item {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
我还得到了两个背景幻灯片。 谁能看到我可能缺少的东西？
答案 0 :(得分：0)
尝试
<link rel = "stylesheet" href="style.css"
答案 1 :(得分：0)
您已经添加了五个 footer 部分。但您要添加六个页脚部分
grid-template-areas: "header header header header header header"
"menu menu menu menu menu menu"
"main main main main main main"
"left left left left right right"
"footer footer footer footer footer footer";
答案 2 :(得分：0)
问题似乎出在您要使用CDN击中的URL
您可以尝试做吗：
private View windowView;
private Button clickMe;
private int[colors];
colors=new int[]{Color.CYAN, Color.GREEN, Color.RED};
final int[] finalColors = colors;
final View finalWindowView = windowView;
for (int i = 0; i < finalColors.length; i++) {
Random random = new Random();
final int randomNum = random.nextInt(finalColors.length);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Do after 500ms
finalWindowView.setBackgroundColor(colors[randomNum]);
}
}, 500 * i);
}
代替：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="shortcut icon" type="image/png" href="pictures/pinky.png">
<script src="https://use.fontawesome.com/0c9491c5b9.js"></script>