Question

我目前设计的网页有一个跟随用户的标题，因为当我使用样式标签时它们向下滚动。但是现在我链接或尝试列出的所有内容都获得了这些属性，我无法弄清楚如何阻止它。

    <!DOCTYPE html>
    <html>
      <head>
        <title>About</title>
        <!DOCTYPE html>
    <html>
      <head>
        <title>About</title>
      </head>

      <body bgcolor="#E6E6FA">

    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;

    }

    li {
        float: left;
    }

    a:link, a:visited {
        display: inline;
        width:550px;
        height: auto;
        font-weight: bold;
        font-size: 25px;
        color:  #D2291F;
        background-color: #30166B;
        text-align: center;
        padding: 20px;
        text-decoration: none;
        text-transform: uppercase;
    }

    a:hover, a:active {
    color: #30166B;
        background-color: #D2291F;
    }
    </style>

    </head>
    <body>

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="Contact Us.html">Contact</a></li>
      <li><a href="About.html">About</a></li>
      <li><a href="Awards.html">Awards</a></li>
     </ul>

    <br>
    <br>

        <p>


        <br>
    My Co-op NBE was created in 1985, since then the company has been helping the Orillia area
    with all IT issues both personal and commercial. The team at NBE has won many <a href="Awards.html">Awards</a> and specializes in everything IT including:
  </body>
</html>

我尽可能地缩短了html以便粘贴它，所以如何让这个样式的东西只适用于标题而不是聊天中的奖励链接

这就是我想要的标题，并受到样式的影响

  <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="Contact Us.html">Contact</a></li>
      <li><a href="About.html">About</a></li>
      <li><a href="Awards.html">Awards</a></li>
     </ul>

Answer 1

您的CSS目前指定所有<ul>元素的样式。如果您希望它仅适用于您的导航，则必须使用类别“粘性”来更具体。首先，将'class =“sticky”'添加到您的<ul>元素中，如下所示：

<ul class="sticky">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="Contact Us.html">Contact</a></li>
  <li><a href="About.html">About</a></li>
  <li><a href="Awards.html">Awards</a></li>
 </ul>

和css，如果你想让所有款式仅适用于你的“粘性”导航，应该是：

<style>
ul.sticky {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;

}

ul.sticky li {
    float: left;
}

ul.sticky li a:link, ul.sticky li a:visited {
    display: inline;
    width:550px;
    height: auto;
    font-weight: bold;
    font-size: 25px;
    color:  #D2291F;
    background-color: #30166B;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    text-transform: uppercase;
}

ul.sticky li a:hover, ul.sticky li a:active {
color: #30166B;
    background-color: #D2291F;
}
</style>

如何停止样式标记

1 个答案: