100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > web---html+css+js登录界面

web---html+css+js登录界面

时间:2022-07-30 09:54:51

相关推荐

web---html+css+js登录界面

使用HTML、CSS、JavaScript实现登录的简单静态界面,登录注册等功能还未实现。

源代码如下:

<!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;/*所有内容居中*/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;/*边框宽度*/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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="remPassword" id="remPassword"><label for="remPassword">记住密码</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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

界面如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。