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 会更好吗？我正在寻找没有 JQuery UI 或任何 javascript 的最佳方法。

Answer 1

用小提琴：

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>

Answer 2

您可以使用一些 div - 将它们一个接一个地放置。有一种颜色，另一种颜色。然后你可以使用一些花哨的 css 边框半径样式。

http://border-radius.com/