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

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

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

 
Home
 
News
 
Contact
 
About

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

 
Parth 1
 
part 2

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

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

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

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

 
Home
 
News
 
Contact
 
About

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

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更有趣.干杯!