如何制作一个简单的登录页面

原创于 2023-12-29 13:54:40 发布 · 932 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

该篇文章详细描述了一个包含邮箱/手机号/小米ID输入框、密码输入框、登录/注册选项、用户协议和隐私政策确认、登录按钮、找回密码及手机登录选项的网页设计，展示了简洁的登录流程和界面布局。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }
           a {
               text-decoration: none;
           }
           ul {
               list-style: none;
           }
           .clearfloat::after {
               display: block;
               clear: both;
               overflow: hidden;
               content: "";
               height: 0;
           }
           .clearfloat {
               zoom: 1;
           }
           .boss {
               width: 450px;
               height: 568px;
               box-shadow: 0px 0px 2px 3px #b7b7b7;
               margin: 10px auto;
               overflow: hidden;
           }
           .boss_one {
               width: 360px;
               height: 488px;
               margin: 40px auto;
               /* background-color: pink; */
           }
           .boss_a1 {
               font-size: 22px;
               color: #333;
               font-weight: 500;
               display: inline-block;
               width: 44px;
               height: 40px;
               margin-right: 20px;
               border-bottom: 5px solid orange;
               text-align: center;
               line-height: 40px;
           }
           .boss_a2 {
               font-size: 22px;
               color: #bbb;
           }
           .box1_inp {
/*                width: 330px;
               height: 30px;
               border: none;
               background-color: #f9f9f9;
               margin-top: 20px;
               outline:none;
               padding: 15px;
               border-radius: 100%; */
               border-radius: 20px; width: 95%; height: 60px ;
           }
           .box1_inp:focus {
               border: 1px solid orangered !important;
           }
           .box1 {
               position: relative;
           }
           /* .box1_img {
               width: 20px;
               height: 20px;
               position: absolute;
               top: 38px;
               right: 30px;
           } */
           /* .box1_img img {
               width: 100%;
               height: 100%;
           } */
           .box2 {
               margin: 20px 0;
           }
           .box2_inp {
               width: 360px;
               height: 60px;
               border: none;
               background-color: #ffbe99;
               color: #fff;
               font-size: 20px;
           }
           .box2_inp:hover {
               background-color: #ea8c69;
           }
           .box3 p:nth-child(1) {
               color: orange;
               float: left;
               font-size: 17px;
           }
           .box3 p:nth-child(2) {
               color: orange;
               float: right;
               font-size: 17px;
           }
           .box4 {
               width: 360px;
               height: 40px;
               text-align: center;
               margin: 20px 0;
               line-height: 40px;
               color: #bbb;
           }
           .box4 a {
               color: #bbb;
           }
           .box5 div{
               width: 50px;
               height: 50px;
               float: left;
               margin-left: 30px;
           }
           .box5 div img {
               width: 100%;
               height: 100%;
           }

       </style>
   </head>
   <body>
       
       <div class="boss">
           <div class="boss_one">
               <div style="margin-bottom: 20px;">
                   <a class="boss_a1" href="">登录</a>
                   <a class="boss_a2" href="">注册</a>
               </div>
               <div>
                   <input class="box1_inp" type="text" placeholder="邮箱/手机号码/小米ID">
               </div>
               <div class="box1">
                   <input class="box1_inp" type="password" placeholder="密码">
               </div>
               <div class="box2">
                   <input type="checkbox">
                   <span style="color: #AAA;">已阅读并同意小米账号</span>
                   <span style="color: #333;">用户协议</span>
                   <span style="color: #AAA;">和</span>
                   <span style="color: #333;">隐私政策</span>
               </div>
               <div style="margin-bottom: 10px;">
                   <input class="box2_inp" type="button" value="登录">
               </div>
               <div class="box3 clearfloat">
                   <p>忘记密码</p>
                   <p>手机号登录</p>
               </div>
               <p class="box4"><a href="">其他方式登录</a></p>
               <div class="box5">
                   <div>
                       <img src="./1.gif" >
                   </div>
                   <div>
                       <img src="./1.gif" >
                   </div>
                   <div>
                       <img src="./1.gif" >
                   </div>
                   <div>
                       <img src="./1.gif" >
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>