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>

 

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

快乐的程序员

转载于:https://www.cnblogs.com/Dannier/archive/2011/09/22/CSS.html