CSS 確實是一門可愛的語言。我正在嘗試將我的第一個登錄頁面創建為個人專案，現在我一直在嘗試編輯錨標簽/超鏈接。這里的問題是，無論我做什么，我都無法洗掉專案符號點（串列樣式），更改字體顏色（顏色），將文本更改為行內（顯示）然后洗掉下劃線（文本裝飾）。
HTML：
<!DOCTYPE html>
<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>Landing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luxurious Roman&family=Luxurious Script&family=Roboto:wght@100&family=The Nautigal&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="navbar">
<label class="logo">Placeholder</label>
<ul id="links">
<li><a href="landingpage.html">Link one</a></li>
<li><a href="landingpage.html">Link two</a></li>
<li><a href="landingpage.html">Link three</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS：
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1f2937;
height: 70px;
width: 100%;
color: white;
padding-top: 20px;
padding-bottom: 10px;
display: flex;
}
.logo {
font-size: 2.5rem;
font-family: Luxurious Roman;
}
nav ul li a {
color: white;
list-style: none ;
text-decoration: none;
background-color: royalblue;
display: inline;
}
uj5u.com熱心網友回復：
您沒有將 css 屬性與它們所指的 html 元素一起使用，您應該這樣做：
nav ul li{
list-style: none;
display: inline;
}
nav ul li a {
color: red;
text-decoration: none;
}
list-style屬性應該應用于<li>元素，color and text-decoration應該應用于<a>元素。
uj5u.com熱心網友回復：
我創建了 HTML 和 CSS 檔案來測驗您的檔案，基本上這里的問題是您的 css 說明，我可以幫助您，首先，如果您想修改串列洗掉專案符號，您必須首先正確使用 css 選擇器：
當前之一：
nav ul li a {
color: white;
list-style: none ;
text-decoration: none;
background-color: royalblue;
display: inline;
}
但是選擇器正在選擇a標簽，所以如果您想洗掉串列中的專案符號點，您可以使用以下內容：
nav ul {
list-style-type: none;
}
我將在此處洗掉這些鏈接，這些鏈接可能會對您有所幫助，因為它們在我學習時對我有所幫助：
https://web.dev/learn/css/
https://www.w3schools.com/css/
uj5u.com熱心網友回復：
我們知道flex，將元素的子元素放在一列中，
因此元素將是一個正確的
，而不是另一個...
所以你讓導航靈活，但導航
直接有孩子的1.<label>和2。<ul>
我們需要什么
flex也放入<ul>
nav,
ul {
display: flex;
}
并添加list-style-type到none（中<ul>），因此串列之前不再有專案符號
nav ul {
list-style-type: none;
gap: 10px;
}
還添加了一個gap，就像邊距（因為flex在<ul>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1f2937;
height: 70px;
width: 100%;
color: white;
padding-top: 20px;
padding-bottom: 10px;
}
.logo {
font-size: 2.5rem;
font-family: Luxurious Roman;
}
nav ul li a {
color: white;
list-style: none;
text-decoration: none;
/* background-color: royalblue; */
display: inline;
}
nav,
ul {
display: flex;
}
nav ul {
list-style-type: none;
gap: 10px;
}<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luxurious Roman&family=Luxurious Script&family=Roboto:wght@100&family=The Nautigal&display=swap" rel="stylesheet">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- navbar -->
<nav class="navbar">
<!-- logo -->
<label class="logo">Placeholder</label>
<!-- links -->
<ul id="links">
<!-- 1 -->
<li>
<a href="landingpage.html">Link one</a>
</li>
<!-- 2 -->
<li>
<a href="landingpage.html">Link two</a>
</li>
<!-- 3 -->
<li>
<a href="landingpage.html">Link three</a>
</li>
</ul>
</nav>
</header>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411153.html
標籤：
上一篇：使用GSAP的滑入和滑出效果