How to position div on a page?

Question

Okay im really new to all of this and im starting the CSS part for my TAFE so here it is

I've been asked to add

• A list
• a table with 10 rows and 5 columns
• A background picture
• and three links.

But i can figure out how to position all of these things in different spots?

help? this is all I've got so far

it's sad

i know

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和Bootstrap教程：

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

使用bootstrap的网格系统，您可以比想象的更容易制作所需的行和列。您可能需要注意的网格示例：

<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定位的最佳教程。