Question

我试图找出如何将我的图标放在滑块上。 Here is what it looks like.

我希望这些图标居中并漂浮在滑块上。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="https://googledrive.com/host/0B1RR6fhjI2QROGt0MTFoVkhMdUk/fonts.css">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
        <script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script type= "text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
        <script type="text/javascript" src="js/skrypt.js"></script>


    </head>
    <body>
        <div class="Modern-Slider">
      <!-- Item -->
      <div class="item">
        <div class="img-fill">
          <img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_0_w700-h500-q95.jpg" alt="">
          <div class="info">
            <div>
              <h3>Full Width Slider With Layers</h3>
              <h5>You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation.</h5>
            </div>
          </div>
        </div>
      </div>
      <!-- // Item -->
      <!-- Item -->
      <div class="item">
        <div class="img-fill">
          <img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_063_w700-h500-q95.jpg" alt="">
          <div class="info">
            <div>
              <h3>Fully responsive Scales with its container</h3>
              <h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
            </div>
          </div>
        </div>
      </div>
      <!-- // Item -->
      <!-- Item -->
      <div class="item">
        <div class="img-fill">
          <img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_062_w700-h500-q95.jpg" alt="">
          <div class="info">
            <div>
              <h3>Awesome Transtions With CSS3</h3>
              <h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
            </div>
          </div>
        </div>
      </div>
      <!-- // Item -->
      <!-- Item -->
      <div class="item">
        <div class="img-fill">
          <img src="http://static1.vox.pl/files/bw/images/salony/83/galeria/zdjecia_na_stronke_061_w700-h500-q95.jpg" alt="">
          <div class="info">
            <div>
              <h3>Separate settings per breakpoint</h3>
              <h5>Donec id ornare dui. Aenean tristique condimentum elit, quis blandit nisl varius sit amet. Sed eleifend felis quis massa viverra</h5>
            </div>
          </div>
        </div>
      </div>
      <!-- // Item -->
    </div>

    <div class="elo">
    <ul>
        <li><a href="http://techumber.com/"><span>Kolekcje</span><img src="images/notable-icon.png" alt="Kolekcje"></a></li>
        <li><a href="http://www.meble.vox.pl/salon-olsztyn-salon-83"><span>Kontakt</span><img src="images/notable-icon.png" alt="Kontakt"></a></li>
        <li><a href="http://techumber.com/"><span>Młodzieżowe</span><img src="images/notable-icon.png" alt="Młodzieżowe"></a></li>
        <li><a href="http://techumber.com/"><span>BABY Vox</span><img src="images/notable-icon.png" alt="harddrive"></a></li>

    </ul>
    </div> 
    </body>

    </html>

这里的CSS。

/* ==== Main CSS === */
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  min-height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
  height:100vh;
  background:#000;
}

.Modern-Slider .item .img-fill .info{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background:rgba(0,0,0,.50);
  line-height:100vh;
  text-align:center;
}

.Modern-Slider .item .img-fill img{
  filter:blur(5px);
}

.Modern-Slider .item .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
}

.Modern-Slider .NextArrow:before{content:'\f105';}

.Modern-Slider .PrevArrow{
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
}

.Modern-Slider .PrevArrow:before{content:'\f104';}

.Modern-Slider .slick-dots{
  position:absolute;
  height:5px;
  background:rgba(255,255,255,.20);
  bottom:0px;
  width:100%;
  left:0px;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
.Modern-Slider .slick-dots li button{display:none;}
.Modern-Slider .slick-dots li{
  float:left;
  width:0px;
  height:5px;
  background:#d62828;
  position:absolute;
  left:0px;
  bottom:0px;
}

.Modern-Slider .slick-dots li.slick-active{
  width:100%;
  animation:ProgressDots 11s both;
}

.Modern-Slider .item h3{
  font:30px/50px RalewayB;
  text-transform:uppercase;
  color:#FFF;
  animation:fadeOutRight 1s both;
  margin:0;
  padding:0;
}

.Modern-Slider .item h5{
  margin:0;
  padding:0;
  font:15px/30px RalewayR;
  color:#FFF;
  max-width:600px;
  overflow:hidden;
  height:60px;
  animation:fadeOutLeft 1s both;
}

.Modern-Slider .item.slick-active h3{
  animation:fadeInDown 1s both 1s;
}

.Modern-Slider .item.slick-active h5{
  animation:fadeInLeft 1s both 1.5s;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider {background:#000;}

/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
    0%{transform:rotate3d(0,1,0,150deg) scale(0)  perspective(400px);} 
    100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);} 
}

@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

/** DOTS CSS**/

.elo {
    position: relative;
    z-index: 99;
}
.elo ul{

display: inline-block;
float:right;
width:inherit;
margin: 0px;
padding-right: 200px;
padding-left: 200px;
padding:0px;
list-style: none;
background: rgba(0, 0, 0, 0);
max-width: 110%;
}
.elo ul li {
width: auto;
height: auto;
display: inline-block;
bottom: 0;
vertical-align: bottom;
margin-top: -43px;
    padding-bottom: 30px;
}
.elo ul li a {
    float:right;
display: block;
height: 100px;
width: 100px;
position:relative;
    padding-top: 30px;
-webkit-transition-property: width, height,margin-top;
-webkit-transition-duration: 1s;
-o-transition-property: width, height,margin-top;
-o-transition-duration: 1s;
-moz-transition-property: width, height,margin-top;
-moz-transition-duration: 1s;
}

.elo ul li a:hover {
width: 150px;
height: 150px;
margin-top: 0px;
    padding-top: 30px;
font-size: 35px;
}
.elo ul li a img {
width: 100%;
position: relative;
left: 0;
border: 5px;
}

我对这整个前端开发工作都很陌生，所以我很欣赏任何批评。

Answer 1

首先，你对前端开发不熟悉，首先你可能想在google中查看一些很酷的教程，用CSS定位元素，并祝你在一大堆工具和框架中做到最好有。我猜你想要将一个居中对齐的一个放在另一个上面，这可以通过找到一个已定位的相对父级来完成，并且它的子级具有一个定位的绝对属性，如下所示：

<div class="wrapper">
    <div class="Modern-Slider">
      <!-- Items -->              
    </div>

    <div class="elo">
        <ul>
            <li><a href="http://techumber.com/"><span>Kolekcje</span><img src="images/notable-icon.png" alt="Kolekcje"></a></li>
            <li><a href="http://www.meble.vox.pl/salon-olsztyn-salon-83"><span>Kontakt</span><img src="images/notable-icon.png" alt="Kontakt"></a></li>
            <li><a href="http://techumber.com/"><span>Młodzieżowe</span><img src="images/notable-icon.png" alt="Młodzieżowe"></a></li>
            <li><a href="http://techumber.com/"><span>BABY Vox</span><img src="images/notable-icon.png" alt="harddrive"></a></li>
        </ul>
    </div> 
</div>

所以CSS应该像这样结束：

/ * SOLUTION * /

.wrapper{
    position: relative;

}

.elo{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top:75%
}

希望这有帮助！

滑块上的图标

1 个答案: