web前端練習6----登入靜態頁面
阿新 • • 發佈：2019-01-02
效果圖：
原始碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 適配手機--> <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"> <style> * { margin: 0px; padding: 0px; } .biaoti { /*彈性盒子*/ display: flex; /*子元素水平均勻排列*/ justify-content: space-between; /*豎直居中*/ align-items: center; width: 100%; height: 45px; background-color: cornflowerblue; color: #fff; /*相對於視窗浮在最上面*/ position: fixed; left: 0px; top: 0px; } .btImg { width: 18px; height: 18px; margin-left: 5px; } .btZhuCe { font-size: 12px; color: #fff; margin-right: 10px; } .image { width: 90px; height: 90px; /*設定為塊級元素*/ display: block; /*水平居中*/ margin: 0 auto; /*距離頂部65px*/ margin-top: 85px; } .content { width: 257px; margin: 0 auto; margin-top: 65px; } .shuru { width: 257px; height: 45px; /*豎直居中*/ /*彈性盒子*/ display: flex; align-items: center; /*子佈局在父佈局的左右兩端*/ justify-content: space-between; /*新增底邊框*/ border-bottom: 1px #CCC solid; /*超出部分隱藏*/ overflow: hidden; } .icon { width: 17px; height: 17px; } .shurukaung { width: 235px; height: 45px; /*去掉外邊線*/ outline: none; /*去掉邊框*/ border: none; } .denglu { width: 100%; border-radius: 5px; line-height: 45px; text-align: center; color: #fff; background-color: cornflowerblue; margin-top: 15px; } .tongyi { height: 30px; /*彈性盒子*/ display: flex; /*子元素從左到右排列*/ justify-content: flex-start; /*子元素豎直居中*/ align-items: center; } .tongyibuju { height: 30px; /*彈性盒子*/ display: flex; /*子元素從左到右排列*/ justify-content: flex-start; /*子元素豎直居中*/ align-items: center; } .tongyiImg { width: 15px; height: 15px; } .tongyiWenZi { margin-left: 5px; } .xieyi { color: cornflowerblue; } .kefu { width: 100%; line-height: 45px; text-align: center; margin-top: 90px; color: #999; } </style> </head> <body> <div class="biaoti"> <img class="btImg" src="img/back.png"> <span>登入</span> <span class="btZhuCe">註冊</span> </div> <img class="image" src="img/linkgap_icon2.png"> <div class="content"> <div class="shuru"> <img class="icon" src="img/login_username.png"> <input class="shurukaung" type="text" placeholder="使用者名稱"> </div> <div class="shuru"> <img class="icon" src="img/login_password.png"> <input class="shurukaung" type="text" placeholder="密碼"> </div> <div class="denglu">登入</div> <!-- 協議--> <div class="tongyi"> <div onclick="onCheck();" class="tongyibuju"> <img id="tongyiImg" class="tongyiImg" src="img/login_agree1.png"> <div class="tongyiWenZi">同意</div> </div> <div class="xieyi">《服務協議》</div> </div> </div> <!-- 客服電話--> <div class="kefu">客服電話：400-168-0808</div> <script> var istrue = false; function onCheck() { var tongyiimg = document.getElementById("tongyiImg"); if (istrue) { console.log("同意"); tongyiimg.src = "img/login_agree1.png"; istrue = false; } else { tongyiimg.src = "img/login_noagree.png"; console.log("不同意"); istrue = true; } } </script> </body> </html>
原始碼下載
https://download.csdn.net/download/zhaihaohao1/10818970