如何在css中制作ul和li样式只是为了菜单

Question

我有像这样的水平菜单的样式

<style>
 ul  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
   float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>

在我的HTML中,我的水平菜单有这样的代码

<ul>
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

我的水平菜单正常工作,问题是当我在我的HTML代码的另一部分(不是水平菜单)中有另一个ul和li时,就像这样

<ul>
 <li >Parth 1</li>
 <li >part 2</li>
</ul>

他们的风格遵循我的水平菜单的风格,我是CSS代码的新手所以任何帮助？

Answer 1

class在你的类上加上 aul并使你的样式规则依赖于该类而不是ul. 不要使用内联样式。

.menu  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.menu li {
   float: left;
}

.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.menu li a:hover:not(.active) {
  background-color: #111;
}

.menu li a.active {
  float: right;
}

.active {
  background-color: #4CAF50;
}

<ul class="menu">
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a class="active" href="#about">About</a></li>
</ul>
<ul>
 <li>Part 1</li>
 <li>part 2</li>
</ul>

Answer 2

首先,伟大的工作迈出一步,学习CSS!你会爱上它的.

什么你要在这里需要学习的就是添加一个class和id以只选择ul和li菜单内的.

也许你的代码看起来像这样.

<ul class="mainMenu">
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

在这种情况下,您提到的水平样式必须被称为......

ul.mainMenu (or just .mainMenu)  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.mainMenu li {
   float: left;
}

/* And so on... */
.mainMenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

在你进一步学习css之前,你应该花一些时间来学习类和ID以及如何使用它们作为你的选择器 - 这将有助于使CSS更有趣.干杯!