漂亮的登录界面中的css示意图

最新推荐文章于 2024-06-19 13:45:29 发布
最新推荐文章于 2024-06-19 13:45:29 发布
阅读量1.9k 收藏 10
点赞数 2
分类专栏： web开发 文章标签： css html 登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winniezhang/article/details/102899447
版权

效果图：

示意图：

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div class="login-Box">
		<img id="user-icon" src="./images/user.png" alt="">
	    <h3>登录</h4>
		<form action="">
			<p>姓名</p>
			<input type="text" id="name" placeholder="请输入姓名">
			<p>密码</p>
			<input type="password" id="password" placeholder="请输入密码">
			<input type="submit" value="提交">
			<a href="#">忘记密码</a>
		</form>
	</div>	

</body>
</html>

css:

body
{
	margin: 0;
	padding: 0;
	background: url(./images/bg.jpg);
	background-size: cover;
	font-family: sans-serif;
}
.login-Box
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 350px;
	height: 420px;
	padding: 80px 40px;
	box-sizing: border-box;
	background: rgba(0,0,0,.5);
}
#user-icon
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	/*overflow: hidden;*/
	position: absolute;
	top: calc(-100px/2);
	left: calc(50% - 50px);
}
h3
{
	margin: 0;
	padding: 0 0 20px;
	color: #efed40;
	text-align: center;
}
.login-Box p
{
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
}
.login-Box input
{
	width: 100%;
	margin-bottom: 20px;
}
.login-Box input[type="text"],
.login-Box input[type="password"]
{
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 16px;
}
::placeholder
{
	color: rgba(255,255,255,0.52);
}
.login-Box input[type="submit"]
{
	border: none;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 16px;
	background: #ff267e;
	cursor: pointer;
	border-radius: 20px;
}
.login-Box input[type="submit"]:hover
{
	background: #efed40;
	color: #262626;
}
.login-Box a
{
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

 

winfredzhang
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
01-19 1459
今天花了几个小时的时间整理了一些响应式网站模板，代码下载方式放在了文章末尾，有什么问题可以私信我或者评论区留言。
[强烈推荐]-非常好用的界面示意图设计工具-Balsamiq Mockup 附序列号
03-13
1、控件丰富，Mockup包含了丰富的控件，除了标准的窗口控件外，还有日历、柱状图、饼图等控件，能够满足绝大部分应用的界面要求 2、操纵简单，定义一个菜单、或者一个表格的内容，都是直接采用文本定义，非常方便。例如选择一个Tabs Bar，输入文字就能得到下列效果。注意，必须选择“Use System Fonts”才能够显示中文。 3、能够指定界面逻辑。例如点击某个菜单项后，自动跳到另外一个界面。 4、更多的控件。Mockups还可以自定义控件，可以在MockupsToGo.net网站看到并使用很多别人创建的控件。例如现在开发手机应用很热门，Mockups本身自带了iPhone的界面，也有人做了其他手机的界面控件 5、Mockups的界面画好后，保存的格式为XML，这一点很重要。因为开发团队可以将Mockups文件进行版本管理（Version Control），方便在团队之间协作共享。
登录页面一些有趣的css效果，太好看了！
最新发布
2401_83384536的博客
06-19 1038
今天无意看到一个登录页，input框focus时上移变成label的效果，无聊没事干就想着自己来实现一下，登录页面能做文章的，普遍的就是按钮动画，title的动画，以及input的动画，这是最终的效果图（如下）， 同时附上预览页[1]以及实现源码[2]。
原来CSS也能写出这么漂亮的登录页面，分享一个纯CSS样式Login页面
didiplus
04-10 1万+
以前在学习网页设计的时候，没有很深入了解CSS样式，今天通过观看一个视频，发现原来CSS也能写出很美的登录页面。
一个漂亮的登陆页面(无图片 只有一个CSS实现的)
GreetTuring的博客
05-03 1223
1.登陆主页   登录页面 用户登录                                     登录              ${information } //login.css @CHARSET "UTF-8"; /* Author:
登录页面一些有趣的css效果
hyacinthyyy的博客
11-10 153
今天无意看到一个登录页，input框focus时上移变成label的效果，无聊没事干就想着自己来实现一下，登录页面能做文章的，普遍的就是按钮动画，title的动画，以及input的动画，这是最终的效果图（如下）， 同时附上以及。
部分css样式----login.css
weixin_33892359的博客
03-11 379
/* *创建人：李要南 */ * { margin: 0; /*把默认值都设为0*/ padding: 0; } body { font-size: 14px; /*文本字体大小*/ } a:link, a:visited { /*鼠标未移上去和访问后的超链接样式*/ color: #000; /*文字颜色*/ t...
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
Css漂亮的登陆界面
05-29
Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面Css漂亮的登陆界面
星空登陆界面html+CSS框架
11-13
"星空登陆界面html+CSS框架"是一个项目，旨在创建一个以星空为主题的登录界面，利用这两门语言的优势，为用户提供美观且功能齐全的登录体验。下面我们将深入探讨这个项目所涉及的关键知识点。 首先，HTML...
漂亮的深蓝色登陆界面 +.rar
04-08
标题中的“漂亮的深蓝色登陆界面”指的是一个设计精美的登录页面，通常用于网站或应用程序的初始访问阶段。这种登录界面采用深蓝色为主色调，旨在提供一种专业且吸引人的视觉体验，深蓝色通常传达出信任、稳重和高端...
CSS用户登录login页面html模板
12-04
CSS用户登录login页面html模板
酷炫PC端登录页面模板
06-17
超级炫酷的登录界面，带有前端验证，用到了js，css和jquery，背景带有动画效果，随着鼠标的移动会有不同的效果
非常好好看的几个登录页面（html，css）
12-09
非常好好看的几个登录页面（html，css）
登录界面
weixin_44544845的博客
05-02 1941
往往一个项目中不乏缺少一个登录界面，而登陆页面是最基础的，下面是登录界面要实现的效果。 2、在完成一个登录界面前，首先要先写出验证码的登录，一个验证码的验证都验证不了，何来的用户名和密码的验证，所以，首先得验证出来验证码。在写验证时，需要引用一个ValidCodeUtils的类来用。验证码的四个步骤： <1>生成长度为随机的验证码字符串 <2>根据生成...
登录login页面--css效果
热门推荐
weixin_52347768的博客
03-29 1万+
效果如下 声明：图片与图标来源均来源于堆糖与iconfont阿里巴巴矢量图标库 将图片放置到images中 框架如下 login.html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" href="...
HTML用户登录页面里面login.css代码
weixin_30664539的博客
12-09 479
#f1{ width: 300px; text-align:center; } div{ margin: 10px 0px; } 转载于:https://www.cnblogs.com/liuzhuqing/archive/2010/12/09/7481263.html
CSS样式实例---登录界面
韬光养晦
01-16 1882
CSS样式实例—登录界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; ...
网页设计中如何制作一个邮箱登陆界面，带有免密登陆功能，重置密码选项
06-09
制作一个邮箱登录界面通常需要以下步骤： 1. 设计界面布局：确定登录表单的样式、布局和元素。通常包括邮箱地址输入框、密码输入框、登录按钮、记住密码选项框、忘记密码链接等。 2. 编写HTML代码：根据设计的界面布局，使用HTML语言编写代码，将各个元素组合在一起。 3. 编写CSS样式：使用CSS样式对HTML代码进行美化，让界面更加美观、易于使用。 4. 编写JavaScript代码：实现登录逻辑，包括验证用户输入的邮箱地址和密码是否正确，实现记住密码功能，以及提供重置密码的选项等。 5. 连接后端服务：将前端界面与后端服务连接起来，实现用户登录功能。可以使用后端语言（如PHP、Python等）编写相应的逻辑代码，与数据库进行交互，验证用户输入的邮箱地址和密码，实现免密登录和重置密码等功能。 总之，在制作邮箱登录界面时，需要充分考虑用户体验和安全性，确保界面简洁易用，同时防止用户信息泄露和恶意攻击。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值