2

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

我已经完成了所有数据显示查询和其他基本功能，现在我想创建类似于原始页面索引的 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>
4

1 回答 1

3

使用定义列表怎么样？ 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 -->

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

于 2013-06-24T11:13:58.953 回答