web前端課程第一次作業----註冊頁面代碼(2018-9-14)
阿新 • • 發佈：2018-09-16
tin normal base ace over lock () NPU body
<!--本次作業完整代碼下載地址-->
www.nekonekolili.top/file/webF/work.zip
<!--html-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>註冊</title> <link rel="shortcut icon" type="image/x-icom" href="./resource/logo/icon.ico"> <!--載入樣式表--> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/register.css"> <!--載入腳本--> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/register.js"></script> </head> <body> <audio class="mus" src="resource/backSetting/the_sky.mp3" loop="true" autoplay="true"></audio> <div class="video"> <video class="backV" autoplay="true" loop="loop" src="resource/backSetting/Damsal_in_the_rain.mp4"> </video> </div> <div class="logo"> <img src="./resource/logo/blue.Dra.png"> </div> <div class="body"> <form action="handlPage.do" id="submitForm" method="POST"> <div class="register"> <div class="item icon"><img src="./resource/logo/blue.Dra.png" alt=""></div> <div class="item title"><span>註冊</span></div> <div class="item username"><input type="text" maxlength="11" minlength="11" placeholder="賬號" required /><hr /></div> <div class="item password"><input type="password" maxlength="6" minlength="6" placeholder="密碼" required/><hr /></div> <div class="item comfirm"><input type="password" maxlength="6" minlength="6" placeholder="再次輸入賬號" required/><hr /></div> <div class="item gender"> <input type="radio" name="gender" value="male" id="male"><label for="male"><div class="option" onclick="selectRadio(this)">宅男</div></label> <input type="radio" name="gender" value="female" id="famale"><label for="famale"><div class="option" onclick="selectRadio(this)">腐女</div></label> <input type="radio" name="gender" value="noKnow" id="nokonw"><label for="nokonw"><div class="option" onclick="selectRadio(this)">秀吉</div></label> </div> <div class="item birthday"> <span>生日：</span> <input type="date" required name="birthday"> <hr /> </div> <div class="item email"> <input type="email" placeholder="郵件地址" name="email" required> <hr /> </div> <div class="item tel"> <input type="tel" placeholder="電話號碼" name="tel" required> <hr /> </div> <div class="item submit"> <a class="a-button" href="javascript:void(0);" onclick="submit("#submitForm")"> 提交 </a> </div> </div> </form> </div> </body> </html>
<!--css-->
<!--normalize.css-->
網站格式化，百度可得
<!--base.css-->
個人常用樣式
<!--register.css,register.html獨有-->
body{ overflow: hidden; } div.video { position: absolute; height: 100%; width:100%; } video.backV { width: 100%; } div.body { position: absolute; height: 100%; width:100%; background-color: rgba(0,0,0,0.7); } div.register { position:absolute; height: 100%; width: 20%; background-color: rgba(255,255,255,0.4); right: 0; z-index: 20; } div.body div.register img { width:60%; } div.body div.register div.title span{ display: block; font-size: 25px; font-family:inherit; font-weight:bolder; text-align: center; } div.username input, div.password input, div.comfirm input, div.email input, div.tel input, div.birthday input { border-width: 0; outline: none; width: 100%; } div.birthday { width:50%; } div.birthday span { color:#a9a9a9; } hr{ background-color: #0099FF; border-width: 0px; height: 1px; } div.gender input { display: none; } div.gender div.option { display: inline-block; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,0.4); border-radius: 4px; padding: 2px 4px; } div.gender div.option:hover { background: #99CCFF; cursor: pointer; } div.submit { height: 30px; width: 100px; } div.submit .a-button { display: inline-block; text-decoration: none; color: white; background: #FF6699; width: 100%; height: 100%; text-align: center; line-height: 30px; } div.submit .a-button:hover { background: #FF3399; text-decoration: none; } div.register div.item { margin: 20px 0; } div.register { padding:40px 20px; } div.register div.submit { display: inline-block; margin-top:10%; margin-left: 60%; } .logo { position: absolute; width:100%; z-index: 10; top: 30%; } input { background-color: rgba(255, 255, 255, 0); color: white; }
<!--js-->
<!--jq-->
jquery
<!--register.js-->
function submit(id) { $(id)[0].submit(); } function selectRadio(element) { $(".option").css({"background-color":"rgba(255,255,255,0)"}); $(element).css({"background":"#99CCFF"}); }
<!--最後附送一張圖片-->
web前端課程第一次作業----註冊頁面代碼(2018-9-14)