用CSS编写登陆页面（含源代码）

最新推荐文章于 2024-04-11 01:57:03 发布

酷的没边

最新推荐文章于 2024-04-11 01:57:03 发布

阅读量7.5k

点赞数 7

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_45802744/article/details/108189057

版权

这篇博客介绍了如何使用CSS来编写一个登录页面。首先，作者构建了基础的HTML结构，接着引入了CSS特效包的font文件夹。文章提供了云盘链接以下载相关资源，包括CSS代码和JS文件夹，其中包含了js逻辑层和嵌入资源的JavaScript代码。通过这些步骤，读者可以实现具有特定背景的登录页面效果。

摘要由CSDN通过智能技术生成

编写基本的HTML，结果如左上角所示：

<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>

<link rel="stylesheet" href="css/font/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="materialContainer">
	<div class="box">
		<div class="title">登录</div>
		<div class="input">
			<label for="name">用户名</label>
			<input type="text" name="name" id="name">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="pass">密码</label>
			<input type="password" name="pass" id="pass">
			<span class="spin"></span>
		</div>
		<div class="button login">
			<button>
				<span>登录</span>
				<i class="fa fa-check"></i>
			</button>
		</div>
		<a href="javascript:" class="pass-forgot">忘记密码？</a>
	</div>

	<div class="overbox">
		<div class="material-button alt-2">
			<span class="shape"></span>
		</div>
		<div class="title">注册</div>
		<div class="input">
			<label for="regname">用户名</label>
			<input type="text" name="regname" id="regname">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="regpass">密码</label>
			<input type="password" name="regpass" id="regpass">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="reregpass">确认密码</label>
			<input type="password" name="reregpass" id="reregpass">
			<span class="spin"></span>
		</div>
		<div class="button">
			<button>
				<span>注册</span>
			</button>
		</div>
	</div>

</div>

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

</body>
</html>