在 Visual Studio Code 上制作作品集
[英]Making a Portfolio on Visual Studio Code
問題描述
您好，我正在嘗試使用 HTML、CSS 和 Javascript 創建投資組合。我之前唯一的經驗是制作一個帶有標准文本和淺色/深色主題按鈕的基本網站。 我試圖讓我的標題位於導航欄的左側，而我的目錄位於導航欄的左側。 有人可以解釋我將如何做到這一點。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } /* navbar styling */.navbar{ position: fixed; width: 100%; background: crimson; font-family: 'Ubuntu', sans-serif; }.navbar.maxwidth{ display: flex; align-items: center; justify-content: space-between; }.navbar.logo a{ color: #fff; font-size: 35px; font-weight: 600; }.navbar.menu li{ list-style: none; display: inline-block; }.navbar.menu li a{ color: #fff; float: right; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Personal Portfolio</title> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <nav class="navbar"> <div class="max-width"> <div class="logo"><a href='#'>Portfo<span>lio.</span></a></div> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
1 個解決方案
解決方案1
1 2022-04-20 01:18:58
你做得非常正確。 您的 css 打錯了。 我將maxwidth更改為max-width 。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } /* navbar styling */.navbar{ position: fixed; width: 100%; background: crimson; font-family: 'Ubuntu', sans-serif; }.navbar.max-width{ display: flex; align-items: center; justify-content: space-between; }.navbar.logo a{ color: #fff; font-size: 35px; font-weight: 600; }.navbar.menu li{ list-style: none; display: inline-block; }.navbar.menu li a{ color: #fff; float: right; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Personal Portfolio</title> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <nav class="navbar"> <div class="max-width"> <div class="logo"><a href='#'>Portfo<span>lio.</span></a></div> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
Visual Studio Code上的代碼段
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.