作業2 登入 註冊 後臺管理 商城頁面
阿新 • • 發佈：2019-01-10
輸入：
登入頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div style = "width:980px;height:400px;margin:auto;margin-top:100px;"> <div style = "width:40%;height:100%;inline-height:100%;float:left;text-align:center"> <img alt="" src="1.jpg" style = "display:inline-block;width:100%;height:100%;"> </div> <div style = "width:59%;height:100%;float:right;position:relative;"> <div style = "position:absolute;left:10%;width:70%;height:70%;"> <div style = "margin:10%;width:80%;height:10%;"> <div style = "width:25%;height:100%;float:left;text-align:right;"> <label for = "username" style = "color:red">*</label> <label for = "username" style = "font-size:20px;font-weight:bold;">使用者名稱:</label> </div> <div style ="height:25px;width:200px;float:left;position:relative;"> <input type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;"> </span> </div> </div> <div style = "margin:10%;width:80%;height:10%;"> <div style = "width:25%;height:100%;float:left;text-align:right;"> <label for = "username" style = "color:red">*</label> <label for = "username" style = "font-size:20px;font-weight:bold;">密碼:</label> </div> <div style ="height:25px;width:200px;float:left;position:relative;"> <input type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;"> </span> </div> </div> <div style = "margin:10%;width:80%;height:10%;"> <div style = "width:25%;height:100%;float:left;text-align:right;"> <label for = "username" style = "color:red">*</label> <label for = "username" style = "font-size:20px;font-weight:bold;">驗證碼:</label> </div> <div style ="height:25px;width:200px;float:left;position:relative;"> <input type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:5px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;"> </span> </div> </div> <div style = "margin:10%;width:80%;height:10%;margin-left:120px;"> <input type = "checkbox"> <label>自動登入</label> <label> 忘記密碼</label> </div> <div style = "width:50%;height:15%;margin-left:120px;margin-top:40px;"> <input onclick = "window.open('https://blog.csdn.net/zhuisaozhang1292')" type = "button" value = "登入" style = " background-color: red;width:100%;height:100%; border:0" > </div> </div> <a href = "https://blog.csdn.net/zhuisaozhang1292"> <div style = "position:absolute;right:0;bottom:0;width:120px;height:40px;line-height:40px;background:green;text-align:center;"> 免費註冊>> </div> </a> </div> </div> </body> </html>
輸出效果：
註冊頁面
輸入：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div style = "width:980px;height:400px;margin:auto;margin-top:100px;"> <div class = "pg-header" style = "width:980;height:100px;"> <div style = "width:100px;height:20px;inline-height:50px;float:left;text-align:center ;">收藏本站</div> <div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">登入</div> <div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">免費註冊</div> <div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">我的訂單</div> <div style = "width:120px;height:20px;inline-height:50px;float:right;text-align:center ;">VIP會員俱樂部</div> <div style = "width:100px;height:20px;inline-height:50px;float:right;text-align:center ;">客戶服務</div> </div> <div class = "pg-content" style = "width:980;height:800px;"> <div style = "width:200px;height:100px;"> <img alt="" src="1.jpg" style = "width:200px;height:100px;"> </div> <div style = "width:500px;height:600px;margin-top:50px;"> <div> <label style = "font-size:30px;margin-left:50px;top:100px;">註冊新使用者</label> </div> <div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;"> <label for = "username" style = "color:red">*</label> <label for = "username" style = "font-size:20px;font-weight:bold;">使用者名稱:</label> </div> <div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;"> <input id = "username" type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_name.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;"> </span> </div> <div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;"> <label for = "userphone" style = "color:red">*</label> <label for = "userphone" style = "font-size:20px;font-weight:bold;">手機名:</label> </div> <div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;"> <input id = "userphone" type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;"> </span> </div> <div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;"> <label for = "userpwd" style = "color:red">*</label> <label for = "userpwd" style = "font-size:20px;font-weight:bold;">登入密碼:</label> </div> <div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;"> <input id = "userpwd" type="password" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;"> </span> </div> <div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;"> <label for = "userpwd_again" style = "color:red">*</label> <label for = "userpwd_again" style = "font-size:20px;font-weight:bold;">確認密碼:</label> </div> <div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;"> <input id = "userpwd_again" type="password" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_pwd.jpg');height:16px;width:16px;display:inline-block;background-repeat:no-repeat;"> </span> </div> <div style = "width:200px;height:28px;float:left;text-align:right;margin-top:20px;"> <label for = "verify_code" style = "color:red">*</label> <label for = "verify_code" style = "font-size:20px;font-weight:bold;">驗證碼:</label> </div> <div style ="width:200px;height:30px;float:left;position:relative;margin-top:20px;"> <input id = "verify_code" type="text" style = "height:25px;width:170px;padding-right:30px"> <span style="position:absolute;right:5px;top:7px;background-image:url('i_phone.jpg');height:21px;width:14px;display:inline-block;background-repeat:no-repeat;"> </span> </div> <div style = "margin-left:120px;margin-top:20px;float:left;"> <input type = "checkbox"> <label>我已閱讀並同意</label> <a href = "https://blog.csdn.net/zhuisaozhang1292">《使用者註冊協議》</a> </div> <a href = "https://blog.csdn.net/zhuisaozhang1292"> <div style = "width:200px;height:40px; margin-left:120px;margin-top:20px;float:left;border:0;text-align:center;line-height:40px;background-color:red"> <label style = "font-size:20px;font-weight:bold;">自動登入</label> </div> </a> </div> </div> </div> </body> </html>
樣式
