我想制作一个包含3张图片的滑块,但是我遇到了一个问题。

我想把图像放在头顶上..
我将导航栏高度设置为:0,以将导航栏放在标题上方。

您可以看到代码,并且图像将向您显示我所需要的



$('.header').height($(window).height());

.my-navbar
{

    height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>



              <div class="my-navbar">
                    <div class="my-container">
                            <div class="user">
                                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                <a href="#" class="upper">login</a>
                                <span class="separator">|</span>
                                <a href="#" class="upper">register</a>
                            </div>
                            <div class="clearfix"></div>
                            <div class="social">   <!-- social and search icon-->
                                 <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                 <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                                  <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>

                            </div>
                            <div class="clearfix"></div>
                            <div class="links upper txcolor">

                                <a href="#">news</a>
                                <span>|</span>
                                <a href="#">download</a>
                                 <span>|</span>
                                <a href="#">usefull links</a>


                          </div>

                        </div>
            </div>



      <div class="header">




           <!--<div class="slider">
                <div class="my-container">


                      <div class="slider-images">



                       </div>

                    <div class="slider-text">
                    <h3>Four Wheels move the body</h3>
                     <h1>  Two wheels move the soul</h1>

                    </div>






                </div>
            </div> -->


            <img src="images/motors/m1.png">
        </div>





        <div class="menu">


                <img  src="images/logo.png" >



        </div>

最佳答案

.slider {
    height: 100vh;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    padding: 0;
    margin: 0;
}


根据滑块的显示属性,您可能还需要将其更改为display:table;

09-17 14:22
查看更多