Question

这是一个简单的页面，我试图开发。

我是html，css和jQuery的新手。

有一个标题菜单，在它下面是一个图像滑块，我使用一些youtube教程编写。图像每3秒淡入淡出一次。

我的标题广告与滑块之间存在差距，我不知道如何摆脱它？当我尝试在body:after{ background-image:url(...)}中应用背景图像时因为我希望图像具有不透明度，所以背景图像不会出现。

任何帮助都会感激不尽，我也想知道我该如何

在我的图片滑块上添加内容，例如图片上的描述或其上的链接？
在我的滑块中整合视频，主要是从youtube播放的视频？

这里是JSfiddle：http://jsfiddle.net/vj1023/57aqkdg2/6/

HTML

 <header class="mainHeader">


   <nav>
     <ul>
       <li><a href=" #">LIFE</a></li>
       <li><a href=" #">REVIEWS</a></li>
       <li><a href=" #">LISTS</a></li>
       <li><a href=" #">PHOTO-ESSAYS</a></li>
       <li><a href=" #">PARENT'S SPEAK</a></li>
       <li><a href=" #">AGONY AUNT</a></li> 
    </ul>


   </nav>

   <div class="sliderWrapper">
    <div id="slider">
      <Img id="1" src="http://v-pluse24.ru/wp-content/uploads/2014/10/1822-Soccer-Ball-www.WallpaperMotion.com_.jpg"> 
      <Img id="2" src="images/img2.jpg">
      <Img id="3" src="images/img3.jpg">
      <Img id="4" src="images/img4.jpg">
    </div>
  </div>  

 </header>



<script src="js/jQuery.js"></script>
<script src="js/slider.js"></script>  
</body>

CSS

a
{
    text-shadow: 0px 4px 6px #000;
    color:white!important;
    text-decoration: none;
}

.mainHeader nav
{
    background: rgba(19, 17,17, 0.7);
    height: 40px;
    padding: 0px;
    margin: 0px;
}


.mainHeader nav
{
    background: rgba(19, 17,17, 0.7);
    height: 40px;
    padding: 0px;
    margin: 0px;
}




img
{
    margin: 0px;
}


.mainHeader nav ul
{
    float: right;
    list-style: none;
    margin: 0 ; 
}

.mainHeader nav ul li
{

    display: inline;
}

.mainHeader nav a
{
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
    height: 40px;
    text-shadow: 0px 1px 3px #FFF;
}


.body
{
    margin: 0 auto;
    clear: both;
}



 body:after 
   {
        content: "";
        background-color: white;
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
        background-size:cover;
        opacity: 0.6;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
       text-align: left;
    }



.sliderWrapper
{ 
  vertical-align: top; 
  padding: 0px;
  margin: 0px;
}

#slider
{
  vertical-align: top;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin: 0px;
}

#slider > Img
{
   width: 100%;
   height: 400px;
   float: left;
}


.sliderWrapper > a
{
   background-color:white;
   text-decoration: none;
   border-radius: 5px;
   position: absolute;
   top: 400px;
}

的JavaScript / Jquery的

sliderInt=1;
sliderNext=2;

$(document).ready(function(){
    $('#slider>img#1').fadeIn(100);
    startSlider();
});

function startSlider(){
    count= $("#slider>img").size();

    loop = setInterval(function(){

        if(sliderNext>count){
            sliderNext=1;
            sliderInt=1;
        }

        $("#slider>img").fadeOut(100);
        $("#slider>img#"+sliderNext).fadeIn(100);

        sliderInt=sliderNext;
        sliderNext = sliderNext+1;

    }, 2500);
}

Answer 1

继续并改变

.mainHeader nav a
{
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
    height: 40px;
    text-shadow: 0px 1px 3px #FFF;

}

到

.mainHeader nav a
{
    color: #FFF;
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    text-shadow: 0px 1px 3px #FFF;

}

区别在于此css类中有10px的顶部填充，现在没有。

编辑：这实际上打破了链接的对齐方式，但绝对是问题所在。

当你真的很难找到它们时，这些错误会非常有弹性。我通常做的是点击F12并开始禁用不同标签的css属性，这可能与问题有关。

如何消除标题和图像滑块之间的间隙

1 个答案: