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
界面如下：

web---html+css+js登录界面相关推荐

HTML+CSS+JS登录界面
1.界面样式 1.1登录界面 1.2注册界面代码实现 html <!DOCTYPE html> <html lang="en"><head>& ...
Web网页练习15: 登录界面
Web网页练习15: 登录界面欢迎扫码关注微信公众号 "野心与家" 效果图只保留精简效果,具体细节未展示源代码 <!DOCTYPE html> <html& ...
idea中创建maven依赖下的web工程(一)----用户登录界面
如果你对idea中创建maven依赖下的web工程不是很了解,请参见上一篇博客--idea中创建maven依赖下的第一个web工程各路大神对于idea的基本操作已经非常的熟悉了, 嗯,我还是一只入门 ...
基于jsp+servler+css的登录界面
基于jsp+servlet的登录界面 jsp代码: <%@ page language="java" contentType="text/html; charset ...
web综合案例：登录界面,注册界面,忘记密码等功能实现
写在前面本博文是写了一个登录注册以及在忘记密码的时候可以进行邮箱验证修改密码的功能模板: 需要用到的知识有 1.java邮箱 2.boostrap 3.数据库连接一.数据库图片二.登录界面三. ...
web项目通用简易登录界面
效果展示代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
登录页面html代码菜鸟,CSS+html登录界面（菜鸟学前端）
html> 龙首观景苑-登录 body { background:url(image/8.gif ); background-size:1900px 1000px; background-rep ...
登录界面转换实现html,HTML+CSS系列:登录界面实现
@font-face{font-family:"iconfont";src:url('iconfont.eot?t=1601708272399'); /*IE9*/src:url( ...
HTML5+CSS3+JS制作动态背景登录界面
目录第一步:编写HTML框架第二步:设置css样式表第三步:编写js代码第一步:编写框架 1.分别新建html,css和js文档后,将css和js分别链接至html中. 2.编写html基本框 ...

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

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

web---html+css+js登录界面相关推荐

最新文章

热门文章