web---html+css+js登录界面
生活随笔
收集整理的這篇文章主要介紹了
web---html+css+js登录界面
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
??使用HTML、CSS、JavaScript實現(xiàn)登錄的簡單靜態(tài)界面，登錄注冊等功能還未實現(xiàn)。
源代碼如下：
<!doctype html> <html><head><meta charset="utf-8"><title>LYW</title><!--CSS代碼塊--><style type="text/css">/*dl_main塊總體布局*/#dl_main{position: absolute;left:30%;top: 40%;width: 40%;height:450px;margin-top:-200;/*底部空白*/ text-align-last: center;/*所有內(nèi)容居中*/background-color: #9A9A9A;/*背景顏色*//*背景顏色設置透明效果，兩種方式支持的瀏覽器不同*/filter: opacity(70);opacity: 0.7;}/*dl_main中賬號*/#account{color: #000000;text-align: center;font-size: 30px;border-radius: 25px;/*邊框弧度*/}/*dl_main中密碼*/#password{color: #000000;text-align: center;font-size: 30px;border-radius: 25px;/*邊框弧度*/}/*dl_main中注冊*/#zhuce{font-size: 17px;}/*dl_main中記住密碼*/#remPassword{font-size: 17px;}/*dl_main中忘記密碼*/#forget{font-size: 17px;}/*dl_main中登錄*/#denglu{background-color: #605993;color: #FFFFFF;height:50px;width:300px;padding:5px 10px;/*上下填充10 左右5*/font-size: 20px;border:0;/*邊框?qū)挾?/border-radius:10px;/*邊框弧度*/}/*改變超鏈接的顏色*/a{color: #000000;}</style><!--JavaScript代碼塊--><script type="text/javascript">function f_login(){account = window.document.loginForm.account.value;password = window.document.loginForm.password.value;if(account==""){alert("賬號不能為空");document.loginForm.account.focus();//聚焦return;}else if(password==""){alert("密碼不能為空"); document.loginForm.password.focus();//聚焦return; } document.loginForm.submit(); }</script></head><body background="星.jpg" style="background-repeat: no-repeat;background-size: cover;background-attachment: fixed"><div id="dl_main"><h1 style="color:#000000;font-size: 60px;font-family: '華文楷體'">Login</h1><br><!--表單（包括賬號、密碼、注冊、記住密碼、忘記密碼、登錄）--><form name="loginForm"><input type="text" name="account" id="account" placeholder="請輸入賬號"><br><br><input type="password" name="password" id="password" placeholder="請輸入密碼"><br><a href="register.html" style="text-decoration:none" name="zhuce" id="zhuce">注冊賬號</a> <input type="checkbox" name="remPassword" id="remPassword"><label for="remPassword">記住密碼</label> <a href="forget.html" style="text-decoration:none" name="forget" id="forget">忘記密碼</a><br><br><input type="button" name="denglu" id="denglu" value="登 錄" onClick="f_login()"></form></div></body> </html>用到圖片星.jpg
界面如下：
總結(jié)
以上是生活随笔為你收集整理的web---html+css+js登录界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络---非归零码、曼彻斯特编码和
- 下一篇： web---Tomca安装，Server