Question

编写此代码时遇到问题。

 <body>
    <header>
      <div class="menu">
        <div class="sayfa_ismi"><h1>PAGE TİTLE</h1></div>
            <nav class="menues">
                <ul>
                    <li><a href="index.html" class="home"><p>Home Page</p></a></li>
                    <li><a href="galery.html" class="galery"><p>Galery</p></a></li>
                    <li><a href="stry.html" class="stry"><p>Story</p></a></li>
                    <li><a href="herkes_nerede.html"class="where"><p>Where are the people</p></a></li>
                    <li><a href="iletisim.html" class="iletisim"><p>Contact</p></a></li>
                </ul>
            </nav>
      </div>
    </header>



    </div>
  </body>

CSS中的

header{
  position: fixed;
  width: 100%;
  height: 20%;
}

/*************************** title position ************************************/
.sayfa_ismi{
  text-align: center;
}
/*************************** menue position************************************/
nav li{
  display: inline-block;
      margin: 0 8% 0 0;
  }

nav{
  margin: 0 0 0 15%;
}

/*************************** menu links************************************/
.menues a:link{
  color:rgb(255,255,255);
  text-decoration: none;
}
.menues a:hover{
  color:blue;
  background-color:white;
}

.menues a:visited{
  color: blue;
  background-color:#FFFFFF;
  text-decoration: none;

}
/***** header font type and background color *****************************/
header{
  background-color: rgb(59, 113, 255);
  font-family: 'Andada', serif;
  font-size: 110%;
}

我希望Header的背景颜色为rgb（59,113,255），我希望当我们连接时背景颜色为白色，但不要。我该如何解决这个问题？

Answer 1

您应该删除p标记内的a标记。

这是一个更新的小提琴：fiddle link

希望这有帮助！

Answer 2

试试这个

header {
  position: fixed;
  width: 100%;
}

.menues ul {
  margin: 0;
  padding: 0;
  display: block;
}

.menues {
  display: block;
  margin: 0 auto;
  width: 60%;
  padding-bottom: 50px;
}

.menues li {
  list-style: none;
  float: left;
  display: inline-block;
}

.menues a {
  text-decoration: none;
  padding: 5px 15px;
}

.menues a:hover {
  text-decoration: none;
  background: #ffffff;
  border-radius: 4px;
}


/*************************** title position ************************************/

.sayfa_ismi {
  text-align: center;
}


/*************************** menue position************************************/

nav li {
  display: inline-block;
  margin: 0 8% 0 0;
}


/***** header font type and background color *****************************/

header {
  background-color: rgb(59, 113, 255);
  font-family: 'Andada', serif;
  font-size: 110%;
}

<body>
  <header>
    <div class="menu">
      <div class="sayfa_ismi">
        <h1>PAGE TİTLE</h1>
      </div>
      <nav class="menues">
        <ul>
          <li><a href="index.html" class="home">Home Page</a></li>
          <li><a href="galery.html" class="galery">Galery</a></li>
          <li><a href="stry.html" class="stry">Story</a></li>
          <li><a href="herkes_nerede.html" class="where">Where are the people</a></li>
          <li><a href="iletisim.html" class="iletisim">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
  </div>
</body>

Answer 3

此代码将执行

＆＃13;

<body>
<header id="header">
  <div class="menu">
    <div class="sayfa_ismi">
      <h1>PAGE TITLE</h1>
    </div>
    <nav class="menues">
      <ul>
        <li>
          <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="index.html" class="home">
            <p>Home Page</p>
          </a>
        </li>
        <li>
          <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="galery.html" class="galery">
            <p>Galery</p>
          </a>
        </li>
        <li>
          <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="stry.html" class="stry">
            <p>Story</p>
          </a>
        </li>
        <li>
          <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="herkes_nerede.html" class="where">
            <p>Where are the people</p>
          </a>
        </li>
        <li>
          <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="iletisim.html" class="iletisim">
            <p>Contact</p>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<script>
  var header = document.getElementById("header");
  function linkHover() {
    header.style.backgroundColor = "#fff";
  }
  function linkmouseout() {
    header.style.backgroundColor = "rgb(59, 113, 255)";
  }

</script>


</div>
</body>

＆＃13;

css中的背景颜色问题

3 个答案: