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>
  • 相关阅读:
    zoj 2316 Matrix Multiplication 解题报告
    BestCoder7 1001 Little Pony and Permutation(hdu 4985) 解题报告
    codeforces 463C. Gargari and Bishops 解题报告
    codeforces 463B Caisa and Pylons 解题报告
    codeforces 463A Caisa and Sugar 解题报告
    CSS3新的字体尺寸单位rem
    CSS中文字体对照表
    引用外部CSS的link和import方式的分析与比较
    CSS样式表引用方式
    10个CSS简写/优化技巧
  • 原文地址:https://www.cnblogs.com/CB/p/1131195.html
Copyright © 2011-2022 走看看