返回顶部

收藏

table+css与xhtmL+css实现同一登陆框(代码片段)

更多

1、从网上下载了一个不错的登录框样式(table结合css布局);2、初学xhtmL,自己改写了一下,希望有用3. 我怎么不会上传截图呢?

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 { width: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{ width: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{width:85px;}

</style>
</head>
<body>
<div class="login">

    <form id="" name="" action="" method="post">
        <fieldset>
            <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">密  码:</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="登  录" tabindex="3" />
            </div>
        </fieldset>

    </form>

</div>

</body>
</html>

标签:html/css

收藏

0人收藏

支持

0

反对

0

»更多 您可能感兴趣的代码
  1. 2017-07-30 11:24:49苹果商城侧边菜单栏 by 王笃亭
  2. 2017-07-23 16:04:45分享20款漂亮实用的WEB2.0导航菜单源码 by 卷毛
  3. 2017-07-05 11:40:44css3 icon导航 by 张宋付
  4. 2015-09-28 21:05:30CSS Box Shadow by arden
  5. 2015-09-28 16:37:48Eric Meyer: Reset Reloaded by 阮小七
  6. 2015-09-25 15:33:01:-moz-占位符 by Solon.Ring
  7. 2015-09-24 15:04:49未知宽度的居中DIV by bargain
  8. 2015-09-23 12:51:38CSS3 Media Queries by 张永磊
  9. 2015-09-22 12:14:00Pre标签中文字换行 by shenspring
  10. 2015-09-13 16:31:10简单、漂亮的Blockquote样式 by xuleaper
  11. 2019-05-14 11:38:29PHP+MySQL用户注册发送邮件激活账号实例 by 好小灰灰
相关聚客文章
  1. cc 发表 2018-03-30 15:34:13 chrome transition闪烁BUG
  2. cc 发表 2018-03-26 14:54:47 HTML5-语义化
  3. cc 发表 2018-03-20 14:36:25 canvas小tip–下载二维码、图片加水印
  4. cc 发表 2017-02-26 12:07:00 css print
  5. welpher 发表 2010-08-10 13:35:53 网页布局中对全局字体的最佳控制
  6. welpher 发表 2010-08-27 13:55:05 utf-8页面form提交到gb2312页面编码的问题
  7. welpher 发表 2011-08-05 06:19:20 xslt未加doctype引起的jquery方法在firefox不可用的解决方法
  8. welpher 发表 2011-12-08 07:42:04 IE条件注释
  9. welpher 发表 2012-01-23 16:56:42 xhtml入门之标签嵌套
  10. welpher 发表 2012-01-25 16:05:49 字符unicode码对应表
  11. welpher 发表 2012-01-31 15:05:00 学习之“合成”
  12. welpher 发表 2012-02-05 14:08:14 页面合成的一些兼容问题(hasLayout)

发表评论