0

我正在尝试将这些按钮放在我喜欢的布局底部。基本上我尝试将 left 和 top 添加到它们，但我知道这不起作用。我怎样才能根据自己的喜好移动这些按钮？我会为按钮创建一个 div 框吗？也请注意我凌乱的代码。

这是我的代码：

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT">
<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Cascade Studios™&lt;/TITLE>
<style>
body
{
background-image:url('http://icpy.webs.com/boxes/background.png');
background-repeat:repeat-y
position:center;
}
img {
    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
#banner:hover {
    opacity: 0.5;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
.navicon a#terms{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/Terms.png) no-repeat;
}

.navicon a:hover#terms{
    background: url(http://icpy.webs.com/button/Terms0.png) no-repeat;
}
.navicon a#contact{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/contact.png) no-repeat;
}

.navicon a:hover#contact{
    background: url(http://icpy.webs.com/button/contact0.png) no-repeat;
}
.navicon a#setup{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/setup.png) no-repeat;
}

.navicon a:hover#setup{
    background: url(http://icpy.webs.com/button/setup0.png) no-repeat;
}

.navicon a#about{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/about.png) no-repeat;
}

.navicon a:hover#about{
    background: url(http://icpy.webs.com/button/about0.png) no-repeat;
}

.navicon a{
  margin: 0.5px;
}
</style>
</HEAD>
<BODY>

<center>

<font face="Century-Gothic" color="black"> 

<img src="http://icpy.webs.com/boxes/bac.png" width="1280" height="1024" border="0" usemap="#settings" /> 

<div id="about_box" style="width:147px; height:341px; position:absolute; left:152px; top:280px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/About.htm" name="inlineframe" width="147" height="341" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div> 

<div id="update_box" style="width:147px; height:314px; position:absolute; left:152px; top:670px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/Updates.htm" name="inlineframe" width="147" height="314" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div>

<div id="content_box" style="width:662px; height:733px; position:absolute; left:320px; top:250px; z-index:1;"> 
<iframe src="http://icpy.webs.com/text/Home.htm" name="inlineframe" width="662" height="733" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"></iframe></div>

<div class="navicon">
<a href="http://www.twitter.com" id="terms"/>
<a href="http://www.twitter.com" id="contact"/>
<a href="http://www.twitter.com" id="setup"/>
<a href="http://www.twitter.com" id="about"/>
</div>

</BODY>
</HTML>
4

1 回答 1

0

如果您谈论的是条款、联系方式、设置和链接。尝试这个：

div.navicon {
    position: absolute;
    top: 300px;
    left: 800px;
}

除非您设置position为absolute或，否则您无法调整顶部/左侧位置fixed。

FWIW，您使用的绝对定位模型不是很灵活。从长远来看，最好用浮动和填充来定位东西。

于 2013-07-29T21:21:18.110 回答