Question

我正在使用HTML和CSS制作听众。我正在使用li标记在其中创建菜单和a标记。我正在尝试将一些CSS属性应用于a标记，但它无效。请帮忙，下面是我的代码：

<!doctype HTML>
<html>
<head>
    <title>Aesthetic</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div class='header'>
        <div class='name'>Aesthetic</div>
        <div class='menu'>
            <ul>
                <li style="background:#c3c3c3;color:#000000;"><a href='#'>Home</a></li>
                <li><a href='#'>Services</a></li>
                <li><a href='#'>Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

.header{
    background-color: #000000;
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100px;
}

.name{
    color: #ffffff;
    font-weight: bold;
    font-size: 50px;
    font-style: italic;
    float: left;
    position: relative;
    top: 15px;
    width: 300px;
    left: 10%
}

.menu{
    float: right;
    font-size: 20px;
    position: relative;
    top: 20px;
    width: 300px;
    right: 10%;
}

.menu ul li{
    display: inline;
    margin-left: 20px;
    width: 40px;
    height: 60%;
    color: #ffffff;
};

.menu ul li a{
    text-decoration: none;
    color: #ffffff;
}

Answer 1

你有一个迷路分号（;）

.menu ul li{
    ...
}; /* <-- HERE */

导致以下块被忽略。

工作示例：

.header {
  background-color: #000000;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
}
.name {
  color: #ffffff;
  font-weight: bold;
  font-size: 50px;
  font-style: italic;
  float: left;
  position: relative;
  top: 15px;
  width: 300px;
  left: 10%
}
.menu {
  float: right;
  font-size: 20px;
  position: relative;
  top: 20px;
  width: 300px;
  right: 10%;
}
.menu ul li {
  display: inline;
  margin-left: 20px;
  width: 40px;
  height: 60%;
  color: #ffffff;
}
.menu ul li a {
  text-decoration: none;
  color: #ffffff;
}

<div class='header'>
  <div class='name'>Aesthetic</div>
  <div class='menu'>
    <ul>
      <li style="background:#c3c3c3;color:#000000;"><a href='#'>Home</a>
      </li>
      <li><a href='#'>Services</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>

text-decoration：none和color不起作用

1 个答案: