2

私は本、インデックス、タグを保管しているブック インデックス ストアを開発しました。

すべてのデータ表示クエリとその他の基本機能を実行したので、元のページ インデックスのように動作する CSS 構造を作成したいと考えています。

参照用にスナップショットを 1 つ添付します。

ここに画像の説明を入力

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 に答える