Question

我如何将此徽标插入导航栏？

请帮助我，我需要在左导航栏中放置徽标

为aaaaaaaaaaaaaaaaaaaaaa帖子添加更多细节

点击链接以查看代码

    @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;
}

Answer 1

您可以将徽标包含在ul元素中，并将其设置为webClient.Headers.Add("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.0.3705;)");的左侧：

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;
}

Answer 2

@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{
    position: absolute;
    left: 0;
    top: 0;
}

<!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>

导航栏左侧带有徽标

2 个答案: