zoukankan      html  css  js  c++  java
  • table+css与xhtmL+css实现同一登陆框(代码片段)

    1、从网上下载了一个不错的登录框样式(table结合css布局); 
    2、初学xhtmL,自己改写了一下,希望有用 
    3. 我怎么不会上传截图呢?  
    ​1. [代码]xhtml_css组合    
    <!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>form表单—xhtml_css表示</title>
    <style type="text/css">
     
        body,h2,h3,p,img,dl,dd,ul, ol,li{margin:0;padding:0;border:none;font-size:12px;color:#666}
        body{margin:0 auto;font-family: verdana, tahoma, sans-serif;}
        ul,ol,li{ list-style:none}
        a{text-decoration:none; color:#666}
        a:hover{ color:#F60; }
         
        .login { 180px; padding:15px 10px;}
        .login fieldset{ border:0; margin:0px; padding:0px;}
        .login legend{ display:none}
        .login_title,.login_item,.login_footer{ margin-top:8px;}
        .login_title p,.login_item .input_user,.login_item .input_pwd,.login_footer .login_btn{ margin-top:6px;}
         
         
        .login_title h3{ height:20px; padding-top:5px; font-size:10px;font-weight:bold; background-color:#F4F4F4}
        .login_title img{ 16px; height:16px; } 
        .login_title p{ font-size:12px;color:#666666}
         
        .login_item label{ display:block;}
        .login_item input{background:#FFFFFF;border:1px solid #CCCCCC;color:#000000;font-size:0.95em;}
        .login_item .input_user{background-image:url(images/username.gif);background-position:1px 1px;background-repeat:no-repeat;padding-left:20px;height:20px;FONT-SIZE:12px;}
        .login_item .input_pwd{background-image:url(images/password.gif);background-position:1px 1px;background-repeat:no-repeat;padding-left:20px;height:20px;FONT-SIZE:12px;}
         
        .login_footer p{font-size:10px;color:#F60}
        .login_footer .login_btn{85px;}
     
    </style>
    </head>
    <body>
    <div class="login">
         
        <form id="" name="" action="" method="post">
            <fieldset>http://www.huiyi8.com/gongzuozongjie/​
                <legend>登陆</legend>
                <div class="login_title">
                    <h3><b>+用户登录</b></h3>
                    <P><img src="images/warning.gif" align="absmiddle">请输入登陆的用户和密码</P>
                </div>工作总结
                <div class="login_item">
                    <label for="form_user">用户名:</label>
                    <input type="text" class="input_user" name="form_user" id="form_user" value="" tabindex="1" />
                </div>
                <div class="login_item">
                    <label for="form_pwd">密&nbsp;&nbsp;码:</label>
                    <input type="text" class="input_pwd" name="form_pwd" id="form_pwd" value="" tabindex="2" />
                </div>
                <div class="login_footer">
                    <p>忘记密码?</p>
                    <input type="submit"  class="login_btn" value="登&nbsp;&nbsp;录" tabindex="3" />
                </div>
            </fieldset>
         
        </form>
     
    </div>
     
    </body>
    </html>

  • 相关阅读:
    Google 地图小例子
    实现网站的中英文转换
    必须掌握的八个【cmd 命令行】
    C#发送email
    sql 参数化查询,添加,删除
    SqlDataReader使用序数索引器
    DataSet数据筛选和排序
    Connect Propertity
    SqlDataReader读取数据
    SqlDataReader读取数据
  • 原文地址:https://www.cnblogs.com/xkzy/p/3979606.html
Copyright © 2011-2022 走看看