zoukankan      html  css  js  c++  java
  • 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>

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

    快乐的程序员



  • 相关阅读:
    Palindrome Partitioning
    triangle
    Populating Next Right Pointers in Each Node(I and II)
    分苹果(网易)
    Flatten Binary Tree to Linked List
    Construct Binary Tree from Inorder and Postorder Traversal(根据中序遍历和后序遍历构建二叉树)
    iOS系统navigationBar背景色,文字颜色处理
    登录,注销
    ios 文字上下滚动效果Demo
    经常崩溃就是数组字典引起的
  • 原文地址:https://www.cnblogs.com/Dannier/p/CSS.html
Copyright © 2011-2022 走看看