我創建了一個網站并嘗試進行回應式設計。我關注 youtube 上的視頻并按照視頻中的方式執行所有操作，但我沒有看到漢堡包圖示。你知道為什么嗎？它在視頻中完美運行。這是我的代碼的樣子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikolinart</title>
<link rel="stylesheet" href="./styles/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Nikolin<span>art</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello and welcome to</div>
<div class="text-2">Nikolin<span>art</span></div>
<div class="text-3">My name is Nikolina and I'm a <span>Painter</span></div>
</div>
</div>
</section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore aperiam rem laboriosam corrupti sunt, aspernatur doloremque ipsum molestiae, eveniet debitis vitae tempore ea molestias atque fugiat hic voluptas dignissimos mollitia quasi earum saepe fuga cum. Vero quia blanditiis voluptatum suscipit consequuntur praesentium odit asperiores totam quod, aliquid esse voluptas voluptatem dolorum! Dolor provident, sint repellat esse voluptates facere, dolorem tempora, libero at voluptas repellendus saepe reprehenderit laudantium dicta quas id aliquid corporis. Vitae, perferendis dolores! Explicabo voluptatum officiis vel exercitationem voluptate voluptatem in qui expedita ullam voluptas doloremque modi, ratione iure assumenda nostrum architecto ipsa, minima est corporis sed consequuntur, ipsam corrupti? Ipsam fugit fuga quia tempora ut beatae aperiam impedit iste nostrum consequuntur delectus esse dignissimos, minima placeat sunt possimus. Dolor aperiam beatae id, dignissimos voluptatem vero? Dignissimos illum iste fuga quo at repellendus, recusandae itaque minima accusantium dolorem debitis voluptatem id sint facilis, odit quos aut architecto nemo atque distinctio quaerat error. Deserunt maiores dolorum distinctio placeat fugiat consectetur ipsa facilis quam, saepe ea voluptas esse est ullam itaque sapiente quidem hic. Adipisci facere minima eaque natus sapiente officiis totam magnam consectetur doloribus, consequuntur quis dolorem corporis harum blanditiis mollitia iusto molestiae repellendus quia error, neque fuga praesentium!</p>
<script src="./script/script.js"></script>
</body>
</html>
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
uj5u.com熱心網友回復：
兩個可能的原因：
您設定了display:none使文本隱藏的，或者您不小心使用了color:#fff（白色）并具有相同的顏色background
此外，你甚至沒有它的內容。
.menu-btn {
color:red;
font-size: 23px;
cursor: pointer;
}<div class="menu-btn">
<i class="fas fa-bars">Yes</i>
</div>uj5u.com熱心網友回復：
display : none 隱藏您需要洗掉該行 css 的元素
uj5u.com熱心網友回復：
在您的 CSS 屬性中，您的 display 屬性為 None，用于隱藏元素。將班級更改為
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
}
另外，我看到您使用了 Font Awesome 圖示并且您沒有匯入它們，請確保正確匯入它們。如果您使用 CDN 加載 Font Awesome，請確保在 HTML 的 HEAD 標記中添加必要的匯入。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411887.html
標籤：
上一篇：我如何將背景放在css中