时间戳

首页 > 解决方案 > 如何在屏幕左上角放置徽标？

html - 如何在屏幕左上角放置徽标？

问题描述

下面是我的代码。我无法在屏幕左上角显示徽标。

我的主要问题是图像没有显示在屏幕上的任何位置，尽管我在图像部分输入了正确的文件名。

如果有人能帮助我，我将不胜感激！提前致谢。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
        }

        li {
          float: right;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 33px;
          height: 67px;
          border-radius: 5px;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="imageO.jpg" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

标签： htmlcss

解决方案

在这里，我以另一种方式做到了这一点：

ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
   display:flex;
   justify-content:flex-end;
        }



        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          position:fixed;
          left:20px;;
        }
    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>

推荐阅读