嘿，最近我正在創建在 html 檔案中有此代碼的導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<h1> <a href="css.html" class="title">Logo</a></h1>
<span class="menu-btn">
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars"></i>
</label>
</span>
<div class="nav-links">
<a href="#"class="active">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</div>
</nav>
</body>
</html>
這是CSS代碼
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
color: white;
height: 76px !important;
line-height: 76px;
color: white;
}
a {
color: white;
text-decoration: none;
}
.menu-btn{
display: none;
}
@media(max-width: 600px){
.nav-links{
display: none;
}
.menu-btn{
display: inline;
}
}
@media(min-width: 600px){
nav {
display: flex;
justify-content: space-between;
}
.nav-links a {
transition: .2s ease-in-out;
font-size: 20px;
padding: 7px 13px;
}
.nav-links a:hover, .nav-links .active{
background: white;
color: black;
border-radius: 12px;
}
}
問題是標簽不可見。請快點告訴我一些事情。是的，現在你會說我讓它不顯示，所以在媒體查詢中說不顯示。請不要復制我的代碼。??????????
uj5u.com熱心網友回復：
標簽用類名包裹在一個跨度中menu-btn。
但在menu-btn規則集中的 CSS 中有display:none;.
嘗試洗掉display:none.menu-btn
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
color: white;
height: 76px !important;
line-height: 76px;
color: white;
}
a {
color: white;
text-decoration: none;
}
.menu-btn {
}
@media(max-width: 600px) {
.nav-links {
display: none;
}
.menu-btn {
display: inline;
}
}
@media(min-width: 600px) {
nav {
display: flex;
justify-content: space-between;
}
.nav-links a {
transition: .2s ease-in-out;
font-size: 20px;
padding: 7px 13px;
}
.nav-links a:hover,
.nav-links .active {
background: white;
color: black;
border-radius: 12px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<h1> <a href="css.html" class="title">Logo</a></h1>
<span class="menu-btn">
<input type="checkbox" id="check">
<label for="check" style="width:30px;">
<i class="fas fa-bars"></i>
</label>
</span>
<div class="nav-links">
<a href="#" class="active">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</div>
</nav>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422175.html
標籤：
下一篇：我對選擇器的理解是否正確？