登陆表单

效果图

html代码

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>后台管理</title>
  9.   </head>
  10.   <style>
  11.     .top {
  12.       background: #008ead;
  13.       width: 100%;
  14.       height: 400px;
  15.       padding: 0px;
  16.       margin: 0px;
  17.       font-size: 20px;
  18.     }
  19.     .fra {
  20.       width: 400px;
  21.       height: 250px;
  22.       margin: auto auto;
  23.       background: #ffffff;
  24.       text-align: center;
  25.       border: 5px solid #e7e7e7;
  26.     }
  27.     .box {
  28.       position: absolute; /* 1. 开启绝对定位 */
  29.       left: 50%; /* 3. 向右偏移父元素宽度的50% */
  30.       top: 50%; /* 4. 向下偏移父元素宽度的50% */
  31.       transform: translate(-50%, -50%); /* 5. 使用translate根据自身的宽度向左位移50%，向上位移50%*/
  32.     }
  33.   </style>
  34.   <body>
  35.     <div class="top">
  36.       <div class="fra box">
  37.         <h2>登陆后台管理</h2>
  38.         <form action="" method="post">
  39.           <div>
  40.             <label for="username">用户名：</label>
  41.             <input type="text" id="username" name="username" value="" placeholder="请输入用户名" autofocus required />
  42.           </div>
  43.           <div>
  44.             <label for="password">密码：</label>
  45.             <input type="password" id="password" name="password" value="" placeholder="请输入密码" required />
  46.           </div>
  47.           <div>
  48.             <label for="email">邮箱：</label>
  49.             <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required />
  50.           </div>
  51.           <div>
  52.             <button>登陆</button>
  53.           </div>
  54.         </form>
  55.       </div>
  56.     </div>
  57.   </body>
  58. </html>

更多相关文章

  1. 一个简单的登陆表单、后台框架及实例演示元素样式来源和优先级
  2. Android(安卓)一张图理解getWidth和getMeasuredWidth
  3. 2013.12.04 （3）——— android SlidingMenu之PropertiesActivity
  4. Android的计量单位px,in,mm,pt,dp,dip,sp
  5. Android对话框的几种形式
  6. android Seekbar双滑块滑动
  7. Android对话框的几种形式
  8. android画一条虚线
  9. android获取屏幕长宽的方法

随机推荐

  1. Android进程管理简单介绍
  2. 最新的免费android教程，助你深入浅出的轻
  3. Android自定义属性与自定义属性的获取
  4. Android壁纸机制（Android Q与老版本对比）
  5. Android中AsyncTask详解，源码剖析(API 23)
  6. Android获取机身存储、内置SD卡与外置TF
  7. 制约Android发展的三大难题
  8. Android 4.0应用界面设计分析
  9. Android Handler 线程消息机制
  10. Android串口通信：抱歉，学会它真的可以为所