所以我只使用 html 和 css （沒有 JQuery）制作導(dǎo)航欄，我注意到應(yīng)用字體樣式的 css 只影響左側(cè)的“TAC”，而不影響右側(cè)的元素。此外，我需要讓每個單詞（它們在列表中）之間有一個空格，它們位于同一個 div 類中。我的代碼在圖片下方 <!DOCTYPE html><html> <head> <title>The Accounting Centre</title> <link rel="icon" type="image/png" href="TAC.png" sizes="16x16"> <style> body{ padding: 0; margin: 0;} .navbar{ position: fixed; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; background-color:#d4d7de; width: 100%; height:70px; z-index: 1; } .nav{ display: flex; justify-content: right; list-style: none; margin:15px; color:#000; text-decoration: none; text-transform: uppercase; } .logo { flex: 1 1 auto; margin-left: 10%; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size:35px; margin:15px; color:#000; text-decoration: none; text-transform: uppercase;} </style> </head> <body> <div class="navbar"> <a href="#" class="logo">TAC</a> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#services">Our Services</a></li> <li><a href="#info">Who We Are</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact us</a></li> </ul> </div> <div class="banner-area" id="home"l</div> <div class="about-area" id="about"</div> <div class="services-area" id="services"</div> <div class="info-area" id="info"</div> <div class="testimonials-area" id="testimonials"</div> <div class="contact-area" id="contact"</div> </body></html>
2 回答
慕桂英4014372
TA貢獻(xiàn)1871條經(jīng)驗 獲得超13個贊
“a”元素具有您需要覆蓋的初始樣式。
此外，您還需要修復(fù) HTML。id="home" 之后有一個錯誤的“1”，您需要添加“>”來關(guān)閉打開的 div 元素。
嘗試這個：
<head>
<title>The Accounting Centre</title>
<link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
<style>
body{
padding: 0;
margin: 0;
}
.navbar{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
background-color:#d4d7de;
width: 100%;
height:70px;
z-index: 1;
}
.nav {
display: flex;
justify-content: right;
list-style: none;
margin:15px;
}
.nav a {
color:#000;
text-decoration: none;
text-transform: uppercase;
padding: 0 1rem;
}
.logo {
flex: 1 1 auto;
margin-left: 10%;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size:35px;
margin:15px;
color:#000;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<div class="navbar">
<a href="#" class="logo">TAC</a>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#info">Who We Are</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<div class="banner-area" id="home"></div>
<div class="about-area" id="about"></div>
<div class="services-area" id="services"></div>
<div class="info-area" id="info"></div>
<div class="testimonials-area" id="testimonials"></div>
<div class="contact-area" id="contact"></div>
</body>
</html>
尚方寶劍之說
TA貢獻(xiàn)1788條經(jīng)驗 獲得超4個贊
使用 bootstraps 網(wǎng)格系統(tǒng)并將每個元素分配在相同大小的 div 內(nèi)。然后您可以使用填充來在元素之間留出空間。
- 2 回答
- 0 關(guān)注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消