我正在撰寫一個非常簡單的 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 被按下了，正如你在這張圖片中看到的 
你能向我解釋一下這個問題嗎？非常感謝您的寶貴時間。
uj5u.com熱心網友回復：
當您質疑要創建英雄影像部分時，您面臨一些設計問題。所以你必須尋找你應該使用的 CSS 屬性。如果您想要這樣的演示部分，那么我建議您查看本手冊。 https://www.w3schools.com/howto/howto_css_hero_image.asp
您可以根據需要重新設計您的部分。
uj5u.com熱心網友回復：
對于#sliderdiv，使用display:inline-block：
#slider{display:inline-block}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358312.html
標籤：javascript html css
上一篇：物件中的最大值