Question

我第一次使用带有li标记的课程时，我希望使用<ul *class="2"*> <li *class="!"*><.......jpg" width="280" height="280" \></li> <li class="!"><img src="......jpg" width="280" height="280" \></li>个标签

<ul>
  <li><a href="........html">HOME</a></li>
  <li><a href="........html">SONGS</a></li>
  <li><a href="........html">GAMES</a></li>
  <li><a class="active" href=".........html">GALLERY</a></li>
</ul>

第二次...... 我知道了吗

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

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: #0066ff;
}

我的CSS

ngOnChanges()

我不知道他们为什么重叠？请告诉我上面的代码是否有任何问题。

Answer 1

它适用于我

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

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: #0066ff;
}

＆＃13;

<ul *class="2"*>
<li *class="!"*><img src="https://pixabay.com/static/uploads/photo/2015/06/03/14/24/ladybug-796481_960_720.jpg"" width="280" height="280" \></li>
<li class="!"><img src="http://www.planwallpaper.com/static/images/thailand.jpg" width="280" height="280" \></li>
  </ul>
  
  <ul>
  <li><a href="........html">HOME</a></li>
  <li><a href="........html">SONGS</a></li>
  <li><a href="........html">GAMES</a></li>
  <li><a class="active" href=".........html">GALLERY</a></li>
</ul>

＆＃13;

Answer 2

只需在ul上使用某个类名称，并根据需要设置其li样式

＆＃13;

.ul1 {
  list-style-type: none;
  margin: 0;
}
.ul2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.ul2 li {
  float: left;
}
.ul2 li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.ul2 li a:hover:not(.active) {
  background-color: #111;
}
.ul2 li a.active {
  background-color: #0066ff;
}

＆＃13;

<ul class="ul1">
  <li>
    <img src="1.jpg " width="280 " height="280 " />
  </li>
  <li>
    <img src="2.jpg " width="280 " height="280 " />
  </li>
</ul>

<ul class="ul2">
  <li><a href="#">HOME</a> 
  </li>
  <li><a href="#">SONGS</a> 
  </li>
  <li><a href="#">GAMES</a> 
  </li>
  <li><a class="active " href="#">GALLERY</a> 
  </li>
</ul>

＆＃13;

Answer 3

正如LGSon所说，这是因为你有

position: fixed

在你的ul标签css上定义。

如果你定义其中一个而不是使用类名（例如）

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

ul.fixedHeader {
    position: fixed;
    bottom: 0;
    width: 100%;
}

你的html看起来像这样

<ul *class="2"*>
<li *class="!"*><.......jpg" width="280" height="280" \></li>
<li class="!"><img src="......jpg" width="280" height="280" \></li>

和

<ul class="fixedHeader">
  <li><a href="........html">HOME</a></li>
  <li><a href="........html">SONGS</a></li>
  <li><a href="........html">GAMES</a></li>
  <li><a class="active" href=".........html">GALLERY</a></li>
</ul>

你应该好好去。此外，我不确定星号在做什么......对我来说似乎是无效的HTML。

如果这部分内容没有任何意义，请发表评论。

如何在我们想要2次时对li标签进行分类

3 个答案: