html - CSS3でこれに似たダイアログボックスを作成するにはどうすればよいですか？

Question

css3でこれに似たダイアログボックスを作成したい（テキストボックスとボタンを除いて、パスワードリンクを忘れた）：

私は次のようなことができると思います：

<div id="mydialoguebox">
<h1>Authorization Required</h1>
<div id="text">
Please review your account before continuing.
<div>
</div>

私が抱えている問題は、divの上部とh1タグの間に常にギャップがあるように見えることです。また、xを使用して「近い」画像を追加する方法もわかりません。必要な認証と画像を独自のdivに押し込む方が良いですか？JQueryUIやjavascriptなしでこれを行うための最良の方法を探しています。

Answer 1

いくつかのdivを使用できます-それらを1つずつ配置します。1つの色、もう1つの色を持っています。次に、いくつかの派手なcssボーダー半径スタイルを使用できます。

http://border-radius.com/

Answer 2

フィドル付き：

http://jsfiddle.net/insertusernamehere/t6f5v/

これが、これをどのように構築できるかについての私の基本的な考え方です。さらなる改善が必要ですが、今のところ、それから始めることができます。

CSS：

<style>

    div.box {
        width:          400px;
        height:         200px;
        margin:         20px;
        border:         1px solid #ccc;
        border-radius:  6px;
    }

    div.box > header {
        height:         30px;
        padding:        10px;
        background:     #777;
        color:          #333;
    }
    div.box > header > h1 {
        float:          left;
        font-size:      14px;
        font-weight:    normal;
    }
    div.box > header > a {
        display:        inline-block;
        float:          right;
        width:          11px;
        height:         11px;
        margin-top:     10px;
        background:     url(http://www.geocaching.com/images/stockholm/mini/close.gif) no-repeat 0 0;
    }

    div.box > section {
        padding:        10px;
    }
    div.box > section form, div.box > section fieldset {
        margin:         0;
        padding:        0;
        border:         0;
    }

</style>

HTML

<div class="box">
    <header>
        <h1>Authorisation Required</h1>
        <a href=""></a>
    </header>
    <section>
        <p>Please verify your …
        <form>
            <fieldset>
                <label>Username:</label>
                <input type="text">
            </fieldset>
        </form>
    </section>
</div>