个人中心
gpt4 book ai didi

html - 左侧带有 Logo 的导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 00:34:57 25 4
gpt4 key购买 nike

https://codepen.io/f1rmeza/pen/BayxqWw

如何将此 Logo 插入导航栏？

请帮帮我，我需要在左侧导航栏中放置 Logo

我正在为帖子 aaaaaaaaaaaaaaaaaa 添加更多细节

点击链接查看代码

    @import url('https://fonts.googleapis.com/css?family=Viga&display=swap');

*{
  margin: 0;
  padding: 0;
}

/*Config da navbar*/
.navbar ul{
  display: flex;
  justify-content: flex-end;
  background-color: #333;
  padding: 25px;
}

/*Config dos tópicos da navbar*/
.navbar li{
  list-style: none;
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
}

.navbar li:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
  background-color: #f5b240;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar li:hover:before{
  visibility: visible;
  transform: scaleX(0.5);
}

/*Config dos textos da navbar*/
.navbar a{
  text-decoration: none;
  font-family: 'Viga', sans-serif;
  padding: 0 20px;
  color: white;
}

最佳答案

您可以在 ul 元素中包含您的 Logo ，并使用 margin-right: auto 将其设置在左侧:

@import url('https://fonts.googleapis.com/css?family=Viga&display=swap');

*{
  margin: 0;
  padding: 0;
}

/*Config da navbar*/
.navbar ul{
  display: flex;
  justify-content: flex-end;
  background-color: #333;
  padding: 25px;
}

/*Config dos tópicos da navbar*/
.navbar li{
  list-style: none;
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
}

.navbar li:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
  background-color: #f5b240;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar li:hover:before{
  visibility: visible;
  transform: scaleX(0.5);
}

/*Config dos textos da navbar*/
.navbar a{
  text-decoration: none;
  font-family: 'Viga', sans-serif;
  padding: 0 20px;
  color: white;
}

.navbar-logo{
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NAVBAR CAIO</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navbar">
      <ul>
        <img class="navbar-logo" src="https://spartanpower.com/wp-content/uploads/2018/07/Spartan-Power-Logo-512-50x50.png">
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </div>

  </body>
</html>

关于html - 左侧带有 Logo 的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59699628/

25 4 0
文章推荐： javascript - 停止将 HTML href 连接到地址栏
文章推荐： javascript - Sails JS如何在自动路由POST后触发操作
文章推荐： javascript - Node.js 缓冲区与类型化数组 - 性能
文章推荐： python - Pandas 自相关函数错误 : 'DataFrame' object has no attribute 'autocorr'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com