Question

我正试图将这些按钮放在我喜欢的布局底部。基本上我尝试添加左和顶部，但我知道这不起作用。如何根据自己的喜好移动这些按钮？我会为按钮创建一个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™</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>

Answer 1

如果您正在谈论条款，联系人，设置和关于链接。试试这个：

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

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

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

在iFrame布局上按住左侧和顶部按钮？

1 个答案: