CSS设计 Search窗口

这是我在网上找的，稍微改了以下，不过忘了原文的链接，希望原作者多多包涵了。

这个设计很不错，简洁明了，我很喜欢，推荐给大家，先看看图片，貌似可以用作登陆页面。

以下为CSS代码：

    body
        {
            font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            background-color:#EEF3E2;
            
        }
        p, h1, form, button
        {
            border: 0;
            margin: 0;
            padding: 0;
        }
        .spacer
        {
            clear: both;
            height: 20px;
            color:Red;
            font-size:1.1em;
            padding-top:4px;
            padding-bottom:0px;
        }
        /* ----------- My Form ----------- */.myform
        {
            margin: 0 auto;
            width: 400px;
            padding: 14px;
        }
        /* ----------- stylized ----------- */
        #stylized
        {
            border: solid 2px #b7ddf2;
            background: #ebf4fb;
            margin-top:200px;
        }
        #stylized h1
        {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            border-bottom: solid 1px #b7ddf2;
            padding-bottom: 10px;
        }
        #stylized p
        {
            font-size: 11px;
            color: #666666;
            margin-bottom: 20px;
            border-bottom: solid 1px #b7ddf2;
            padding-bottom: 10px;
        }
        #stylized label
        {
            display: block;
            font-weight: bold;
            text-align: right;
            width: 140px;
            float: left;
        }
        #stylized .small
        {
            color: #666666;
            display: block;
            font-size: 11px;
            font-weight: normal;
            text-align: right;
            width: 140px;
        }
        #stylized .text
        {
            float: left;
            font-size: 12px;
            padding: 4px 2px;
            border: solid 1px #aacfe4;
            width: 200px;
            margin: 2px 0 20px 10px;
        }
        #stylized .button
        {
            clear: both;
            margin-left: 150px;
            width: 125px;
            height: 31px;
            background: #666666 url(img/button.png) no-repeat;
            text-align: center;
            line-height: 31px;
            color: #FFFFFF;
            font-size: 1.2em;
            font-weight: bold;
        }
        #stylized .dropdownlist
        {
            float: left;
            font-size: 12px;
            padding: 4px 2px;
            border: solid 1px #aacfe4;
            width: 120px;
            margin: 2px 0 20px 10px;
        }

以下为Html代码，从Visual Studio 窗口拷过来的。自己改改控件就可以直接使用了。别忘了改名字哦，不然别人会误会的。

<div id="stylized" class="myform">
        <h1>
            NAMEPLATE MARKER INTERFACE</h1>
        <label>
            Serial Number <span class="small">Input a serial number</span>
        </label>
        <asp:TextBox ID="txtSerialNbr" CssClass="text" runat="server"></asp:TextBox>
        <label>
            Organization <span class="small">Select an organization</span>
        </label>
        <asp:DropDownList ID="ddlOrg" CssClass="dropdownlist" runat="server">
        </asp:DropDownList>
        <asp:Button ID="btnSubmit" CssClass="button" runat="server" Text="Submit"/>
        <div class="spacer">
           <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
        </div>
    </div>

欢迎转载，欢迎引用，请注明出处。

快乐的程序员