HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！

原创已于 2024-04-14 00:44:25 修改 · 5.8k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #css #前端 #javascript

于 2023-01-30 22:54:00 首次发布

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文提供了四种不同的登录注册页面设计方案，包括简单的登录表单、带有社交登录选项的界面、以及使用了动态效果的复杂布局。每种方案都展示了不同的设计思路和技术实现细节。

代码1

<body>
	<div class="box">
		<div class="content">
			<div class="login-warpper">
				<h1>登录</h1>
				<div class="login-from">
					<div class="phone">
						<span class="span-phone">使用账号或者手机号</span>
						<input type="text" class="input-phone">
					</div>
					<div class="password phone">
						<span class="span-password span-phone">密码</span>
						<div class="input-item">
							<input type="password" class="input-password input-phone">
							<span class="icon"><img src="./asset/Login&register1/眼睛-闭眼.png" alt="" id="img"></span>
						</div>
					</div>
					<button class="login-btn">登 录</button>
				</div>
				<div class="divider">
					<span class="line"></span>
					<span class="divider-text">其他方式登录</span>
					<span class="line"></span>
				</div>
				<div class="other-login">
					<div class="other-login-qq">
						<img src="./asset/Login&register1/QQ.png" alt="">
					</div>
					<div class="other-login-vx">
						<img src="./asset/Login&register1/WeChat.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>

代码2

<body>
	<div class="box">
		<div class="content">
			<div class="login">
				<div class="mask">
					<div class="login-content">
						<h2>登录</h2>
						<span class="span-content">欢迎来到登录界面，您可以通过这个界面登录，也可以通过其他方式实现登录</span>
						<div class="logo">
							<img src="./asset/Login&register2/QQ.png" alt="">
							<span>使用QQ登录</span>
						</div>
						<div class="input-content">
							<input type="text" placeholder="账号:">
							<input type="password" placeholder="密码:">
						</div>
						<button class="login-btn">登录</button>
						<div class="other-tips">
							<span class="other-span">还没有账号？</span>
							<span class="blue">注册</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

代码3

<body>
	<div class="content">
		<div class="title">登录</div>
		<input type="text" placeholder="账号">
		<input type="password" placeholder="密码">
		<button class="btn">Login</button>
		<span>没有账号?<a href="#">注册</a></span>
	</div>

	<div class="square">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="circle">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</body>

代码4

<body>
	<div class="content right-panel-active">
		<div class="content-singUp content-from">
			<!-- 注册 -->
			<form action="javascript:;" class="form" id="form1">
				<h2 class="from-title from-title1">注&nbsp;册</h2>
				<input type="text" placeholder="账号:" class="input">
				<input type="email" placeholder="邮箱:" class="input">
				<div class="input-item">
					<input type="password" class="input input0" placeholder="密码:">
					<span class="icon icon0"><img src="./asset/Login&register1/眼睛-闭眼.png" alt="" id="img0"></span>
				</div>
				<div class="input-item">
					<input type="password" class="input input1" placeholder="确认密码:"> 
					<span class="icon icon1"><img src="./asset/Login&register1/眼睛-闭眼.png" alt="" id="img1"></span>
				</div>
				<button class="btn">注册</button>
			</form>
		</div>

		<!-- 登录 -->
		<div class="content-login content-from">
			<form action="javascript:;" id="form2" class="form">
				<h2 class="from-title">登&nbsp;录</h2>
				<input type="text" placeholder="用户名" class="input">
				<div class="input-item">
					<input type="password" class="input2 input" placeholder="密  码">
					<span class="icon2 icon"><img src="./asset/Login3/眼睛-闭眼.png" alt="" id="img2"></span>
				</div>
				<a href="#" class="link">找回密码</a>
				<button class="btn">登录</button>
			</form>
		</div>

		<div class="container_overlay">
			<div class="overlay">
				<div class="overlay_panel overlay--left">
					<button class="btn" id="signIn">Sign In</button>
				</div>
				<div class="overlay_panel overlay--right">
					<button class="btn" id="signUp">Sign Up</button>
				</div>
			</div>
		</div>
	</div>

需要代码的小伙伴可以在评论区拿哦！！！

https://github.com/lemons11/login_registry