先上瀏覽圖片
注冊頁面代碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { background-image: url('https://s1.ax1x.com/2020/06/04/twwn5q.jpg'); background-repeat: repeat-y; } .mod-new-reg-content { /* 相對路徑 */ position: absolute; right: 200px; top: 7%; margin: 0 0 22px 39px margin-top: 80px; width: 460px; height: 480px; *background: #fff; background: #fff \9; background: rgba(255, 255, 255, .9); /* 圓角 */ border-radius: 12px; /* 防止溢出 */ overflow: hidden } .mod-new-reg-content .new-reg-guide-login { margin: 50px 0 22px 39px } .table-1 { position: relative; /*靠右距離*/ left: 45px; /*靠上距離*/ top: 10px; height: 160px; } /*用戶名，郵箱，密碼輸入框*/ .shurukuang { font-size: 18px; height: 25px; width: 280px; /* 圓角 */ border-radius: 4px; /* 邊框樣式 */ border: 1px solid #c8cccf; color: #6a6f77; } /*驗證碼和驗證碼輸入框的位置*/ .yanzhengma { position: relative; left: 47px; top: 20px; height: 160px; . padding-left: 5 px; } /*驗證碼輸入框*/ .yanzhengmashurukuang { font-size: 18px; height: 25px; width: 155px; /* 圓角 */ border-radius: 4px; /* 邊框樣式 */ border: 1px solid #c8cccf; color: #6a6f77; } /* 按鈕*/ button { /* 創建漸變 */ background: #70e1f5; background-image: -webkit-linear-gradient(top, #70e1f5, #ffd194); background-image: -moz-linear-gradient(top, #70e1f5, #ffd194); background-image: -ms-linear-gradient(top, #70e1f5, #ffd194); background-image: -o-linear-gradient(top, #70e1f5, #ffd194); background-image: linear-gradient(to bottom, #70e1f5, #ffd194); width: 340px; /*設置按鈕寬度*/ height: 40px; /*設置按鈕高度*/ color: white; /*字體顏色DarkBlue*/ border-radius: 3px; /*讓按鈕變得圓滑一點*/ border-width: 0; /*消去按鈕丑的邊框*/ margin: 0; outline: none; /*取消輪廓*/ font-family: KaiTi; /*字體設置為楷體*/ font-size: 17px; /*設置字體大小*/ text-align: center; /*字體居中*/ cursor: pointer; /*設置鼠標箭頭手勢*/ } /*鼠標移入按鈕范圍時改變顏色*/ button:hover { background: #2079b0; background-image: -webkit-linear-gradient(top, #4568dc, #b06ab3); background-image: -moz-linear-gradient(top, #4568dc, #b06ab3); background-image: -ms-linear-gradient(top, #4568dc, #b06ab3); background-image: -o-linear-gradient(top, #4568dc, #b06ab3); background-image: linear-gradient(to bottom, #4568dc, #b06ab3); text-decoration: none; } </style> </head> <body> <div class=" mod-new-reg-content"> <div class="new-reg-guide-login"> <h2>歡迎注冊</h2> <p>已有帳號？ <a href="login.html">立即登錄</a></p> </div> <table class="table-1"> <tr> <td>用戶名:</td> <td><input type="text" class="shurukuang" name="username" placeholder="請輸入你用戶名" /> <br></td> </tr> <tr> <td>郵 箱:</td> <td><input type="text" name="email" class="shurukuang" placeholder="請輸入你郵箱" /></td> </tr> <tr> <td>密 碼:</td> <td><input type="password" class="shurukuang" name="password" placeholder="請輸入你密碼" /></td> </tr> </table> <div class="yanzhengma"> <label> <td>驗證碼:</td> <input type="text" class="yanzhengmashurukuang " name="vcode" placeholder="請輸入驗證碼" /> </label> <br> <br> <button type="button" class="zhuchebutton" >立即注冊 </button> </div> </div> </body> </html>
登錄頁面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body { background-image: url('https://s1.ax1x.com/2020/06/04/twwn5q.jpg'); background-repeat: repeat-y; } .mod-new-reg-content { /* 相對路徑 */ position: absolute; right: 200px; top: 20%; margin: 0 0 22px 39px margin-top: 80px; width: 350px; height: 320px; *background: #fff; background: #fff \9; background: rgba(255, 255, 255, .9); /* 圓角 */ border-radius: 12px; /* 防止溢出 */ overflow: hidden } .mod-new-reg-content .new-reg-guide-login { margin: 20px 0 22px 39px } .shurukuang { font-size: 18px; height: 25px; width: 260px; /* 邊框樣式 */ border: 1px solid #c8cccf; color: #6a6f77; } .table-1 { position: relative; /*靠右距離*/ left: 45px; /*靠上距離*/ height: 160px; } /* 按鈕*/ button { /* 創建漸變 */ background: #70e1f5; background-image: -webkit-linear-gradient(top, #70e1f5, #ffd194); background-image: -moz-linear-gradient(top, #70e1f5, #ffd194); background-image: -ms-linear-gradient(top, #70e1f5, #ffd194); background-image: -o-linear-gradient(top, #70e1f5, #ffd194); background-image: linear-gradient(to bottom, #70e1f5, #ffd194); width: 260px; /*設置按鈕寬度*/ height: 40px; /*設置按鈕高度*/ color: white; /*字體顏色DarkBlue*/ border-radius: 3px; /*讓按鈕變得圓滑一點*/ border-width: 0; /*消去按鈕丑的邊框*/ margin: 0; outline: none; /*取消輪廓*/ font-family: KaiTi; /*字體設置為楷體*/ font-size: 17px; /*設置字體大小*/ text-align: center; /*字體居中*/ cursor: pointer; /*設置鼠標箭頭手勢*/ } /*鼠標移入按鈕范圍時改變顏色*/ button:hover { background: #2079b0; background-image: -webkit-linear-gradient(top, #4568dc, #b06ab3); background-image: -moz-linear-gradient(top, #4568dc, #b06ab3); background-image: -ms-linear-gradient(top, #4568dc, #b06ab3); background-image: -o-linear-gradient(top, #4568dc, #b06ab3); background-image: linear-gradient(to bottom, #4568dc, #b06ab3); text-decoration: none; } .pbiaoqian { font-size: 10px; } </style> </head> <body> <div> <div class="mod-new-reg-content"> <br> <div class="new-reg-guide-login"> <h3>帳號密碼登錄</h3> <div class="pbiaoqian"><p>沒有賬號？ <a href="reg.html">去注冊</a></p></div> </div> <div class="table-1"> <label> <tr> <td><input type="text" class="shurukuang" name="yonghuming" placeholder="請輸入你用戶名" /> </td> </tr> </label> <br> <label> <tr> <td><input type="password" class="shurukuang name=" mima" placeholder="請輸入你的密碼"></td> </tr> </label> <div> <br> <label><input type="radio" name="" value="">記住密碼</label> </div> <br> <button type="button">登入 </button> </div> </div> </div> </body> </html>