Question

我想知道定位按钮的最佳方法是什么？我想让这个网站老师让我做，但我不知道如何正确定位按钮。

这就是我所拥有的： [/ IMG]

这是我需要的：

的src：

/*---------------*/   #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>

Answer 1

尝试使用此代码......

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynama </title>

            <link href="./css/style.css" rel="stylesheet" type="text/css">

</head>      

 <body text="#000000" style="background:#ffffff url('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>
 <div id="info"><a href="http://dynama.eek.ee"></a>Information:</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>

    <div class="clear"></div>
    </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>




            <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>      

    </body>


    </html>

定位按钮（CSS）的最佳方法？

1 个答案: