Question

是的，所以我制作了一个导航栏，我想在每个链接之前添加图像，我知道我可以使用a.header：之前我需要为每个链接提供不同的图像，一个用于家庭的房子，用于规范的扳手和等等。这样做最简单的方法是什么？有没有办法不为每个人创建一个div并单独设计它们？

目前为止使用导航 - http://zimxtrial.ukbigbuy.com/

预览页面

还有一件事 - 这是css的一部分：

#header-nav {
    background-color: #FFFFFF;
    height: 80px; height: 8.0rem;
    width: 100%;
    position: absolute;
    top: 50px;
}

.header-nav-center {
    height: 80px; height: 8.0rem;
    text-align: center;
    position: relative;
    top: 0px;
    width: 500px; width: 50.0rem;
    margin-left: auto;
    margin-right: auto;
}

.header-nav-center ul {
    margin: 0;
}

.header-nav-center ul li {
    list-style: none;
    margin: 0 35px 0 0;
    display: inline;
}

a.header {
    line-height: 80px; line-height: 8.0rem;
    font-size: 17px; font-size: 1.7rem;
}

和HTML：

<div id="home">
    <div id="header-nav">
      <div id="hr-nav-top-container">
        <hr class="nav" />
      </div>
      <div id="logo"></div>
      <div class="header-nav-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a class="header" href="#features">Features</a>

            </li>
            <li><a class="header" href="#specification">Specification</a>

            </li>
            <li><a class="header" href="#contact-us">Contact Us</a>
            </li>
        </ul>
      </div>
      <div id="pre-order"></div>
      <div id="hr-nav-bottom-container">
        <hr class="nav" />
      </div>
    </div>
</div>

我可以添加以下内容：

a.header.home:before {
    background: url('../images/home-logo.png') center center no-repeat;
}

不完全是这样的吗？

Answer 1

您可以为每个链接创建ID，并将ID添加到所需的链接img

每个链接前导航栏上的图像

1 个答案: