Question

如何使用此代码制作粘性标题？

＆＃13;

.nav {
  display: block;
  min-width: 100%;
  text-align: left;
  position: fixed;
  top: 0;
  left: 0;
  list-style-type: none;
  z-index: 1000;
  margin: 0 auto;
  background: -webkit-linear-gradient(top left, #3c8dbc 0%, #307196 100%);
  background: linear-gradient(to bottom right, #3c8dbc 0%, #307196 100%);
  color: #A3A3A3;
  height: 10%;
  font-weight: lighter;
  overflow: hidden;
}
.nav li {
  display: inline-block;
  margin: 1%;
  height: 3%;
  list-style-type: none;
  color: #A3A3A3;
}
.nav ul {
  list-style-type: none;
}
.nav ul li {
  list-style-type: none;
  color: white;
}

＆＃13;

<div class="nav">
  <div class="titlehomepage">
    <h1>GamingSocial</h1>
  </div>
  <ul>
    <li><a href="home.html" style="text-decoration:none;">MENU</a>
    </li>
    <li><a href="games.html" style="text-decoration:none;">GAMES</a>
    </li>
    <li><a href="comingsoon.html" style="text-decoration:none;">NEWS</a>
    </li>
    <li><a href="comingsoon.html" style="text-decoration:none;">REVIEWS</a>
    </li>
    <li><a href="comingsoon.html" style="text-decoration:none;">CONTACT</a>
    </li>
    <li><a href="sign-up.html" style="text-decoration:none;">SIGN UP</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

这就是问题所在：

overflow: hidden;
height: 10%;

请改为：

height: 300px; // or whatever value suits the height of the header

你会如何使用这段代码制作一个粘性标题？

1 个答案: