一號店登入系統
阿新 • • 發佈:2018-11-28
一號店註冊:
<html lang="en"> <head> <meta charset="UTF-8"> <title>登入</title> <style> *{ margin: 0px; padding: 0px; } .clear{ content: ''; display: block; clear: both; } body{ background: #fcfcfc; } .logo{ margin: 20px 0px 20px 150px; float: left; } .login{ height: 32px; line-height: 32px; margin: 10px 150px 0px 0px; float: right; } #help{ margin: 0px 0px 0px 20px; float: right; padding:0px 7px; border: #dbdbdb 1px solid; font-size: 13px; } #help img,#help span{ vertical-align: middle; } #welcome{ color: #b4b4b4; font-weight: lighter; } #login{ text-decoration: none; color: #6f69d9; } header{ height: 110px; border-bottom: #b4b4b4 1px solid; } .bodyimg{ margin-top: 30px; position: relative; left: -70px; } .load{ margin-top: 80px; float: right; margin-right: 260px; width: 330px; } .load span:nth-of-type(1){ font-size: 15px; font-weight: bold; color: #727272; } #load{ text-decoration: none; float: right; padding-top: 5px; } .load1{ width: 305px; height: 60px; margin: 5px 0px; padding-left: 20px; background: white; position: relative; border: #a7a7a7 1px solid; } .load1 input{ margin-left: 25px; border: none; line-height: 24px; height: 24px; outline: none; width: 230px; position: relative; bottom: 7px; font-size: 15px; } .load1 img{ margin-top: 17px; } .zidong input,.zidong a{ vertical-align: middle; } .zidong{ display: inline; color: #a7a7a7; } .forget{ float: right; } .forget a{ color: #a7a7a7; text-decoration: none; } input[value=登入]{ width: 327px; height: 50px; line-height: 50px; margin-top: 15px; background: #ff3f44; border: none; border-radius: 2px; color: white; font-size: 16px; } .more{ margin-top: 15px; color: #72726f; } li{ list-style-type: none; } ul{ margin-top: 15px; } .fl li:nth-of-type(1){ width: 55px; height: 34px; background: url("../一號店/qqf.png") no-repeat; background-size: contain; float: left; } .fl li:nth-of-type(2){ width: 55px; height: 34px; background: url("../一號店/wbf.png") no-repeat; background-size: contain; float: left; } .fl li:nth-of-type(3){ width: 55px; height: 34px; background: url("../一號店/zhif.png") no-repeat; background-size: contain; float: left; } .fl li:nth-of-type(4){ width: 55px; height: 34px; background: url("../一號店/wxf.png") no-repeat; background-size: contain; float: left; } .fl li:nth-of-type(5){ background: url("../一號店/loadMore.png") right no-repeat; height: 34px; line-height: 34px; background-size: 20px 14px; padding-left: 10px; width: 100px; float: left; } .fl li:nth-of-type(5) a{ text-decoration: none; color: #a7a7a7; } .fl li:nth-of-type(1):hover{ background: url("../一號店/qqt.png") no-repeat; background-size: contain; } .fl li:nth-of-type(2):hover{ background: url("../一號店/wbt.png") no-repeat; background-size: contain; } .fl li:nth-of-type(3):hover{ background: url("../一號店/zhit.png") no-repeat; background-size: contain; } .fl li:nth-of-type(4):hover{ background: url("../一號店/wxt.png") no-repeat; background-size: contain; } footer{ margin-top: 50px; text-align: center; } .foot{ margin: 0px auto; width: 300px; padding-bottom: 25px; } .fr{ float: left; } .fr a{ text-decoration: none; color: black; } .fr a:hover{ color: red; } </style> </head> <body> <header> <div class="logo"><a href="#"><img src="../一號店/loginlogo.jpg"></a></div> <div class="login"><span id="welcome">您好,歡迎光臨1號店!</span><a href="#" id="login">請登入</a><div id="help"><img src="../一號店/runbun.png"><span>幫助中心</span><img src="../一號店/turnb.png"></div></div> </header> <section> <div class="loginbody"> <img src="../一號店/loadimg.jpg" class="bodyimg"> <div class="load"> <span>1號店使用者登入</span> <a href="#" id="load">註冊賬號</a> <div class="clear"></div> <form method="post" action="#"> <div class="load1"><img src="../一號店/userHead.png"><input type="text" placeholder="郵箱/手機/使用者名稱"></div> <div class="load1"><img src="../一號店/lock.png"><input type="password" placeholder="密碼"></div> <div class="zidong"><input type="checkbox" value="自動登入">自動登入</div> <div class="forget"><a href="#">忘記密碼?</a></div> <div class="clear"></div> <input type="submit" value="登入"> </form> <div class="more">更多合作網站賬號登入</div> <ul class="fl"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#">更多合作網站</a></li> </ul> </div> </div> <div class="clear"></div> </section> <footer> <div class="foot"> <ul id="fr"> <li class="fr"><a href="#">滬ICP備13044278號</a> |</li> <li class="fr"> 合字B1.B2-20130004 |</li> <li class="fr"> <a href="#">營業執照</a></li> </ul> </div> <div class="clear"></div> <p>Copyright©1號店網上超市 2007-2016,All Rights Reserved</p> </footer> </body> </html>