如何在導航欄的左上角添加徽標？
[英]How do I add a Logo the the top left of the Navigation Bar?
問題描述
現在 Logo 圖像包含在第 17 行的 HTML 代碼中，名為 Studio Ghibli Logo。 我怎樣才能移動它以便它可以位於導航欄參考圖像的左上角
與我包含的代碼相比，是否有更好的方法來獲取導航欄代碼？ 隨時提出建議、工具或參考。
我包含了我的代碼片段。
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #52b2cf; } li { margin-left: 50px; float: Left; } li a { display: block; border-radius: 20px; background-color: #fffbeb; color: #7b81ab; font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 15px 18px; padding-right: 70px; padding-left: 70px; margin: 20px; text-decoration: none; } li a:hover:not(.active) { background-color: #fff1cc; }.active { background-color: #d8d5f2; } body { background-color: ghostwhite; border-style: solid; border-color: white; } img { margin-left: 10px; } h1 { color: darkslateblue; margin-left: 20px; margin-left: 10px; } h2 { color: lightcoral; border-style: outset; border-color: white; margin-left: 10px; } p { margin-left: 15px; color: darkslateblue; } img { margin-left: 10px; }
<.DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="home.css"> <title>Spirited Away Fansite</title> <ul> <li><a class="active" href="Home.html">Home</a></li> <li><a href="FilmPlot.html">Film Plot</a></li> <li><a href="cast.html">Cast</a></li> <li><a href="prod.html">Production</a></li> <li><a href="recept.html">Reception</a></li> </ul> <body> <img src="images/Studio_Ghibli_logo.svg:png" alt="Studio Ghibli Logo" width="200" height="90"> <h1> 千と千尋の神隠し ∘ Spirited Away </h1> <p> This is a fansite for the Studio Ghibli Film Spirited Away </p> <h2> ABOUT </h2> <p> Spirited Away (Japanese, 千と千尋の神隠し: Hepburn, Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film. and Mitsubishi, Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood. enters the world of Kami (spirits of Japanese Shinto folklore).<br> </p> <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400"> </body>
4 個解決方案
解決方案1
1 2022-03-17 19:46:16
我會將ul和圖像嵌套在nav中，並將其稱為navbar 。 然后您可以將該導航設置為display: flex; 帶有justify-content: space-between; . 最后，只需將背景顏色從 ul 移動到新的div 。
我還仔細檢查並清理了ul和li ， a的 styles 以提高響應速度。 是否要使用這些完全取決於您。
旁注 - body元素應該包含所有頁面元素，包括 nav ul的。
body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #52b2cf; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }.navbar { background-color: #52b2cf; } li a { display: block; border-radius: 20px; background-color: #fffbeb; color: #7b81ab; font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 10px; white-space: nowrap; text-decoration: none; } li a:hover:not(.active) { background-color: #fff1cc; }.active { background-color: #d8d5f2; } body { background-color: ghostwhite; border-style: solid; border-color: white; } h1 { color: darkslateblue; margin-left: 20px; margin-left: 10px; } h2 { color: lightcoral; border-style: outset; border-color: white; margin-left: 10px; } p { margin-left: 15px; color: darkslateblue; } body>.navbar { display: flex; justify-content: space-between; width: 100%; }
<.DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="home:css"> <title>Spirited Away Fansite</title> <body> <nav class="navbar"> <img src="https.//w0.peakpx.com/wallpaper/217/740/HD-wallpaper-studio-ghibli-logo-black-and-white-studio-ghibli-totoro-thumbnail.jpg" alt="Studio Ghibli Logo" width="50" height="50" class="logo"> <ul> <li><a class="active" href="Home.html">Home</a></li> <li><a href="FilmPlot.html">Film Plot</a></li> <li><a href="cast.html">Cast</a></li> <li><a href="prod.html">Production</a></li> <li><a href="recept:html">Reception</a></li> </ul> </nav> <h1> 千と千尋の神隠し ∘ Spirited Away </h1> <p> This is a fansite for the Studio Ghibli Film Spirited Away </p> <h2> ABOUT </h2> <p> Spirited Away (Japanese, 千と千尋の神隠し: Hepburn, Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film. and Mitsubishi, Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood. enters the world of Kami (spirits of Japanese Shinto folklore).<br> </p> <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400"> </body>
解決方案2
0 2022-03-17 20:00:17
您絕對應該將ul放入body中（您在頁面上顯示的每個 HTML 元素都必須在body中為 go）。 然后有一個你可以使用的nav標簽：
<nav>
<img src="https://w0.peakpx.com/wallpaper/217/740/HD-wallpaper-studio-ghibli-logo-black-and-white-studio-ghibli-totoro-thumbnail.jpg" alt="Studio Ghibli Logo" width="50" height="50">
<ul>
<li><a class="active" href="Home.html">Home</a></li>
<li><a href="FilmPlot.html">Film Plot</a></li>
<li><a href="cast.html">Cast</a></li>
<li><a href="prod.html">Production</a></li>
<li><a href="recept.html">Reception</a></li>
</ul>
</nav>
我想給你更多關於導航欄的提示，但不清楚你希望它看起來像什么。
解決方案3
0 2022-03-17 20:01:13
您只想獲取徽標圖像並將其作為導航中的列表項。
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #52b2cf; } li { margin-left: 50px; float: Left; } li a { display: block; border-radius: 20px; background-color: #fffbeb; color: #7b81ab; font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 15px 18px; padding-right: 70px; padding-left: 70px; margin: 20px; text-decoration: none; } li a:hover:not(.active) { background-color: #fff1cc; }.active { background-color: #d8d5f2; } body { background-color: ghostwhite; border-style: solid; border-color: white; } img { margin-left: 10px; } h1 { color: darkslateblue; margin-left: 20px; margin-left: 10px; } h2 { color: lightcoral; border-style: outset; border-color: white; margin-left: 10px; }
<.DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="home.css"> <title>Spirited Away Fansite</title> <ul> <li><img src="images/Studio_Ghibli_logo.svg.png" alt="Studio Ghibli Logo" width="200" height="90"></li> <li><a class="active" href="Home.html">Home</a></li> <li><a href="FilmPlot.html">Film Plot</a></li> <li><a href="cast.html">Cast</a></li> <li><a href="prod.html">Production</a></li> <li><a href="recept:html">Reception</a></li> </ul> <body> <h1> 千と千尋の神隠し ∘ Spirited Away </h1> <p> This is a fansite for the Studio Ghibli Film Spirited Away </p> <h2> ABOUT </h2> <p> Spirited Away (Japanese, 千と千尋の神隠し: Hepburn, Sen to Chihiro no Kamikakushi, 'Sen and Chihiro's Spiriting Away') is a 2001 Japanese animated fantasy film written and directed by Hayao Miyazaki, animated by Studio Ghibli for Tokuma Shoten, Nippon Television Network, Dentsu, Buena Vista Home Entertainment, Tohokushinsha Film. and Mitsubishi, Spirited Away tells the story of Chihiro Ogino (Hiiragi), a ten-year-old girl who, while moving to a new neighborhood. enters the world of Kami (spirits of Japanese Shinto folklore).<br> </p> <img src=images/Spirited_Away_Japanese_poster.png alt="Spirited Away Movie Poster" width="290" height="400"> <img src="images/hayaomiya.jpg" alt="Hayao Miyazaki at desk" width="290" height="400"> </body>
解決方案4
-1 2022-03-17 19:45:21
您可以為此使用 Bootstrap 或設置一個 CSS 網格，這樣您就可以將潛水設置到頁面上的某個位置，然后將內容左對齊。
HTML/CSS； 我如何制作這個導航欄（水藍色的？左邊是.png格式的標志，它是如何突出背景的？
[英]HTML/CSS ; How do I make this navigation bar (aquablue one? On the left is a logo in .png format, how does it stick out of background?
如何將導航欄向右移動以適應欄左側的徽標
[英]How to move navigation bar to more to the right to fit a logo left of the bar
Bootstrap頂部固定的導航欄，帶有徽標左縮進和登錄和注冊按鈕
[英]Bootstrap top-fixed navigation bar with logo left-indent and login and register button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.