如何将文字稍微移到顶部？

编程问答 2022-08-15

问题描述

我正在尝试设计一个滑块，要在下面显示标题和小细节以及指向标题细节的链接，我正在尝试使用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>

使用以上所有代码，我得到以下输出：

enter image description here

与当前相比，我正在尝试将H1，h5和a部分移到稍上方。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjqueryslider