CSS Отзывчивость не работает

-1

Я пытаюсь сделать эту страницу отзывчивой, но после многих неудач я застрял. Может ли кто-нибудь сказать мне, почему в верхней части есть белая рамка, а также изображения не подходят для этой страницы?CSS Отзывчивость не работает

CSS:

.cb-slideshow, 
.cb-slideshow:after { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    z-index: 0; 
} 
ul { 
    list-style-type: none; 
} 
.cb-slideshow:after { 
    content: ''; 
    margin-top:0px 
} 
.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: 0px; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    text-align: center; 
    opacity: 0; 
    color: #bf1e2d; 
    -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:nth-child(1) span { 
    background-image: url(../images/spr-banner1.jpg) 
} 
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/spr-banner2.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(../images/spr-banner3.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(../images/spr-banner4.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(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; 
} 

/* Animation for the slideshow images */ 
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0; 
    -webkit-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -webkit-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-moz-keyframes imageAnimation { 
    0% { opacity: 0; 
    -moz-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -moz-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-o-keyframes imageAnimation { 
    0% { opacity: 0; 
    -o-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -o-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-ms-keyframes imageAnimation { 
    0% { opacity: 0; 
    -ms-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -ms-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@keyframes imageAnimation { 
    0% { opacity: 0; 
    animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 
/* Animation for the title */ 
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 } 
    8% { opacity: 1 } 
    17% { opacity: 1 } 
    19% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 } 
    8% { opacity: 1 } 
    17% { opacity: 1 } 
    19% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-o-keyframes titleAnimation { 
    0% { opacity: 0 } 
    8% { opacity: 1 } 
    17% { opacity: 1 } 
    19% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 } 
    8% { opacity: 1 } 
    17% { opacity: 1 } 
    19% { opacity: 0 } 
    100% { opacity: 0 } 
} 
@keyframes titleAnimation { 
    0% { opacity: 0 } 
    8% { opacity: 1 } 
    17% { opacity: 1 } 
    19% { 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: 140px } 
} 
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px } 
}

HTML:

<!DOCTYPE html> 
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--> 
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> 
    <head> 
     <meta charset="UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>The Social PR | Coming Soon</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content="The Social PR Coming Soon" /> 
     <meta name="keywords" content="PR" /> 
     <meta name="author" content="Zak Lewis" /> 

     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> 
    </head> 
    <body id="page"> 
     <ul class="cb-slideshow"> 
      <li><span>Image 01</span><div></div></li> 
      <li><span>Image 02</span><div></div></li> 
      <li><span>Image 03</span><div></div></li> 
      <li><span>Image 04</span><div></div></li> 
     </ul> 
     <div class="container"> 

     </div> 
    </body> 
</html>

Если вам нужна дополнительная информация, чтобы помочь мне, пожалуйста, спросите меня.

источник

2015-02-07 Zak Lewis

Отправьте соответствующий код здесь. –

Я вставил адрес, чтобы вы могли видеть весь код в действии, проще, но если вы хотите, чтобы я вставлял тот же код, что со мной хорошо –

Основная причина, по которой мы хотим видеть весь код, заключается в том, что мы не попытайтесь решить конкретные проблемы. Мы хотим иметь некоторые решения, которые работают для многих людей. Что произойдет, если через некоторое время сайт не будет доступен? Сообщение не будет иметь никакой ценности. Спасибо за добавление этих деталей. :) –

.cb-slideshow{margin-top:0px}. для вашего фонового изображения с .cb-slideshow li span{background-position: 50% 50%;} как вам нравится.

источник

2015-02-07 14:53:31 Hareesh

, который не разрешил белую полосу –

После нескольких обновлений он сработал! спасибо за вашу помощь, просто нужно исправить эту отзывчивую проблему сейчас, какие-нибудь идеи? –

CSS Отзывчивость не работает

ответ

Смежные вопросы