如何在页面上定位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定位最好的教程。