时间戳

首页 > 解决方案 > 如何将文本稍微移到顶部？

javascript - 如何将文本稍微移到顶部？

问题描述

我正在尝试设计一个滑块，要在下面显示标题和小细节，并带有指向标题详细信息的链接，我正在尝试使用 CSS 和 HTML 来完成这项任务。这是 HTML 文件：

@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");
body {
  width: 100%;
  margin: 0 auto;
  font-family: "Raleway", sans-serif;
  color: #fff;
  font-size: 1.75vw;
}

body * {
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 100;
}

h1 {
  font-size: 6vw;
  text-transform: uppercase;
  font-weight: normal;
}

ul,
li {
  list-style: none;
}

label {
  cursor: pointer;
}

input {
  display: none;
}

.slider {
  height: 25vw;
  overflow: hidden;
}

.slider>ul {
  height: 100%;
  z-index: 100;
}

.slider>ul>li {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  transition: all 2000ms ease;
}

.slider>#input-slide-0:checked~ul>li.slide-0,
.slider>#input-slide-1:checked~ul>li.slide-1,
.slider>#input-slide-2:checked~ul>li.slide-2,
.slider>#input-slide-3:checked~ul>li.slide-3 {
  opacity: 1;
  z-index: 2;
}

.slider>ul>li.slide-0 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-1 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-2 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-3 {
  background-color: #47d7ed;
}

.slider>.slider-dot {
  position: relative;
  margin-top: -4vw;
  text-align: center;
  z-index: 300;
  font-size: 0;
}

.slider>.slider-dot>label {
  position: relative;
  display: inline-block;
  margin: 1vw 0.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: #fff;
}

.slider>#input-slide-0:checked~.slider-dot>label.slide-0,
.slider>#input-slide-1:checked~.slider-dot>label.slide-1,
.slider>#input-slide-2:checked~.slider-dot>label.slide-2,
.slider>#input-slide-3:checked~.slider-dot>label.slide-3 {
  background-color: black;
}

.slider>.slider-dot>label:hover {
  background-color: #f73c3f !important;
}

.slider>.slide-description {
  position: absolute;
  width: 50%;
  top: calc(50% - 3vw);
  left: 25%;
  z-index: 200;
}

.slider>.slide-description>label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease;
}

.slider>#input-slide-0:checked~.slide-description>.slide-0,
.slider>#input-slide-1:checked~.slide-description>.slide-1,
.slider>#input-slide-2:checked~.slide-description>.slide-2,
.slider>#input-slide-3:checked~.slide-description>.slide-3 {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.slider>.slide-description>label>.text-slide {
  margin: 0 auto;
  line-height: 6vw;
  top: 0px;
}

@keyframes slide {
  0%,
  100% {
    opacity: 0;
  }
  6%,
  25% {
    opacity: 1;
    z-index: 2;
  }
  30%,
  50% {
    opacity: 0;
    z-index: 2;
  }
}

.slider>#input-slide-autoplay:checked~ul>li.slide-0 {
  animation: slide 32000ms infinite -2000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-1 {
  animation: slide 32000ms infinite 6000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-2 {
  animation: slide 32000ms infinite 14000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-3 {
  animation: slide 32000ms infinite 22000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li {
  transition: none;
}

@keyframes arrow {
  0%,
  24% {
    z-index: 1;
  }
  25%,
  100% {
    z-index: -1;
  }
}

@keyframes dot {
  0%,
  24% {
    background-color: #333;
  }
  25%,
  100% {
    background: #fff;
  }
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-0 {
  animation: dot 32000ms infinite -2000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-1 {
  animation: dot 32000ms infinite 6000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-2 {
  animation: dot 32000ms infinite 14000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-3 {
  animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
  0%,
  5% {
    opacity: 0;
    z-index: 2;
    visibility: visible;
  }
  6%,
  24% {
    opacity: 1;
    z-index: 2;
    visibility: visible;
  }
  25%,
  100% {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
  }
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-0 {
  animation: description 32000ms infinite -2000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-1 {
  animation: description 32000ms infinite 6000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-2 {
  animation: description 32000ms infinite 14000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-3 {
  animation: description 32000ms infinite 22000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>label {
  transition: none;
}

.readmorebutton {
  padding: 5px 15px;
  color: #fff;
  background-color: #C10E0E;
  display: inline-block;
  margin: 4px 0;
  text-decoration: none;
  border-radius: 3px;
}
<div class="slider">
  <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
  <ul>
    <li class="slide-0"></li>
    <li class="slide-1"></li>
    <li class="slide-2"></li>
    <li class="slide-3"></li>
  </ul>
  <div class="slide-description">
    <label class="slide-0">
                    <h1 class="text-slide">Lorem Ipsum</h1>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
                    <a href="{% url 'movies:movie_detail' movie.slug %}" class="readmorebutton">Read More</a>
                </label>
    <label class="slide-1">
                    <h1 class="text-slide">CSS SLIDER #2</h1>
                </label>
    <label class="slide-2">
                    <h1 class="text-slide">CSS SLIDER #3</h1>
                </label>
    <label class="slide-3">
                    <h1 class="text-slide">CSS SLIDER #4</h1>
                </label>
  </div>
  <div class="slider-dot">
    <label class="slide-0" for="input-slide-0"></label>
    <label class="slide-1" for="input-slide-1"></label>
    <label class="slide-2" for="input-slide-2"></label>
    <label class="slide-3" for="input-slide-3"></label>
  </div>
</div>

使用上述所有代码，我得到以下输出：- 在此处输入图像描述

与现在相比，我正在尝试将H1、h5和a部分移到略高的位置。

标签： javascripthtmljquerycssslider

解决方案

只是降低了 CSS 中的最高值。

.slider > .slide-description { 
  position: absolute;
  width: 50%; 
  top: calc(35% - 3vw); //===> you can adjust the top position according to your needs here
  left: 25%; 
  z-index: 200; 
}

完整代码：

@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");
body {
    width: 100%;
    margin: 0 auto;
    font-family: "Raleway", sans-serif;
    color: #fff;
    font-size: 1.75vw;
}
body * {
    width: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    z-index: 100;
}
h1 {
    font-size: 6vw;
    text-transform: uppercase;
    font-weight: normal;
}
ul,
li {
    list-style: none;
}
label {
    cursor: pointer;
}
input {
    display: none;
}

.slider {
    height: 25vw;
    overflow: hidden;
}

.slider > ul {
    height: 100%;
    z-index: 100;
}
.slider > ul > li {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    opacity: 0;
    z-index: 1;
    transition: all 2000ms ease;
}
.slider > #input-slide-0:checked ~ ul > li.slide-0,
.slider > #input-slide-1:checked ~ ul > li.slide-1,
.slider > #input-slide-2:checked ~ ul > li.slide-2,
.slider > #input-slide-3:checked ~ ul > li.slide-3 {
    opacity: 1;
    z-index: 2;
}
.slider > ul > li.slide-0 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-1 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-2 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-3 {
    background-color: #47d7ed;
}


.slider > .slider-dot {
    position: relative;
    margin-top: -4vw;
    text-align: center;
    z-index: 300;
    font-size: 0;
}
.slider > .slider-dot > label {
    position: relative;
    display: inline-block;
    margin: 1vw 0.5vw;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;

    background-color: #fff;
}
.slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,
.slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,
.slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,
.slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {
    background-color: black;
}
.slider > .slider-dot > label:hover {
    background-color: #f73c3f !important;
}
.slider > .slide-description {
    position: absolute;
    width: 50%;
    top: calc(35% - 3vw);
    left: 25%;
    z-index: 200;
}
.slider > .slide-description > label {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    cursor: default;

    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.75s ease;
}
.slider > #input-slide-0:checked ~ .slide-description > .slide-0,
.slider > #input-slide-1:checked ~ .slide-description > .slide-1,
.slider > #input-slide-2:checked ~ .slide-description > .slide-2,
.slider > #input-slide-3:checked ~ .slide-description > .slide-3 {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}
.slider > .slide-description > label > .text-slide {
    margin: 0 auto;
    line-height: 6vw;
    top: 0px;
}

@keyframes slide {
    0%,
    100% {
        opacity: 0;
    }
    6%,
    25% {
        opacity: 1;
        z-index: 2;
    }
    30%,
    50% {
        opacity: 0;
        z-index: 2;
    }
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-0 {
    animation: slide 32000ms infinite -2000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-1 {
    animation: slide 32000ms infinite 6000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-2 {
    animation: slide 32000ms infinite 14000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-3 {
    animation: slide 32000ms infinite 22000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li {
    transition: none;
}

@keyframes arrow {
    0%,
    24% {
        z-index: 1;
    }
    25%,
    100% {
        z-index: -1;
    }
}

@keyframes dot {
    0%,
    24% {
        background-color: #333;
    }
    25%,
    100% {
        background: #fff;
    }
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0 {
    animation: dot 32000ms infinite -2000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1 {
    animation: dot 32000ms infinite 6000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2 {
    animation: dot 32000ms infinite 14000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3 {
    animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
    0%,
    5% {
        opacity: 0;
        z-index: 2;
        visibility: visible;
    }
    6%,
    24% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
    }
    25%,
    100% {
        opacity: 0;
        z-index: 0;
        visibility: hidden;
    }
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0 {
    animation: description 32000ms infinite -2000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1 {
    animation: description 32000ms infinite 6000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2 {
    animation: description 32000ms infinite 14000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3 {
    animation: description 32000ms infinite 22000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > label {
    transition: none;
}

.readmorebutton{
    padding: 5px 15px; 
    color:#fff; 
    background-color: #C10E0E; 
    display: inline-block; 
    margin: 4px 0; 
    text-decoration: none; 
    border-radius: 3px;
    }
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Trying</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div class="slider">
            <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
            <ul>
                <li class="slide-0"></li>
                <li class="slide-1"></li>
                <li class="slide-2"></li>
                <li class="slide-3"></li>
            </ul>
            <div class="slide-description">
                <label class="slide-0">
                    <h1 class="text-slide">Lorem Ipsum</h1>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
                    <a href="{% url 'movies:movie_detail' movie.slug %}" class="readmorebutton">Read More</a>
                </label>
                <label class="slide-1">
                    <h1 class="text-slide">CSS SLIDER #2</h1>
                </label>
                <label class="slide-2">
                    <h1 class="text-slide">CSS SLIDER #3</h1>
                </label>
                <label class="slide-3">
                    <h1 class="text-slide">CSS SLIDER #4</h1>
                </label>
            </div>
            <div class="slider-dot">
                <label class="slide-0" for="input-slide-0"></label>
                <label class="slide-1" for="input-slide-1"></label>
                <label class="slide-2" for="input-slide-2"></label>
                <label class="slide-3" for="input-slide-3"></label>
            </div>
        </div>
    </body>
</html>

推荐阅读