源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7365|回复: 0

[CSS/Html] 百度风格的input美化代码,美化你的输入框代码

[复制链接]

1193

主题

1561

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19326
发表于 2020-2-29 16:06:47 | 显示全部楼层 |阅读模式
代码特效如图:

20181022112821726.jpg


大家看看美化前的代码:

20181022112734355.jpg


  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;

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

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


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-2-29 09:09 , Processed in 0.093750 second(s), 33 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明