Html 如何在CSS3中创建类似于此的对话框？

我想在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的情况下实现这一点的最佳方法。

您可以使用一些div-将它们排在其他div之后。有一种颜色，另一种颜色。然后，您可以使用一些奇特的css边框半径样式

用小提琴演奏：

这是我的基本想法，你可以建立这个。它需要进一步改进，但目前，您可以从它开始

CSS:

分区箱{
宽度：400px；
高度：200px；
利润率：20px；
边框：1px实心#ccc；
边界半径：6px；
}
div.box>标题{
高度：30px；
填充：10px；
背景：#777；
颜色：#333；
}
div.box>header>h1{
浮动：左；
字体大小：14px；
字体大小：正常；
}
div.box>header>a{
显示：内联块；
浮动：对；
宽度：11px；
高度：11px；
边缘顶部：10px；
背景：url(http://www.geocaching.com/images/stockholm/mini/close.gif)不重复0；
}
分区框>分区{
填充：10px；
}
div.box>section表单，div.box>section字段集{
保证金：0；
填充：0；
边界：0；
}

HTML

需要授权
请验证您的…
用户名：

查看jQuery UI的对话框。它使这个对话框几乎变成了T（不包括图像和颜色方案）。我不想使用JQuery UI。我不建议您这样做，但是JQuery包含的CSS库的UI元素（对话框、小部件等）几乎与您提供的示例完全匹配。它是开源的，很容易查看它们使用的样式——只需根据您的目的修改它们即可。我理解，但我更愿意这样做，而不依赖任何外部库或现有样式来帮助我更好地了解CSS3，但我只停留在制作一个简单的对话框上。您没有理解我的观点；我是说，看看jquery UI和库本身是如何做到的，然后修改样式以符合您的目的，然后在项目中只使用这些样式（而不是整个jquery UI 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>

<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>