HTML CSSボックスコンテナ

Question

私は幅が任意のサイズのボックスを構築するために、HTML CSSの構造を使用できるようにモジュラーな方法でコーディングしたい

怒鳴る示すように、私は箱のコンテナを持っており、高さ。私はブートストラップを使用してウェブサイトをコード化しています

どのような方法を使い始めるのが最適です。

Answer 1

私はまっすぐに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> 

Answer 2

は、私はそれがほとんど自明だと思うのは、一番上にその勾配が

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

をgradient.png命名されたとしましょう。 repeat-yは、それを上部全体にわたって繰り返すが、画像の残りの部分では繰り返さない。パディングによって、テキストが先頭から始まらないようになります。それがあなたのためにどのように機能するかをご覧ください。

ところで、アップルのディスカッションページからですか？

Answer 3

jQueryを試してみたいのであれば、ここで必要なものを達成するためにダイアログを使うことができます。

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