0

ページのスタイルを作成しようとしていますが、基本的に次のように表示したいと思います。

ここに画像の説明を入力してください

このように境界線を重ねていく方法がないか気になります。私はTwitterBootstrapを使用していますが、HTMLは現在次のようになっています。 

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">
       <img src="/images/logo.png" alt="logo"><br><br>

       <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sub-Menu (this will only show for pages that need a sub-menu)</li>
          <li class="active"><a href="#">Current</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->

    </div>

    <div class="span10">
      <h1 style="text-align:center;">Interplanetary Reactions</h1>
      <div class="center-me" style="border-top:5px solid white; border-bottom:5px solid white;">

    </div>

  </div>
<div class="center-me">
      <img src="http://i.imgur.com/yeHzm.jpg" alt="graphic">
</div>
    </div>
  </div>

  <footer style="border-top:5px solid white;">
<br>
<div class="row-fluid">

<div class="span4">
    &copy; Interplanetary Reactions 2012
</div>

<div class="span4">
    <div class="fb-like" data-href="http://www.facebook.com/    InterplanetaryReactions" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>

<div class="span4">
    <a href="https://twitter.com/InterReactions" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @InterReactions</a>
</div>

</div>
  </footer>

</div><!--/.fluid-container-->

これはあまり明確ではないことは知っていますが、誰かが何らかの洞察を持ってくれることを願っています。

4

1 に答える 1

1

border-image親要素の周りに配置することをお勧めします。基本的なアプローチは、9つのスライス（各コーナー、各サイド、および中央）に境界線を含む画像を作成し、CSS3を使用border-imageして要素に境界線を追加することです。詳細については、 http：//css-tricks.com/understanding-border-image/を参照してください。

于 2012-11-18T01:05:19.483 に答える