0

抱歉,您必须这样做,但您可以访问以下地址:http ://www.neopets.com/userlookup.phtml?user=coool_xman

我需要帮助来制作顶部横幅(上面写着 Krawk 的横幅),使其脱离“白盒子”,并在自己的区域内。我希望横幅在盒子上方,所以基本上只是向上移动了 300px 左右,其他一切都保持不变。

我尝试过创建另一个身体,浮动等,但无法弄清楚。这是我的代码。

<style>
body {
background: fixed url("http://i1164.photobucket.com/albums/q565/whitehouses88/PLs/PirateBunk.jpg") no-repeat;
}
hr, #header, #footer, .sf, #ban {
display: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
font: 18pt tahoma;
color: #261712;
font-weight: bold;
text-align: left;
background-color: #ffffff;
}
.content div div, .content .contentModule, .contentModuleTable, .contentModule, #main {
border: none;
}
td, body, font, .medText, body, p {
font: 9pt tahoma;
line-height: 12pt;
}
b {
color: #6e231e;
}
i {
color: #261712;
}
a:link, a:visited, a:active, a b {
color: #90714d;
font-weight: bold;
}
a:hover, a:hover b {
color: #261712;
}
#aja {
width: 8px;
}
#navy {
padding: 4px;
margin: 4px;
text-align: center;
}
#navy a {
color: #ffffff !important;
background: #90714d;
display: inline-block;
width: 75px;
padding: 4px;
margin: 2px;
text-transform: uppercase;
font: 9pt trebuchet MS;
font-weight: bold;
}
#navy a:hover {
padding: 4px;
margin: 2px;
background: #6e231e;
}
#main {
margin-top: 10px;
margin-bottom: 10px;
border: 10px solid #261712;
}
#userneopets img {
background: #90714d;
padding: 8px;
}
</style>

<table><tr>
<td width="1100" valign="top">
<img src="http://i1327.photobucket.com/albums/u673/Vipersnake94/KrawkIsland2_zps134bd61f.png" width="975" class="special">
</td>
<td width="1100" valign="top">
</td>
</tr></table>
<div id="navy">
<a href="/myaccount.phtml">Account</a><a href="/customise/">Customize</a><a href="/games/arcade.phtml">Games</a><a href="/explore.phtml">Explore</a><a href="/nf.phtml">News</a><a href="/petcentral.phtml">Central</a><a href="/neoboards/index.phtml">Boards</a><a href="/objects.phtml">Shops</a><a href="/mall/index.phtml">Mall</a><a href="/~Sparkle">Credit</a>
</div>
<br><div style="width: 800px;">

</div>

<style>
body {
background: fixed url("http://i1164.photobucket.com/albums/q565/whitehouses88/PLs/PirateBunk.jpg") no-repeat;
}
hr, #header, #footer, .sf, #ban {
display: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
font: 18pt tahoma;
color: #261712;
font-weight: bold;
text-align: left;
background-color: #ffffff;
}
.content div div, .content .contentModule, .contentModuleTable, .contentModule, #main {
border: none;
}
td, body, font, .medText, body, p {
font: 9pt tahoma;
line-height: 12pt;
}
b {
color: #6e231e;
}
i {
color: #261712;
}
a:link, a:visited, a:active, a b {
color: #90714d;
font-weight: bold;
}
a:hover, a:hover b {
color: #261712;
}
#aja {
width: 8px;
}
#navy {
padding: 4px;
margin: 4px;
text-align: center;
}
#navy a {
color: #ffffff !important;
background: #90714d;
display: inline-block;
width: 75px;
padding: 4px;
margin: 2px;
text-transform: uppercase;
font: 9pt trebuchet MS;
font-weight: bold;
}
#navy a:hover {
padding: 4px;
margin: 2px;
background: #6e231e;
}
#main {
margin-top: 274px;
margin-bottom: 10px;
border: 10px solid #261712;
}
#userneopets img {
background: #90714d;
padding: 8px;
}

img.special { position: absolute; top: 0; }

</style>

<table><tr>
<td width="1100" valign="top">
<img src="http://i1327.photobucket.com/albums/u673/Vipersnake94/KrawkIsland2_zps134bd61f.png" width="975" class="special">
</td>
<td width="1100" valign="top">
</td>
</tr></table>
<div id="navy">
<a href="/myaccount.phtml">Account</a><a href="/customise/">Customize</a><a href="/games/arcade.phtml">Games</a><a href="/explore.phtml">Explore</a><a href="/nf.phtml">News</a><a href="/petcentral.phtml">Central</a><a href="/neoboards/index.phtml">Boards</a><a href="/objects.phtml">Shops</a><a href="/mall/index.phtml">Mall</a><a href="/~Sparkle">Credit</a>
</div>
<br><div style="width: 800px;">

</div>
4

1 回答 1

0

使用这个 CSS:

img.special { position: absolute; top: 0; }
body { margin-top: 274px; }

我使用Firebug添加了它,它对我有用。

这是在做什么:

  • 首先,它绝对定位图像,(使用正确的类名指定特定图像 - .special
  • 其次,通过将 top 设置为 ,它将图像移动到顶部0。这只有效,因为图像是绝对定位的。
  • top-margin第三,它通过向页面添加等于图像高度的a 来向下移动整个网站。
于 2013-01-15T00:02:42.583 回答