不同的菜单,不同部分的颜色

时间:2018-11-11 19:16:06

标签: html css id

与标题相同,如何在我制作的每页不同部分的id菜单上设置颜色?任何人

下面是我的CSS

#menu-line {
  position:absolute;
  bottom:-4px;
  left:0;
  width:159px;
  height:2px;
  background:#fff
}

#menu {
  position:fixed;
  top:20px;
  right:20px;
  z-index:70;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  letter-spacing:1px;
  font-size:1.1em
}

#menu li {
  display:inline-block;
  margin:10px 0;
  position:relative
}

#menu a {
  color:#fff;
  padding:0 1.1em 1.1em 1.1em
}

#menu li.active a:after {
    content: '';
    margin: 0 1.1em 0 1.1em;
    height: 2px;
    background: #fff;
    display: block;
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    display: block;
}
<body>

<a id="logo" href="#firstPage" alt="pisangSlebew">pisangSlebew</a>
<ul id="menu"><li data-menuanchor="firstPage" class="active"><a href="#firstPage">Home</a></li>
  <li data-menuanchor="secondPage" class=""><a href="#secondPage">About Us</a></li>
  <li data-menuanchor="3rdPage" class=""><a href="#3rdPage">Hiyahiyahiya!</a></li>
</ul>

<div id="fullpage">
    <div class="section" id="section0">
        <div class="intro">
          <h1 class="apik">SLEBEW</h1>
          <p>
            "Jangan lupa makan pisang hasri ini."
          </p>
        </div>
    </div>
    <div class="section" id="section1">
        <h1>Halaman 2</h1>
        <p>
          "Test."
        </p>
    </div>
    <div class="section" id="section2">
        <h1>Halaman 3</h1>
        <p>
          "Hiyahiyahiya!."
        </p>
    </div>
</div>
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**
**4040440404404004040404**

上面是我的index.html

0 个答案:

没有答案