Question

我正在编辑html模板，该模板的徽标尺寸小于我的徽标，我将我的徽标添加到了模板中，但未显示，

@media (max-width: 673px) {
  #logo {
    margin-left: 20px;
  }
}

#header #logo h1 {
  font-size: 34px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
}

#header #logo h1 a,
#header #logo h1 a:hover {
  color: #fff;
  padding-left: 10px;
  border-left: 4px solid #7c32ff;
}

#header #logo img {
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  #header #logo h1 {
    font-size: 28px;
  }
  #header #logo img {
    max-height: 40px;
  }
}

<section class="header-top">
  <div class="container box_1170">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <a href="index.html" class="logo">
          <img src="img/long_logo.png" alt="">
        </a>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 search-trigger">
        <a href="#" class="search">
          <i class="lnr lnr-magnifier" id="search"></i></a>
        </a>
      </div>
    </div>
  </div>
</section>

我的徽标尺寸为500px * 280 我只想以某种方式添加我的徽标，有什么办法。我该如何解决？

Answer 1

在CSS样式中，您使用的是id选择器，但是HTML模板具有更多的类。

还要确保要包含在模板中的图片位于img/文件夹中

Answer 2

您正在使用类并在.css上调用ID

您是否尝试使用类创建<div>并在div内添加徽标？这样，您就可以操纵div尺寸和徽标本身，直到适合为止。

一个简单的例子：。

CSS：

.logo {
    background-image: url("img/long_logo.png");
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

身体：

<section class="header-top">
    <div class="container box_1170">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="index.html">
                        <div class="logo"></div>
                </a>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 search-trigger">
                <a href="#" class="search">
                        <i class="lnr lnr-magnifier" id="search"></i></a>
                </a>
            </div>
        </div>
    </div>
</section>

Answer 3

您使用了错误的CSS选择器。

例如，如果您已经为HTML元素分配了一个类，如下所示：

<div class="header">
</div>

您应该使用“。”对其应用CSS，如下所示：

.header {}

“＃”用于选择具有相应ID的HTML元素，例如：

HTML：

<div id="header">
</div>

CSS：

#header{}

提示-HTML元素可以具有多个类，但只能有一个ID。

无法在HTML中添加徽标

3 个答案: