如何在頁面上定位div？

Question

好吧我真的新的所有這一切，因此在這裏開始我的TAFE 的CSS部分IM是

我一直要求增加

• 名單
• 表10行和5列
• 背景圖片
• 和三個鏈接。

但我可以弄清楚如何將所有這些東西放置在不同的位置？

有幫助嗎？ 這是我的一切，到目前爲止

這是可悲的

我知道

div { 
 
    /* Purple box */ 
 
    height: 150px; 
 
    width: 30%; 
 
    border: 10px solid purple; 
 
    background-color: purple; 
 
} 
 
/* link colour change and dots */ 
 

 
a { 
 
    color: black; 
 
} 
 
ul.a { 
 
    list-style-type: circle; 
 
} 
 
/* This Part is making the underline come on and off the links*/ 
 

 
a:link { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
} 
 
a:active { 
 
    text-decoration: underline; 
 
}

<center> 
 
    <h1> Welcome to Brakeys webpage </h1> 
 
</center> 
 

 
<div id=a> 
 
    <center> 
 
    <p>Check out these awesome bands!:</p> 
 
    </center> 
 
    <center> 
 
    <br><a href="http://violentsoho.com/">Violent Soho</a> 
 
    </br> 
 
    </center> 
 
    <center> 
 
    <br><a href="https://tiredlionband.bandcamp.com/">Tired Lion</a> 
 
    <br> 
 
    </center> 
 
    <center> 
 
    <br><a href="https://dunerats.bandcamp.com/">Dune Ratz</a> 
 
    <br> 
 
    </center> 
 

 
</div> 
 

 
<div id=b> 
 
    <ol> 
 
    Top 5 best bands 
 
    <li>Nirvana</li> 
 
    <li>Pearl Jam</li> 
 
    <li>Pink Floyd</li> 
 
    <li>Foo Fighters</li> 
 
    <li>Bob Dylan</li> 
 
    </ol> 
 

 
</div>

Answer 1

我建議你看W3 CSS和引導教程：

http://www.w3schools.com/Bootstrap/bootstrap_grid_system.asp

使用引導程序的網格系統，您將能夠製作所需的行和列，比您想象的要容易。你可能要注意在網格上的例子：

<div class="row"> 
    <div class="col-sm-3">.col-sm-3</div> 
    <div class="col-sm-6">.col-sm-6</div> 
    <div class="col-sm-3">.col-sm-3</div> 
</div> 

Answer 2

看看一個這個網站：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

這是我發現關於DIV定位最好的教程。