时间戳

首页 > 解决方案 > 类文本内容设置为类滑块但它被推下？

javascript - 类文本内容设置为类滑块但它被推下？

问题描述

我正在编写一个非常简单的 HTML CSS 程序，这是我的问题。

我在名为滑块的 id 中制作了一张图片，我想在其中写入一些文字。作为教程，我在滑块中编写了一个名为 text-content 的类。很容易理解，对吧？

这是我所有的 index.html 代码

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
    <div id="header">
        <ul id="nav">
            <li><a href="">HOME</a></li>
            <li><a href="">BAND</a></li>
            <li><a href="">TOUR</a></li>
            <li><a href="">CONTACT</a></li>
            <li>
                <a href="">MORE
                <i class="nav-arrow-down ti-arrow-circle-down"></i>
            <ul class="subnav">
                <li><a href="">Merchandise</a></li>
                <li><a href="">Extras</a></li>
                <li><a href="">Media</a></li>
            </ul>        
                </a></li>
        </ul>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>
    <div id="slider">
        <div class="text-content">
            <h2 class="text-heading">New York</h2>
            <div class="text-description">We had the best time playing at Venice Beach!</div>
        </div>
    </div>
    <div id="content" style="height: 1000px; background: #ccc;">
    </div>
    <div id="footer">
    </div>
    </div>    
    </body>
    </html>

这就是我的全部代码。

这是教程的图片，可以看到，文字在图片中

我的教程图片

因为当我点击图片时，它告诉我它在滑块中。正如您在这张图片中看到的，图片进入滑块 我认为如果图片在滑块中，而文本内容在滑块中，那么文本内容必须在图片中？

我的问题是，我将 class text-content 放在 id 滑块中，但是 class text-content 被向下推，如您在这张图片中所见关于文字内容的图片

你能向我解释一下这个问题吗？非常感谢您的宝贵时间。

标签： javascripthtmlcss

解决方案

我假设你想制作一个Hero Image。您可以向上移动文本位置。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;

}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
    <div id="header">
        <ul id="nav">
            <li><a href="">HOME</a></li>
            <li><a href="">BAND</a></li>
            <li><a href="">TOUR</a></li>
            <li><a href="">CONTACT</a></li>
            <li>
                <a href="">MORE
                <i class="nav-arrow-down ti-arrow-circle-down"></i>
            <ul class="subnav">
                <li><a href="">Merchandise</a></li>
                <li><a href="">Extras</a></li>
                <li><a href="">Media</a></li>
            </ul>        
                </a></li>
        </ul>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>
    <div id="slider">
        <div class="text-content">
            <h2 class="text-heading">New York</h2>
            <p class="text-description">We had the best time playing at Venice Beach!</p>
        </div>
    </div>
    <div id="content" style="height: 1000px; background: #ccc;">
    </div>
    <div id="footer">
    </div>
    </div>    
    </body>
    </html>

推荐阅读