直接上代码

<!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>

效果展示如图

![image](https://img20

html+css+js（登录页）的更多相关文章

  1. SSM登录跳转到登录页，登录页不能加载js和样式

    SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...

  2. JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...

  3. #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 ...

  4. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  5. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

  6. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  7. Windows下Tomcat+nginx配置证书实现登录页https访问

    最近公司出于安全考虑,需要将登录页做成https访问,其他页面仍采用http访问,环境是Linux平台,web服务器采用Tomcat + Nginx.之前没接触过nginx,这两天网上查资料,试了好多 ...

  8. CAS—改动默认登录页

    1.  部署CAS-Server 本文以cas-server-3.4.11-release.zip为例.解压提取cas-server-3.4.11/modules/cas-server-webapp- ...

  9. 【试水CAS-4.0.3】第02节_CAS服务端登录页个性化

    完整版见https://jadyer.github.io/2015/07/16/sso-cas-login-diy/ /** * @see ------------------------------ ...

  10. 前端小白页面开发注意事项及小工具（html\css\js）

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

随机推荐

  1. AQS的原理及源码分析

    AQS是什么 AQS= volatile修饰的state变量(同步状态) +FIFO队列(CLH改善版的虚拟双向队列,用于阻塞等待唤醒机制) 队列里维护的Node节点主要包含:等待状态waitStat ...

  2. 【LeetCode】975. Odd Even Jump 解题报告（C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetc ...

  3. 【LeetCode】649. Dota2 Senate 解题报告（Python）

    [LeetCode]649. Dota2 Senate 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地 ...

  4. 【LeetCode】650. 2 Keys Keyboard 只有两个键的键盘（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 素数分解 日期 题目地址:https://le ...

  5. 小小明系列故事——游戏的烦恼(hdu 4517)

    小小明系列故事--游戏的烦恼 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)To ...

  6. 1087 - Diablo

      1087 - Diablo    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 64 MB All of ...

  7. Git从远程仓库克隆

    首先,登陆GitHub,创建一个新的仓库,名字叫gitskills 勾选Initialize this repository with a README,这样GitHub会自动为我们创建一个READM ...

  8. Kernel PCA for Novelty Detection

    目录 引 主要内容 的选择 数值实验 矩形框 spiral 代码 Hoffmann H. Kernel PCA for novelty detection[J]. Pattern Recognitio ...

  9. Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】

    全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...

  10. Mysql 8.0版本以上和8.0以下jar包版本 需要注意的 URL连接参数useSSL、serverTimezone 相关问题

    在语法上的需要注意的: MySQL 8.0 以下版本 - JDBC 驱动名及数据库 URL static final String JDBC_DRIVER = "com.mysql.jdbc ...