我想知道放置按钮的最佳方式是什么？我试图让这个网站老师要求我做但是我不知道如何正确定位按钮。
这就是我所拥有的：
[/img]
这是我需要的：
源代码：
.css 文件 http://pastebin.com/3mZXzkzS
/*---------------*/ #logo {
width:167px;
height:96px;
margin-right: 200px;
float:left;
margin: 24px;
}
#info{
display: block;
float: left;
height: 175px;
width: 300px;
margin-right: 0px;
background-image: url('../images/info_box_1.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#mang1, #uusp, #jatka {
display: block;
float: left;
height: 45px;
width: 200px;
margin-right: 0px;
background-image: url('../images/Button_black_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool1, .kool3 {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#aru, #aru, #too, #teams, #sqn, #kalend, #plan{
display: block;
float: left;
height: 30px;
width: 150px;
margin-right: 0px;
background-image: url('../images/Button_3_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool2, .log {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test2.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
.lEnglish, .lEstonian, .lRussian , #clear{
margin-top:25px;
text-decoration: none;
}
#tile_mid, #tile_top , #tile_mid_pt2{
margin-left: 200px;
}
.but1, .but2, .but3{
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.but4, .but5 {
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.kool3 {
margin-right: 0;
}
.clear {
clear: both;
}
.html 文件 http://pastebin.com/VQZx44PG
<base href="http://dynama.eek.ee">
<div text="#000000" style="background:#ffffff url('http://dynama.eek.ee/images/background.png') repeat scroll top center; height:1000px;">
<div id="logo"><a href="http://dynama.eek.ee"><img src="./images/logo.png"/></a></div>
<div class="clear"></div>
<div id="info"><a href="http://dynama.eek.ee"></a>Information:</div>
<div class="clear"></div>
<div id="mang1">Mäng 1 AKTIIVNE</div>
<div class="clear"></div>
<div id="uusp">Uus periood</div>
<div class="clear"></div>
<div id="jatka">Jätka</div>
<div class="clear"></div>
<div id="aru">ARUANDED</div>
<div class="clear"></div>
<div id="too">TOOTED</div>
<div class="clear"></div>
<div id="teams">TIIMID</div>
<div class="clear"></div>
<div id="sqn">SQNUMID</div>
<div class="clear"></div>
<div id="kalend">KALENDAR</div>
<div class="clear"></div>
<div id="plan">QPPEPLAN M+U</div>
<div class="clear"></div>
<div id="tile_top">
<div class="kool1">
<a href="#" class="kool1">Kool 1</a> </div>
<a href="#" class="kool2">Kool 2</a>
<a href="#" class="kool3">Kool 3</a>
<a href="#" class="log">Log out</a>
<a href="#"><img class="lEnglish" height="25px" width="45px" src="./images/Flag_eng.png"/> </a>
<a href="#"><img class="lRussian" height="25px" width="45px" src="./images/Flag_rus.png"/> </a>
<a href="#"><img class="lEstonian" height="25px" width="45px" src="./images/Flag_est.png"/> </a>
</div>
<div id="tile_mid">
<a href="#" class="but1">Button 1</a>
<a href="#" class="but2">Button 2</a>
<a href="#" class="but3">Button 3</a>
</div>
<img id="clear" height="25px" width="45px" src="./images/clear.png"/>
<div id="tile_mid_pt2">
<a href="#" class="but4">Button 4</a>
<a href="#" class="but5">Button 5</a>
</div>
<div class="clear"></div>
</div>