html - 第 5 个和第 6 个 div 标签不起作用

标签 html css

这是我设计的网站,最后两个标签实际上没有经过 我尝试了一切,但我迷路了,我需要帮助。在这最后两个表现不佳。我无法准确理解问题。

<HTML>

<head>
  <title>
    ggwa
  </title>
  <style>
    div header {
      width: auto;
      height: 48px;
    }
    div img {
      display: block;
      width: 100%;
    }
    div li {
      height: 30px;
      background: #FF5000;
    }
    div ul {
      margin: 0;
      padding: 0;
    }
    div nav ul li {
      list-style: none;
    }
    div.nav ul li a {
      text-decoration: none;
      float: left;
      display: block;
      padding: 10px 20px;
      color: black;
    }
    div.nav ul li a:hover {
      color: white;
    }
  </style>
</head>

<body>
  <div class="header">
    <img src="../Images/Header1.png" alt="Smiley face">
  </div>
  <div class="nav">
    <ul>
      <li><a href="#"> Home</a> 
      </li>
      <li><a href="#"> LLPs</a> 
      </li>
      <li><a href="#">  IP?</a> 
      </li>
      <li><a href="#"> Blank</a> 
      </li>
      <li><a href="#"> GabeN</a> 
      </li>
    </ul>
  </div>
</body>

</html>

最佳答案

应该是

div.nav ul li a:hover {
color: white;
}

简单的

.nav ul li a:hover {
 color: white;
 }

https://jsfiddle.net/michaelyuen/bfa0u7gb/12/

要在您的 css 上声明一个类,请使用 .classname 示例 div.header 或 .header

要在您的 css 上声明一个 id,请使用 #idname example div#header 或 #header

所以你的样式表应该是

.header {
  width: auto;
  height: 48px;
}
.header img {
  display: block;
  width: 100%;
}
.nav ul {
  margin: 0;
  padding: 0;
}
.nav ul li {
  height: 30px;
  background: #FF5000;
  list-style: none;
  float: left;
  padding: 10px 20px;
}
.nav ul li a {
  text-decoration: none;
  display: block;

  color: black;
}
.nav ul li a:hover {
  color: white;
}

关于html - 第 5 个和第 6 个 div 标签不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30826266/

相关文章:

html - 如何让一个元素跨越整个div?

html - 仅当 View 响应移动尺寸时显示按钮

css - 表格行上的渐变背景在 IE 中不起作用

css - Primefaces 5 selectOneMenu 在 tabView 中渲染不正确

javascript - 根据日期预先选择选项卡并显示其内容

jquery - 在 Columnizer jquery 中创建列规则

html - Hexo 博客中的 Markdown 文本对齐

ios - 固定容器内的 CSS 全宽图像

Java Applet 和 html 页面 - 嵌入多个 applet

html - 小下拉列表错误