zoukankan      html  css  js  c++  java
  • 效果不错的登录框制作

    http://bbs.blueidea.com/thread-2830870-1-1.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>
    <style>
    *
    {
    padding
    :0px;margin:0px;
    }

    body
    {
    background
    :#EAEAEA;font-size:12px;
    }

    #test
    {
    position
    :absolute;width:751px;height:246px;left:50%;top:50%;margin:-123px 0 0 -375px;background:url(http://bbs.blueidea.com/attachment.php?aid=79193&noupdate=yes);
    }

    #test_left
    {
    float
    :left;width:459px;
    }

    #test_right
    {
    float
    :right;width:292px; padding:51px 0px 0px 0px;
    }

    #test_right ul
    {
    list-style
    :none;
    }

    #test_right ul li
    {
    background
    :url(http://bbs.blueidea.com/attachment.php?aid=79195&noupdate=yes) no-repeat left center; padding:10px 0px 0px 4px; height:27px;
    }

    #test_right input
    {
    height
    :17px;border:none;font-size:12px;
    }

    .test_buttom
    {
    line-height
    :28px;text-align:center;
    }

    .test_buttom a:link, .test_buttom a:visited, .test_buttom a:active 
    {
    float
    :left;display:block;width:63px;background: url(http://bbs.blueidea.com/attachment.php?aid=79194&noupdate=yes);text-decoration: none;color:#000000; margin:10px 15px 10px 15px;
    }

    .test_buttom a:hover 
    {
    position
    :relative;left:1px;top:1px;
    }

    </style>
    </head>
    <body>
    <div id="test">
       
    <div id="test_left"></div>
       
    <div id="test_right">
       
    <ul>
       
    <li><input name="username" type="text" id="username" style="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes);202px;" onblur="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes)'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px 0px'; }" onclick="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px 0px'; }" maxlength="10" /></li>
       
    <li><input name="password" type="password" id="password" style="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -17px;202px;" onblur="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -17px'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px -17px'; }" onclick="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px -17px'; }" maxlength="10" /></li>
       
    <li><input name="username" type="text" id="username" style="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -34px;150px;" onblur="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -34px'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 70px -34px'; }" onclick="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 70px -34px'; }" maxlength="4" /><img src="http://bbs.blueidea.com/attachment.php?aid=79192&noupdate=yes" align="absmiddle" /></li>
       
    </ul>
       
    <div class="test_buttom"><href="#">登 录</a><href="#">刷 新</a></div>
      
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    软件设计项目进展01 2019/8/19
    mysql中使用utf-8乱码
    mysql学习
    eclipse中怎么查看jsp生成的java代码
    tomcat配置出现问题
    关掉win10下面的ctrl+alt+up/dowm
    java程序运行时内存分析
    java内部类
    Struts2 ERROR StatusLogger No log4j2 configuration file found. Using default configuration: logging
    win10下 Edge和IE浏览器都不能上网,而其他浏览器可以。怎么办?
  • 原文地址:https://www.cnblogs.com/CB/p/1131195.html
Copyright © 2011-2022 走看看