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 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
随机推荐
- C++使用C语言库函数创建文件夹
概述 本文演示环境: win10 + vs2017 头文件 #include <io.h> #include <direct.h> 函数 下面的函数,从左至右依次检查文件夹是否 ...
- c++11之日期和时间库
本文主要介绍 std::chrono日期和时间用法. 演示环境: vs2017 0.头文件 1 #include <chrono> 2 #include <thread>// ...
- 【LeetCode】310. Minimum Height Trees 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 相似题目 参考资料 日期 题目地址:http ...
- 【LeetCode】47. Permutations II 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:递归 方法二:回溯法 日期 题目地址:htt ...
- 【操作系统】编程模拟FIFO，LRU，NUR，OPT页面置换算法
#include<stdio.h> #include<stdlib.h> #include<time.h> #define random(x) (rand()%x) ...
- What Makes for Good Views for Contrastive Learning
目录 概 前 InfoMin Sweet Spot 空间距离 Color Spaces Frequency Separation 构建 novel views 无监督 半监督 Tian Y., Sun ...
- 编写Java程序，在一个文件夹内，查找占用磁盘空间最大的 jpg 文件，并输出文件大小
查看本章节 查看作业目录 需求说明: 在一个文件夹内,查找占用磁盘空间最大的 jpg 文件,并输出文件大小 实现思路: 创建ImageFileFilter类实现FilenameFilter接口,且重写 ...
- Exchange ProxyLogon漏洞分析
Exchange ProxyLogon漏洞分析 前言 续前文继续学习Exchange漏洞 Proxyshell 影响范围 Exchange Server 2019 < 15.02.0792.01 ...
- 使用docker-compose部署Kafka集群
之前写过Kafka集群的部署,不过那是基于宿主机的,地址:Kafka基础教程(二):Kafka安装 和Zookeeper一样,有时想简单的连接Kafka用一下,那就需要开好几台虚拟机,如果Zookee ...
- springboot 项目在idea 中不能起动，但是在eclipse中能起动
新建的springboot 项目,在idea中用main方法起动时出现如下 : 但是把项目导入到eclispe中却能正常运行,百思不其解,网上一通百度,有的说没有依赖springboot的web 启动 ...