HTML / CSS照片库不显示图片 [英] HTML/CSS Photo Gallery not displaying pictures
本文介绍了HTML / CSS照片库不显示图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
同样，第一个网站，第一次使用部分标签，因此我仍然熟悉他们。
我复制了照片库的代码来自
// HTML
<！DOCTYPE html&
< html>
< head>
< link href =index.css =stylesheet>
< script>
document.onreadystatechange = function（）{
if（document.readyState ==interactive）{
slider（）;
}
}
function slider（）{
var slider = document.querySelector（figure）;
var slides = slider.children;
setInterval（function（）{
slider.appendChild（slides [0]）;
}，5000）
}
< / script>
< / head>
< body>
< nav>
< div>
< div id =logo> LOGO< / div>
< / div>
< div>
< a href ='http：//www.se7enservice.com/'class =here>首页< / a>
< a href =/ about.html>关于< / a>
< a href =/ services.html>服务< / a>
< a href =/ pricing.html>定价< / a>
< a href =/ contact_us.html>与我们联系< / a>
< / div>
< div>
< / div>
< / nav>
< section id =slider>
< figure>
< img src =https://myreco.me/images/news/55b089d22992f.jpg>
< img src =https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg>
< img src =http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg>
< / figure>
< / section>
< section id =content>
< header>
< h1>标题部分< / h1>
< p> Lorem ipsum dolor sit amet，eos ea exerci ornatus detracto，eos ea equidem signiferumque。 Et sea forensibus elaboraret，graeci platonem eos no，ut sit omitam senserit。 Duis elitr omittantur mei id，ludus commune sapientem an mel。 sit ei dicunt electram scriptorem，pro ut iriure salutandi。 Homero salutandi efficiantur utv。< / p>
< / header>
< section>
< h1>栏目部分< / h1>
< p> Lorem ipsum dolor sit amet，eos ea exerci ornatus detracto，eos ea equidem signiferumque。 Et sea forensibus elaboraret，graeci platonem eos no，ut sit omitam senserit。 Duis elitr omittantur mei id，ludus commune sapientem an mel。 sit ei dicunt electram scriptorem，pro ut iriure salutandi。 Homero salutandi efficiantur utv。< / p>
< / section>
< / section>
< footer>< / footer>
< / body>
< / html>
// CSS
body {
margin：0！important;
height：100vh;
width：100vw;
}
/ * NAV * /
nav {
display：-webkit-flex;
display：flex;
top：0;
width：100％;
min-height：60px;
z-index：999;
position：fixed;
background：＃1E67CB;
box-shadow：0 1px 5px rgba（0,0,0，.6）;
-webkit-box-shadow：0 1px 5px rgba（0,0,0，.6）;
}
nav> div {
text-align：center;
-webkit-flex：1;
flex：1;
-webkit-align-self：center;
align-self：center;
}
#logo {
display：-webkit-flex;
display：flex;
cursor：default;
-webkit-align-self：center;
align-self：center;
margin-left：1em;
color：#fff;
font-weight：bold;
font-size：1.15em;
line-height：1.43;
-webkit-font-smoothing：antialiased;
font-family：Circular，Helvetica Neue，Helvetica，Arial，sans-serif;
}
nav> div {
width：50vw;
display：-webkit-flex;
display：flex;
}
nav> div：nth-of-type（1）{
-webkit-justify-content：flex-start;
justify-content：flex-start;
}
nav> div：nth-of-type（2）{
-webkit-justify-content：center;
justify-content：center;
}
nav> div：nth-of-type（3）{
-webkit-justify-content：flex-end;
justify-content：flex-end;
}
nav> div> a {
display：-webkit-flex;
display：flex;
-webkit-align-self：center;
align-self：center;
text-decoration：none;
cursor：pointer;
color：#fff;
font-size：1em;
font-weight：300;
-webkit-font-smoothing：antialiased;
font-family：HelveticaNeue-Light，Helevetica Neue，Helvetica，Arial;
margin：0 .5em;
padding：0.6em 1.5em;
-moz-border-radius：5px;
-webkit-border-radius：5px;
border-radius：5px;
-moz-transition：background-color 100ms;
-webkit-transition：background-color 100ms;
transition：background-color 100ms;
}
nav> div> a：hover {
background：rgba（255,255,255,0.15）;
}
nav> div> a：active {
-webkit-box-shadow：inset 0 2px 4px rgba（0，0，0，0.15），0 1px 2px rgba 0，0，0.05）;
box-shadow：inset 0 2px 4px rgba（0，0，0，0.15），0 1px 2px rgba（0，0，0，0.05）
}
nav> div：nth-of-type（3）> a：nth-of-type（2）{
background：rgba（255,255,255,0.15） ;
}
nav> div> a：nth-of-type（2）：hover {
background：rgba（255，255，255，0.37）
}
/ * SLIDER * /
#slider {
display：-webkit-flex;
display：flex;
overflow-x：hidden;
margin-top：60px;
box-shadow：inset 0 1px 5px rgba（0,0,0，.6）;
-webkit-box-shadow：inset 0 1px 5px rgba（0,0,0，.6）;
}
figure {
display：-webkit-flex;
display：flex;
height：40vh
width：100％;
max-height：40vh;
transform：translateX（0）;
margin：0！important;
animation：slider 5s ease无限;
}
@keyframes slider {
0％{transform：translateX（0）;}
20％{transform：translateX（0）;}
50％ transform：translateX（0）;}
90％{transform：translateX（-100％）;}
100％{transform：translateX（-100％）;}
}
figure> img {
min-width：100vw;
}
/ * CONTENT * /
#content {
display：-webkit-flex;
display：flex;
-webkit-flex-direction：column;
flex-direction：column;
min-height：200vh; / *开发目的* /
}
＃content> header {
display：-webkit-flex;
display：flex;
margin-top：30px;
-webkit-flex-direction：column;
flex-direction：column;
-webkit-justify-content：center;
justify-content：center;
-webkit-align-self：center;
align-self：center;
min-width：1280px;
max-width：1280px;
}
＃content> section {
display：-webkit-flex;
display：flex;
-webkit-flex-direction：column;
flex-direction：column;
-webkit-justify-content：center;
justify-content：center;
-webkit-align-self：center;
align-self：center;
min-width：1280px;
max-width：1280px;
}
h1 {
margin：0;
font-size：2em;
letter- spacing：-3px;
line-height：1.1; cursor：default;
color：＃333;
text-align：center;
font-family：Avenir Next，Avenir，Segoe UI，Roboto，Helvetica Neue，sans-serif;
-webkit-font-smoothing：antialiased;
}
p {
text-align：center;
font-size：1.5em;
line-height：1.6em;
cursor：default;
color：＃333;
text-align：center;
font-family：Avenir Next，Avenir，Segoe UI，Roboto，Helvetica Neue，sans-serif;
-webkit-font-smoothing：antialiased;
}
/ * FOOTER * /
footer {
display：-webkit-flex;
display：flex;
/ * position：absolute; * /
width：100％;
min-height：100px;
bottom：0;
background：＃5c5c5c;
box-shadow：inset 0 1px 5px rgba（0,0,0，.6）;
-webkit-box-shadow：inset 0 1px 5px rgba（0,0,0，.6）;
}
Again, first website, and first time using the "section" tags so I'm still getting familiar with them.
I copied the code for a photo gallery banner from http://www.johnnycupcakes.com. I inspected the elements and copied the HTML & CSS code and placed them in my, except changed the pictures because I like the layout. However, the pictures I chose (which are saved locally) will not show up. I have pictures elsewhere on my page that are called in the same exact format and they show up fine.
Here is the HTML:
<section id="content" class="clearfix">
<div class="full-wrap">
<div class="contain contain-slides">
<div class="swiper-container">
<div class="swiper-wrapper" style="width: 11056px; height: 820px; transition: 0s; -webkit-transition: 0s; transform: translate3d(-6910px, 0px, 0px); -webkit-transform: translate3d(-6910px, 0px, 0px);">
<a class="swiper-slide" style="width: 10382px; height: 820px;" href="/services.html">
<img src="/Images/iPhone_5C_fix.jpg"/>
</a>
<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
<img src="/Images/iPad repair.jpg"/>
</a>
<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
<img src="/Images/MacBook Repair.jpg"/>
</a>
</div>
<div class="pagination">
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
</div>
</div>
</div>
</section>
CSS:
.content {
float: left;
width: 100%
}
.full-wrap {
width: 100%;
float: left;
position: relative
}
.full-wrap.title {
margin: 10px 0px
}
.events .full-wrap.title {
margin-top: 70px
}
.contain {
max-width: 1240px;
margin: 0 auto;
padding: 0px 20px;
position: relative
}
.contain-slides {
margin-top: 50px
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
cursor: pointer !important
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center
}
.swiper-container[style] {
height: auto !important
}
.swiper-container.product-page {
width: 90%;
float: left;
margin: 0;
color: #fff;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden
}
.swiper-wrapper {
position: relative;
width: 9999999px;
overflow: hidden;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
transition-property: transform, left, top;
transition-duration: 0s;
transform: translate3d(0px, 0, 0);
transition-timing-function: ease;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}
.swiper-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
margin: 0 auto
}
.swiper-wrapper[style] {
height: 500px !important
}
.swiper-slide {
float: left
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px
}
.swiper-slide[style] {
height: auto !important
}
.swiper-slide img {
width: 100%;
height: auto
}
.swiper-slide.product-page {
background: none;
overflow: hidden;
color: #fff
}
.pagination {
margin: 0 auto
}
.swiper-pagination-switch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 10px;
background: #000;
margin: 4px;
border: 2px solid #fff;
cursor: pointer;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}
.swiper-pagination-switch:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4)
}
.swiper-visible-switch {
background: #aaa
}
.swiper-active-switch {
background: #fff;
border: 2px solid #000;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
The only thing I removed were 5 lines of which the original code had 8, but I only need to display 5 pictures right now.
Any help on why my pictures aren't displaying?
解决方案
this should do the trick... let me know
Screenshot:
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script>
document.onreadystatechange = function(){
if(document.readyState == "interactive"){
slider();
}
}
function slider(){
var slider = document.querySelector("figure");
var slides = slider.children;
setInterval(function(){
slider.appendChild(slides[0]);
}, 5000)
}
</script>
</head>
<body>
<nav>
<div>
<div id="logo">LOGO</div>
</div>
<div>
<a href='http://www.se7enservice.com/' class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact_us.html" >Contact Us</a>
</div>
<div>
</div>
</nav>
<section id="slider">
<figure>
<img src="https://myreco.me/images/news/55b089d22992f.jpg">
<img src="https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg">
<img src="http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg">
</figure>
</section>
<section id="content">
<header>
<h1>Header Section</h1>
<p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
</header>
<section>
<h1>Section Section</h1>
<p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
</section>
</section>
<footer></footer>
</body>
</html>
//CSS
body{
margin: 0 !important;
height: 100vh;
width: 100vw;
}
/* NAV */
nav{
display: -webkit-flex;
display: flex;
top: 0;
width: 100%;
min-height: 60px;
z-index: 999;
position: fixed;
background: #1E67CB;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
}
#logo{
display: -webkit-flex;
display: flex;
cursor: default;
-webkit-align-self: center;
align-self: center;
margin-left: 1em;
color: #fff;
font-weight: bold;
font-size: 1.15em;
line-height: 1.43;
-webkit-font-smoothing: antialiased;
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
width: 50vw;
display: -webkit-flex;
display: flex;
}
nav>div:nth-of-type(1){
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
nav>div:nth-of-type(2){
-webkit-justify-content: center;
justify-content: center;
}
nav>div:nth-of-type(3){
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
nav>div>a{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
text-decoration: none;
cursor: pointer;
color: #fff;
font-size: 1em;
font-weight: 300;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
margin: 0 .5em;
padding: 0.6em 1.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
nav>div>a:hover{
background: rgba(255,255,255,0.15);
}
nav>div>a:active{
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
background: rgba(255, 255, 255, 0.15);
}
nav>div>a:nth-of-type(2):hover{
background: rgba(255, 255, 255, 0.37);
}
/* SLIDER */
#slider{
display: -webkit-flex;
display: flex;
overflow-x: hidden;
margin-top: 60px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
figure{
display: -webkit-flex;
display: flex;
height: 40vh;
width: 100%;
max-height: 40vh;
transform: translateX(0);
margin: 0 !important;
animation: slider 5s ease infinite;
}
@keyframes slider {
0% { transform: translateX(0);}
20% { transform: translateX(0);}
50% { transform: translateX(0);}
90% { transform: translateX(-100%);}
100% { transform: translateX(-100%);}
}
figure>img{
min-width: 100vw;
}
/* CONTENT */
#content{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 200vh; /* DEVELOPMENT PURPOSES */
}
#content>header{
display: -webkit-flex;
display: flex;
margin-top: 30px;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
min-width: 1280px;
max-width: 1280px;
}
#content>section{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
min-width: 1280px;
max-width: 1280px;
}
h1{
margin: 0;
font-size: 2em;
letter-spacing: -3px;
line-height: 1.1; cursor: default;
color: #333;
text-align: center;
font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
}
p{
text-align: center;
font-size: 1.5em;
line-height: 1.6em;
cursor: default;
color: #333;
text-align: center;
font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
}
/* FOOTER */
footer{
display: -webkit-flex;
display: flex;
/* position: absolute; */
width: 100%;
min-height: 100px;
bottom: 0;
background: #5c5c5c;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
这篇关于HTML / CSS照片库不显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
