使用HTML5和css预订索引页面布局

Question

我开发了书籍索引商店，其中存放书籍，索引和标签。

我已经完成了所有数据显示查询和其他基本功能，现在我想创建与原始页面索引一样的CSS结构。

我附上一张快照供参考。

您是否知道如何使用HTML5和CSS创建此类数据。

修改

以下是我尝试过的HTML，但不知道如何为此添加css。

<div class="row-fluid">
<div class="span2 well">

</div>
<div class="span5 well">
<div>
<div class="span12 text-center"> - A - </div>
<div class="offset1">
<h4>Adding</h4>
</div>
<div class="span12 pull-left">Tyler Cherry</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div><div class="span12 pull-left">Caldwell Atkinson</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Apples</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - E - </div>
<div class="offset1">
<h4>Eight</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> <div class="span12 text-center"> - F - </div>
<div class="offset1">
<h4>Farming</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - H - </div>
<div class="offset1">
<h4>Happy Coding</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Health</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Tyler Cherry</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div><div class="span12 pull-left">Caldwell Atkinson</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div> <div class="span12 text-center"> - L - </div>
<div class="offset1">
<h4>Law Of Attraction</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - P - </div>
<div class="offset1">
<h4>Passion</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - S - </div>
<div class="offset1">
<h4>Seven</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Success</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> <div class="span12 text-center"> - U - </div>
<div class="offset1">
<h4>User</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> </div>
</div>
<div class="span5 well">

</div>
</div>

Answer 1

使用定义列表怎么样？ http://codepen.io/gcyrillus/pen/lAmkb

<h1>Index</h1>
<section>
  <h2>A</h2> 
<dl>
  <dt>accordion,layouts</dt>
  <dd><a href="">about 128</a></dd>
  <dd><a href="">movie form,adding 13</a>1</dd>
  <dd><a href="">nesting, in tab 128,12</a>9</dd>
  </dt>
  <dl>
    <dt>Adapters, Ext.</dt>
    <dd><a href="">about 18</a</dd>
    <dd><a href="">using 18, 20</a</dd>
  </dl>
<!-- and so on --> 

和链接，所以它也变得有用:)就像标签云一样。