0

我将如何解决这个问题。如果您将我的代码的主要部分与网站上出现的文本混在一起，以至于您最终会得到一个滚动条。向下滚动后，顶部横幅会重复出现。如果你用更多的文字再做一次，同样的事情会重复多次。

到目前为止，这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>MC serverlist</title>
</head>

<body id="servers">

<div id="maincontainer">

<ul id="navlist">
    <li><a href="index.php" id="servers_nav">SERVERS</a></li>
    <li><a href="skins.php" id="skins_nav">SKINS</a></li>
    <li><a href="resource-packs.php" id="resource-packs_nav">RESOURCE PACKS</a></li>
    <li><a href="builds.php" id="builds_nav">BUILDS</a></li>
    <li><a href="mods.php" id="mods_nav">MODS</a></li>
    <li><a href="forum.php" id="forum_nav">FORUM</a></li>
</ul>



Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text

</div>

</body>
</html>

CSS 代码

html, body {
  height: 100%;
  margin: 0;
  background: #A3A3A3;
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px,     transparent 140%);
}
#maincontainer {
  min-height: 100%;
  width: 960px;
  min-width: 600px;
  margin: auto;
  border: ridge;
  border-color: #919191;
  border-top: 0;
  border-bottom: 0;
  background: rgba(255,255,255,0.35);
  padding-left: 16px;
  padding-right: 16px;
}

ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
padding-top: 6px;
}

ul li {
float:left;
margin-right: 12px;
border: groove;
border-width: 2px;
border-color: #969696;
}

ul li a {
display:block;
padding-left: 5px;
padding-right: 5px;
height: 38px;
background-color:#7D7D7D;
text-align: center;
text-decoration: none;
line-height: 37px;
color: #EDEDED;
font-weight: bold;
font-family: impact;
font-size: 1.8em;
}

ul li:hover {
float:left;
margin-right: 12px;
border: ridge;
border-width: 2px;
border-color: #969696;
}

ul li a:hover {
color: white;
}

ul li a:active {
background-color: black;
}

在本地主机上自己尝试，而不是在在线代码测试器中。谢谢

4

1 回答 1

2

这不是故障

这是预期的行为。默认为background-repeatto repeat，所以这...

html, body {
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px,     transparent 140%);
}

...将重复，除非您声明...

html, body {
  background-repeat: no-repeat;
}

...每次到达图像大小的末尾。

于 2013-07-06T01:01:22.763 回答