html+css+js（登录页）
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: "microsoft yahei";
}
html,body{
background-image: url(img/jld.png);
background-size: 100% 100%;
height: 100%;
}
.login{
background-color: #FFFFFF;
top: 25%;
position: absolute;
left: 70%;
right: 5%;
bottom: 25%;
border-radius: 15px;
}
.container{
position: relative;
}
.tips,.title,.p,.l,.u{
position: absolute;
/* border: 1px solid red; */
width: 100%;
}
input{
height: 35px;
background-color: #f2f2fa;
border: 0px;
border-radius: 5px;
width: 80%;
}
button{
height: 35px;
background-color: #467fe6;
border: 0px;
border-radius: 5px;
width: 80%;
color: #FFFFFF;
font-size: 16px;
}
.title{
top: 0%;
bottom: 80%;
text-align: center;
font-size: 25px;
font-weight: bold;
padding-top: 10px;
box-sizing: border-box;
}
.u{
top: 20%;
bottom: 60%;
left: 10%;
}
.p{
top: 40%;
bottom: 40%;
left: 10%;
}
.l{
top: 60%;
bottom: 20%;
left: 10%;
}
.tips{
top: 80%;
bottom: 0%;
font-size: 14px;
color: #b9b9b9;
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<div class="title">
废物自学系统
</div>
<div class="u">
<input type="text"/>
</div>
<div class="p">
<input type="password" />
</div>
<div class="l">
<button>登陆</button>
</div>
<div class="tips">
推荐使用YouTube访问
</div>
</div>
</body>
</html>
效果展示如图
html+css+js（登录页）的更多相关文章
- SSM登录跳转到登录页，登录页不能加载js和样式
SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...
- JS实现登录页密码的显示和隐藏功能
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言 PHP 学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...
- HTML---引入css,js | 常用标签示例
一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- Windows下Tomcat+nginx配置证书实现登录页https访问
最近公司出于安全考虑,需要将登录页做成https访问,其他页面仍采用http访问,环境是Linux平台,web服务器采用Tomcat + Nginx.之前没接触过nginx,这两天网上查资料,试了好多 ...
- CAS—改动默认登录页
1. 部署CAS-Server 本文以cas-server-3.4.11-release.zip为例.解压提取cas-server-3.4.11/modules/cas-server-webapp- ...
- 【试水CAS-4.0.3】第02节_CAS服务端登录页个性化
完整版见https://jadyer.github.io/2015/07/16/sso-cas-login-diy/ /** * @see ------------------------------ ...
- 前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
随机推荐
- 【LeetCode】188. Best Time to Buy and Sell Stock IV 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【剑指Offer】09. 用两个栈实现队列 解题报告（python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人微信公众号:负雪明烛 目录 题目描述 解题方法 一个栈用来保存输入,一个栈用来输出 日 ...
- 简单的 for 循环也会踩的坑
前言 最近实现某个业务时,需要读取数据然后再异步处理:在 Go 中实现起来自然就比较简单,伪代码如下: list := []*Demo{{"a"}, {"b"} ...
- ZOJ 3870：Team Formation（位运算&思维）
Team Formation Time Limit: 2 Seconds Memory Limit: 131072 KB For an upcoming programming contest, Ed ...
- kotlin+springboot+mybatis-puls+mysql搭建gradle-web工程
kotlin+springboot+mybatis-puls+mysql搭建web工程 前段时间研究了spring security及OAuth2系列之后,本来打算研究spring的,但是部门发生 ...
- [python]MergeTxt按列合并同一个文件下多个txt文件
开发需求:应项目需要,要将记录成txt的实验数据进行按列合并(也即为不同文件上下合并),从而进行机器学习训练. 实验数据类似如此 模拟验证数据 1.txt *****1***** abcdefghij ...
- 论文翻译：2020_ACOUSTIC ECHO CANCELLATION WITH THE DUAL-SIGNAL TRANSFORMATION LSTM NETWORK
论文地址:https://ieeexplore.ieee.org/abstract/document/9413510 基于双信号变换LSTM网络的回声消除 摘要 本文将双信号变换LSTM网络(DTLN ...
- MySQL基础操作指南
启动停止MySQL服务 1.Windows服务窗口启动:开始 → 运行 → services.msc → 找到MySQL 56服务 2.MySQL命令启动:开始 → 运行 → 管理员权限运行cmd → ...
- Java中的构造方法「注意事项」
构造方法是专门用来创建对象的方法,当我们通过关键字new来创建对象时,其实就是调用构造方法. 语法: public 类名称(参数类型 参数名称){ 方法体 } 注意事项: 构造方法的名称必须和所在的类 ...
- JDK中的BitMap实现之BitSet源码分析
前提 本文主要内容是分析JDK中的BitMap实现之java.util.BitSet的源码实现,基于JDK11编写,其他版本的JDK不一定合适. 文中的图比特低位实际应该是在右边,但是为了提高阅读体验 ...