HTML+CSS 实现一个简单的登录页面 （背景图片完全适应 不失帧）

最新推荐文章于 2024-05-31 11:20:07 发布
最新推荐文章于 2024-05-31 11:20:07 发布
阅读量3w 收藏 160
点赞数 45
分类专栏： 前端小练习 CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41325698/article/details/102591169
版权
CSS 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏
前端小练习
3 篇文章 1 订阅
订阅专栏

 

 

 

 

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="css/tx1.css" />
		
	</head>
	<body>

			<div class="login-box">
			<h2>Login</h2>
			<form>
				<div class="login-field">
					<input type="text" name="" required="" />
					<label>Username</label>
				</div>
				<div class="login-field">
					<input type="password" name="" required="" />
					<label >Password</label>
				</div>
				<button type="submit">Submit</button>
			</form>
		</div>

		
		 
	</body>
</html>

css：

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: url(../img/bg.jpg)  no-repeat center 0px;
	background-size: cover;

	

     background-position: center 0; 
     background-repeat: no-repeat;  
     background-attachment: fixed; 
      -webkit-background-size: cover;  
      -o-background-size: cover;  
      -moz-background-size: cover;  
      -ms-background-size: cover;
	
}
.login-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	padding:40px;
	background: rgba(0,0,0,.8);
	box-sizing: border-box;
	box-shadow: 0 15px  25px rgba(0,0,0,.5);
	border-radius: 10px;
}
.login-box h2{
	margin: 0 0 30px;
	padding: 0;
	text-align: center;
	color: #fff;
}
.login-box .login-field{
	position: relative;
}
.login-box .login-field  input{
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}
.login-box .login-field  label{
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 1px;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	transition: .5s;
}
.login-box .login-field input:focus ~ label,
.login-box .login-field input:valid ~ label{
	top: -23px;
	left: 0;
	color: aqua;
	font-size: 12px;
}
.login-box button{
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	background: #03a9f4;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
}

 

 

 

点点滴滴25
关注
  • 45
    点赞
  • 踩
  • 160
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
HTML简单的登录+背景页面
H20200201的博客
04-26 1071
HTML文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="426.css"> </head> <body> <video autoplay loop muted> <source src="movie.mp4" type="video/mp4" /> &
一个简单的登录注册页面html代码
weixin_55743273的博客
10-20 5万+
文章目录前言一、效果展示1.登录2.注册二、代码部分1.登录2.注册总结 前言 这一个简单的注册页面代码，适合初学者进行模仿和理解，这个代码仅限于两个页面的跳转，不包括数据处理 一、效果展示 1.登录 2.注册 二、代码部分 1.登录 代码如下（示例）： <style> * { padding: 0; margin: 0; box-sizing: border-box; } ..
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
HTML,CSS编写简单的登录注册界面
最新发布
weixin_57383920的博客
05-31 365
HTML,CSS编写简单的登录注册界面。
简单的HTML登录界面
热门推荐
mingzi1245的博客
05-10 9万+
1 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapc
简单的HTML登录界面（带源码）
宝子的博客
07-05 2万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
利用html制作一个简单的登陆页面
m0_73780812的博客
05-10 9013
一张图片放入image,图片名称bg.jpg。需要的一张图片，两段代码。index.html代码。style.css代码。
原来CSS也能写出这么漂亮的登录页面，分享一个纯CSS样式Login页面
didiplus
04-10 1万+
以前在学习网页设计的时候，没有很深入了解CSS样式，今天通过观看一个视频，发现原来CSS也能写出很美的登录页面。
HTML+CSS的简单使用（代码）
早安再见晚安舒服
04-11 5185
示例1 其中有图片或者视频的地方被我注释掉了，因为你们电脑不存在我这个HTML所需要的视频或者图片文件，但是大家可以添加自己的图片或者视频进去，其实主要还是希望大家看一下里面的细节操作，这都是很简单的对标签的使用，两个示例的图片我都放在后面展示，相关的CSS文件也附代码 html文件： <!DOCTYPE html> <html> <head> <tit...
一个很简单很简单的静态网页(附源代码）HTML+CSS
m0_61083409的博客
02-21 1077
【完整资源包下载】包含图片、音效等 如果想白嫖可以私信或者发邮件fzx2003zhixue@163.com 首先声明：代码中使用的爱心特效和转动的音符这个两个效果是我从网上找到的…具体在哪里找的我也忘了…用的图片是邦乔彦的插画~ 其他部分是自己写的 最后的效果如下 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>沙雕小星星</ti
HTML+CSS+ajax+php+mysql实现登录
09-30
在本项目中，"HTML+CSS+ajax+php+mysql实现登录"是一个综合性的Web开发教程，适合初学者。这个项目旨在教你如何构建一个完整的用户登录系统，涉及到前端界面设计、后端数据处理以及数据库交互等多个关键环节。下面将...
html+css+js科幻后台登录界面模板
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
html + css实现效果jsp登录界面模板.html
01-11
html + css实现效果jsp登录界面模板 源码
HTML登录页面
jakelihua
10-27 4万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
HTML/CSS设置网页背景
夏日漱石的博客
03-12 2万+
HTML/CSS设置网页背景
html+css制作简单注册登录页面
m0_67930426的博客
10-19 1万+
光标为手的形状，当光标指定这个div的时候，光标为手的形状。没有账号，去注册 忘记密码。前端页面要得到css的布局，就得在html页面里调用css文件。方框（请输入用户名）方框（请输入用户名）写完这一步，然后再去运行，是没有东西的，但是并不是不存在。例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色。如果不加，我们可以根据内容的多少，设计多少白色的部分。.b{ } 是针对注册两个字后面的白色部分进行布局。
HTML+CSS登录界面
tongai1的博客
05-06 4万+
今天学习了一个HTML+CSS登录界面 效果图如下： 背景图片可以选取自己喜欢的，以下是实现代码： login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet"...
html+css实现登录界面
李宸净
03-28 2951
【代码】html+css实现登录界面。
火影忍者网页设计html,html+css+js实现火影背景切换登录页面
05-30
好的，为了实现火影忍者的背景切换登录页面，我们需要用到HTML、CSS和JS。首先，我们需要准备好背景图片，这里我选择了几张火影忍者的图片。 接下来，我们可以开始编写代码了。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>火影忍者登录页面</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="bg-img"></div> <div class="container"> <form> <h1>火影忍者登录</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button type="submit">登录</button> </form> </div> </body> </html> ``` 我们在页面中添加了一个id为“bg-img”的div，用来显示背景图片。我们还添加了一个class为“container”的div，用来包含登录表单。 CSS代码： ```css body { margin: 0; padding: 0; background-color: #000; } #bg-img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center; animation: bg-slide 20s infinite; } @keyframes bg-slide { 0% { background-image: url("bg1.jpg"); } 25% { background-image: url("bg2.jpg"); } 50% { background-image: url("bg3.jpg"); } 75% { background-image: url("bg4.jpg"); } 100% { background-image: url("bg5.jpg"); } } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); padding: 30px; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } h1 { text-align: center; font-size: 32px; margin-bottom: 20px; } input { display: block; width: 100%; padding: 10px; margin-bottom: 20px; font-size: 16px; border: none; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } button { display: block; width: 100%; padding: 10px; background-color: #c9302c; color: #fff; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #a52725; } ``` 在CSS中，我们设置了背景图片的位置、大小和动画。我们使用了@keyframes来实现背景图片的切换，每25%的时间显示一张不同的图片。我们还设置了登录表单的样式，包括位置、颜色、边框和阴影等。 JS代码： ```javascript window.onload = function() { var bgImg = document.getElementById("bg-img"); var bgImgs = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg"]; var index = 0; setInterval(function() { index++; if (index == bgImgs.length) { index = 0; } bgImg.style.backgroundImage = "url(" + bgImgs[index] + ")"; }, 20000); } ``` 在JS中，我们使用了一个定时器来实现背景图片的切换。我们设置了一个数组来存储背景图片的路径，然后每隔20秒就切换一次背景图片。 最后，我们将HTML、CSS和JS保存到同一个文件夹中，然后我们就可以在浏览器中打开这个文件来查看火影忍者的背景切换登录页面了。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值