模仿blblblbl登录页面

css样式

/*start*/
.blbl-start-first{
   font-size: 16px;
   color: black;
}
.blbl-tougao{
   position: relative;
   color: #fff;
   font-size: 14px;
   display: block;
   width: 100px;
   height: 36px;
   line-height: 36px;
   text-align: center;
   background: #fb7299;
   border-radius: 2px;
   margin-left: 14px;
}
.blbl-start-dlu{
   width: 45px;
   height: 45px;
   border-radius: 50%;
   /*line-height: 45px;*/
   font-size: 14px;
   color: deepskyblue;
   letter-spacing: 0;
   background: #e7e7e7;
   text-align: center;
   font-weight: 600;
}
/*center*/

      .blbl-center-first{

      }
      .blbl-center-second{
         margin-left: 222px;
      }
   /*.blbl-center-third-left*/
      .blbl-center-third-left{
         width: 210px;
         height: 200px;
         border: 0px solid red;
         margin-left: 400px;
         margin-top: 60px;
      }
      .blbl-footers{
         width: 480px;
         height: 155px;
         background: url(//s1.hdslb.com/bfs/static/passport/static/img/2233login.af9c53d.png) 0 -7px no-repeat;
         margin-left: 250px;
      }
      .EWM-text{
         padding-top: 20px;
         text-align: center;
         color: #222;
         font-size: 18px;
         letter-spacing: 3px;
         margin-bottom: 5px;
      }
      .app-link{
         text-align: center;
         color: #717171;
         font-size: 14px
      }
   /*.blbl-center-third-right*/
      .blbl-center-third-right{
               width: 520px;
               height:350px;
               border: 0px solid red;
               margin-left: 800px;
               margin-top: -380px;
               background-color: white;
            }
      .blbl-center-third-right-first{
         font-size: 16px;
         color: #00BFFF;
         margin-left: 80px;
         border: 0px solid pink;
      }
         #input01 {
            width: 180px;
            height: 30px;
            border: 0px solid;
            font-size: 15px;
            color: #676767;
            margin-left: 80px;
         }
            #input01:hover {
               border: 0px;
               color: deepskyblue;
            }

      .blbl-center-third-right-second{
         font-size: 16px;
         color: #000000;
         margin-left: 200px;
         border: 0px solid pink;
         margin-top: -22px;
      }
         #input02 {
            width: 180px;
            height: 30px;
            border: 0px solid;
            font-size: 15px;
            color: #676767;
            float: right;
            margin-top: -30px;
            margin-right: 110px;
         }
            #input02:hover {
               border: 0px;
               color: deepskyblue;
            }
      .blbl-center-third-right-third{
         margin-left: 80px;
         margin-top: 20px;
      }
         .blbl-username{
            width: 420px;
            height: 40px;
            border-radius: 3px;
            border-color: gainsboro;
         }
      .blbl-center-third-right-fourth{
         margin-left: 80px;
         margin-top: 30px;
      }
         .blbl-username{
            width: 420px;
            height: 40px;
            border-radius: 3px;
            border-color: gainsboro;
         }
      .blbl-center-third-right-fifth{
         margin-left: 80px;
         margin-top: 30px;
      }
         #blbl-jzw{
            font-size: 12px;
         }
         #blbl-bszjdnsbygxcx{
            font-size: 12px;
            color: darkgrey;
         }
      .blbl-center-third-right-sixth{
         margin-left: 65px;
      }
         #blbl-denglu{
            background-color: #00BFFF;
            color: white;
            font-size: 15px;
            width: 200px;
            height: 40px;
            border-radius: 2px;
            border: 0px;
         }
         #blbl-zhuce{
            background-color: white;
            color: darkgray;
            font-size: 15px;
            width: 200px;
            height: 40px;
            border-radius: 2px;
            border: 1px solid darkgrey;
         }
      .blbl-center-third-right-seventh{
         margin-left: 65px;
         margin-top: 20px;
      }
   /*.blbl-center-fourth*/
      .blbl-center-fourth{
         width: 600px;
         height: 30px;
         border: 0px solid red;
         font-size: 12px;
         color: darkgray;
         margin-left: 600px;
         margin-top: 20px;
      }
   /*.blbl-center-fifth*/
      .blbl-center-fifth {
         width: 1500px;
         height: 250px;
         border: 0px solid red;
         background-color: #dcdcdc;
         margin-top: -10px;
      }
         /*.blbl-center-fifth-left*/
         .blbl-center-fifth-left{
            width: 350px;
            height: 220px;
            border: 0px solid red;
            border-right-color:white ;
            margin-left: 300px;
            margin-top: 10px;
         }
            .blbl-center-fifth-left-first{
               margin-left: 20px;
            }
            .blbl-center-fifth-left-second{
               margin-left: 20px;
            }
            .blbl-gywm{
               color: #000000;
               font-size: 14px;
            }.blbl-gywm:hover{
               color: deepskyblue;
                         }
         /*.blbl-center-fifth-right*/
         .blbl-center-fifth-right{
               width: 450px;
               height: 220px;
               border: 0px solid red;
            border-right-color:white ;
               margin-left: 660px;
               margin-top: -230px;
            }
            .blbl-center-fifth-right-first{
               margin-left: 20px;
            }
            .blbl-center-fifth-right-second{
               margin-left: 20px;
            }
            .blbl-gywm{
               color: #000000;
               font-size: 14px;
            }.blbl-gywm:hover{
                color: deepskyblue;
             }
         .blbl-center-fifth-third{
            width: 420px;
            height: 200px;
            border: