源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 百度风格的input美化代码,美化你的输入框代码 [打印本页]
作者: 欧阳锋    时间: 2020-2-29 16:06
标题: 百度风格的input美化代码,美化你的输入框代码
代码特效如图：

(, 下载次数: 62)


大家看看美化前的代码：

(, 下载次数: 69)


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录注册页面</title>
  6.     <style>
  7.         *{
  8.            margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             background-color: antiquewhite;

  14.         }
  15.         a{
  16.             text-decoration: none;
  17.         }
  18.         .wrap{
  19.             margin-left: 40%;
  20.             margin-top: 10%;
  21.         }
  22.         p{
  23.             margin-bottom: 10px;
  24.         }
  25.         

  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="wrap">
  31.         <form action="http://www.baidu.com" method="post">
  32.             <p>
  33.                 <label for="user">用户名</label>
  34.                 <input type="text" name="userName" id="user" placeholder="请设置用户名">
  35.             </p>
  36.             <p>
  37.                 <lable for="phoneNumber">手机号</lable>
  38.                 <input type="text" name="phoneNumber" id="phoneNumber" placeholder="可用于登录和找回密码">
  39.             </p>
  40.             <p>
  41.                 <lable for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码</lable>
  42.                 <input type="password" name="password" id="password" placeholder="请设置登录密码">
  43.             </p>
  44.             <p>
  45.                 <lable for="verificationCode">验证码</lable>
  46.                 <input type="text" name="verification" id="verificationCode" placeholder="请输入验证码">
  47.                 <input type="button" name="button" value="获取短信验证码">
  48.             </p>
  49.             <p>
  50.                 <input type="checkbox" value="">
  51.                 阅读并接受
  52.                 <a href="#">《百度用户协议》</a>
  53.                 及
  54.                 <a href="#">《百度隐私权保护声明》</a>
  55.             </p>
  56.             <P>
  57.                 <input type="button" value="注册" style="height:30px; width:50px;">
  58.             </P>
  59.         </form>
  60.     </div>
  61. </body>
  62. </html>
复制代码






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3