html - HTMLCSSボックスコンテナ

Question

以下に示すようなボックスコンテナがあります

html css構造を使用して、幅と高さの任意のサイズのボックスを作成できるように、モジュール方式でコーディングしたいと思います。Bootstrapを使用してWebサイトをコーディングします

始めるための最良の方法はどれですか。

Answer 1

上部のグラデーションの名前がgradient.pngだとします。

.box {
    border: 1px solid gray;
    border-radius: 3px;
    background: white url("gradient.png") ;
    background-repeat: repeat-y;
    padding-top: 20px;
}

それはほとんど自明だと思います。repeat-yは、画像の残りの部分全体ではなく、上部全体で繰り返すようにします。パディングにより、テキストが上から始まらないようになります。それがあなたのためにどのように機能するかを見てください。

ちなみに、それはアップルのディスカッションページからですか？

Answer 2

jQuery uiを試してみたい場合は、ダイアログを使用して目的を達成できます。ここに詳細情報のリンクがあります。

http://jqueryui.com/demos/dialog/#default

Answer 3

私はこれをあなたの例と同じように、ストレートCSSでできる限り維持しようとしました。このアプローチを考えると、IE8以下ではすぐにサポートを見つけることはできません。

ボックス自体のマークアップは非常に単純です。

<div id="modal">
  <header><h1>Something Here</h1></header>
  <section>
    <p>Pellentesque habitant morbi tristique...</p>
  </section>
</div>

このマークアップのCSSは、下のプレビュー画像の下にあります。

デモ： http： //jsbin.com/ogesuf/5/edit

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #modal {
    width: 600px;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
    overflow: hidden;
  }
  #modal header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
    box-shadow: 0 1px 2px #888;
    padding: 10px;
  }
  #modal h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
  }
  #modal section {
    padding: 10px 30px; 
    font-size: 12px;
    line-height: 175%;
    color: #333;
  }
</style>