HTML（一）静态登录注册页面附有完整网页（html+css+js）

建一个文件夹，文件夹里面放两个文件，一个是login.html文件，存放html代码，一个是login.css文件,存放css代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset=UTF-8"><title>程序员之家</title><link rel="stylesheet" href="login.css">
</head><body><div id="head"><ul><li><a>首页</a></li><li><a>博客</a></li><li><a>程序员学院</a></li><li><a>论坛</a></li><li><a>问答</a></li><li><a>代码</a></li><li><a>高校</a></li><li><a href="https://www.csdn.net/" target="blank">CSDN</a></li><li><a href="https://www.cnblogs.com/" target="blank">博客园</a></li><li><a>登录/注册</a></li><li><a>会员中心</a></li></ul></div><divstyle="background-image: url(download.jfif); background-size:100% 100%;margin-left: auto;margin-right: auto;width: 100%;height: 635px;"><section id="content"><div class="header"><a href="javascript:;" class="current">我要登录</a><a href="javascript:;">我要注册</a></div><div id=body><div class="dom" style="display: block;"><form><div id="s1"><h>账号</h><input id="input" type="text" placeholder="手机/邮箱/用户名"></div><div id="s1"><h>密码</h><input id="input" type="password" placeholder="密码"></div><div id="s1"><input type="checkbox"><span>记住密码</span></div><input id="button" type="submit" value="登&nbsp;录"></form><div id="s1"><a href="#">找回密码</a><span>|</span><span>还没有注册帐号?</span><a href="#">立即注册</a></div><div id="s2"><span>使用第三方账号直接登录</span><div class="s3"><a href="#"><img src="data:images/qq.png" alt=""></a><a href="#"><img src="data:images/wechat.png" alt=""></a></div></div></div><div class="dom"><form><div id="s1"><h>手机号码</h><input id="input" type="text" placeholder="填写你的手机号码作为登录账户"></div><div id="s1"><h>用户名</h><input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"></div><div id="s1"><h>密码</h><input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"></div><div id="s1"><h>短信验证码</h><br><input id="input1" type="text" placeholder="填写短信验证码"><input id="button1" type="button" value="获取短信验证码"></div><input id="button" type="submit" value="注&nbsp;册"></form><div id="s2"><span>使用第三方账号直接登录</span><div class="s3"><a href="#"><img src="data:images/qq.png" alt=""></a><a href="#"><img src="data:images/wechat.png" alt=""></a></div></div></div></div></section><script>window.onload = function () {// 1.1 获取需要的标签let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');let contents = document.getElementsByClassName('dom');// 1.2 遍历for (let i = 0; i < as.length; i++) {// 1.2.1 取出单个对象let a = as[i];a.id = i;// 1.2.2 监听鼠标的移动事件a.onclick = function () {// 让所有的a的class都清除for (let j = 0; j < as.length; j++) {as[j].className = '';contents[j].style.display = 'none';}// 设置当前a的classthis.className = 'current';// 从contents数组中取出对应的标签contents[this.id].style.display = 'block';}}}</script></div></div><div id="foot"><ul><li><a>关于我们</a></li><li><a>招贤纳士</a></li><li><a>广告服务</a></li><li><a>开发助手</a></li><li><a>工作时间 8:30-22:00</a></li></ul></div><div align="center" style="color: grey; font-size:12px;">Copyright © 2008-2020. All Rights Reserved</div>
</body></html>

css

body,
html,
div {padding: 0;margin: 0;
}#head {width: 100%;height: 43px;
}
#head ul {list-style-type: none;margin: 0;padding: 0;
}
#head ul li {float: left;
}
#head ul li a {display: block;width: 139.6px;color: black;background-color: white;text-align: center;text-decoration: none;margin: 0;padding-top: 10px;padding-bottom: 10px;font-size: 18px;
}
#head ul li a:hover {background-color: gray;
}#foot {width: 100%;height: 42px;margin-top: 10px;
}
#foot ul {list-style-type: none;margin: 0;padding: 0;
}
#foot ul li {float: left;
}
#foot ul li a {display: block;width: 250px;color: grey;background-color: white;text-align: center;padding: 4px;text-decoration: none;line-height: 30px;font-size: 14px;
}* {text-decoration: none;
}
a {color: blue;
}input,
button {outline: none;
}#content {border: solid 2px #e0e0e0;width: 25rem;height: 33rem;background-color: white;margin-top: 50px;margin-left: 50%;float: left;}.header a {width: 50%;height: 60px;background-color: #f5f5f5;display: inline-block;float: left;/*居中*/text-align: center;line-height: 60px;color: #262626;
}.header a.current {background-color: transparent;color: blue;
}#body {margin: 2rem;
}.dom {width: 100%;display: none;
}#input {width: 100%;height: 2rem;margin-top: 0.5rem;padding-left: 0.5rem;border-radius: 5px;border: 1px solid #cccccc;
}#s1 {margin-bottom: 1rem;
}#button {width: 100%;height: 2rem;border: none;font-size: 1.5em;color: #fff;background-color: blueviolet;border-radius: 3px;margin-bottom: 1rem;
}#s2 {text-align: center;
}#s3 {margin-top: 1rem;
}#input1 {width: 60%;height: 2rem;margin-top: 0.5rem;padding-left: 0.5rem;border-radius: 5px;border: 1px solid #cccccc;
}#button1 {width: 35%;height: 2rem;margin-top: 0.5rem;padding-left: 0.5rem;border-radius: 5px;border: 1px solid #cccccc;cursor: pointer;
}

HTML（一）静态登录注册页面附有完整网页（html+css+js）相关推荐

html css js制作登录注册页面,【7】使用css/js/html模板来实现一个注册、登录和管理的功能...
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 importtornado.web5 importlogging6 importdatetime ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
使用nodejs、express以及MySQL制作一个简单类淘宝的登录注册页面
项目搭建参考自原文地址:https://jimmyhjh.com/nodejs-express-MySQL-4177adf369dc46d7983138b891d582c9 一.通过MySQL建立数 ...
易课寄在线购课系统开发笔记（三十一）--登录注册页面实现
登录注册页面实现注册功能第一步:把静态页面添加到工程中. 第二步:展示页面. 请求的url: 登录:/page/login 注册:/page/register 参数:无返回结果:逻辑视图 Str ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...

HTML（一）静态登录注册页面附有完整网页（html+css+js）

HTML（一）静态登录注册页面附有完整网页（html+css+js）相关推荐

最新文章

热门文章