zoukankan      html  css  js  c++  java
  • 带图标的登陆框

    效果图:

     HTML文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>带图标的登陆框</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    
    
    <div id="sidebar">
        <h3>请输入登录的用户名和密码</h3>
        <form method="post" action="index.html">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="text username" />
            <label for="password">Password</label>
            <input type="password" name="password" id="password" class="text password" />
            <a href="###">Get your Password?</a>
            <input type="submit" value="" class="submit" />
        </form>
    </div>
    
    </body>
    </html>

    样式文件:

    body {
        background:#fff;
        font-size:12px;
    }
    div{
        margin:0 auto;
    }
    #sidebar h3 {
        font-size:12px;
        font-weight:normal;
        background:url(../images/warning.gif) no-repeat left center;
        padding:0 0 0 20px;
    }
    #sidebar form * {
        display:block;
        margin:8px 0;
    }
    #sidebar form label {
        font-weight:bold;
    }
    #sidebar form input.text {
        width:160px;
        height:18px;
        border:1px solid #999;
        background:#fff;
        color:#999;
    }
    #sidebar form input.username {
        background:url(../images/username.gif) no-repeat 2px center;
        padding:0 0 0 20px;
    }
    #sidebar form input.password {
        background:url(../images/password.gif) no-repeat 2px center;
        padding:0 0 0 20px;
    }
    #sidebar form a {
        width:180px;
        color:#f60;
    }
    #sidebar form input.submit {
        width:70px;
        height:21px;
        background:url(../images/loginin.gif) no-repeat;
        border:none;
        cursor:pointer;
        margin:0 0 0 60px;
    }
  • 相关阅读:
    小球(总结sort和cmp函数、结构体排序)
    垃圾装袋(标记法)【标记思想】
    种树(标记思想)【贪心算法】
    PHP 配置文件
    最大前驱路径
    PHP代码片段
    PHP 中的Trait
    BootStrapTable 错误
    工作两周总结
    工作一周总结
  • 原文地址:https://www.cnblogs.com/LO-ME/p/3617673.html
Copyright © 2011-2022 走看看