如何在导航栏的左上角添加徽标？
[英]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.