如何在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中？我正在寻找没有JQuery UI或任何JavaScript的最佳方法。

Answer 1

你可以使用一些div - 将它们一个接一个地放置。有一种颜色，另一种颜色。然后你可以使用一些奇特的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>