HTML+CSS网页设计，会员账号登录布局样式

家好，本篇文章分享会员账号登录的布局样式。

效果图：

会员账号登录布局样式

HTML代码：

<div class="tpt-1446">
<div class="tpt-wp">
<div class="tpt-left">
<img src="3.jpg">
</div>
<div class="tpt-right">
<div class="tpt-form">
<h3>账号登录</h3>
<p>用户登录成功后，该用户帐号和密码由用户负责保管，用户须保证登录信息的真实性、合法性、有效性。</p>
<form>
<input type="text" name="name" placeholder="登录账号" autocomplete="off">
<input type="password" name="password" placeholder="登录密码" autocomplete="off">
<p>使用<span> 账号登录</span>，即代表同意《用户登录协议》。</p>
<button>立即登录</button>
</form>
</div>
</div>
</div>
</div>

CSS代码分析：

使用flex水平垂直居中

.tpt-1446 {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh
}

使用flex布局，固定高度和宽度

.tpt-wp {
 display: flex;
 width: 900px;
 height: 600px
}

分为左右布局，左边配置图片，右边使用flex水平垂直居中

.tpt-left {
 width: 400px
}
.tpt-right {
 display: flex;
 align-items: center;
 justify-content: center;
 background: #fff;
 width: 500px
}

配置表单的标题简介的字体颜色，字体大小和行高

.tpt-form h3 {
 color: #79b8c1;
 font-size: 34px;
 line-height: 44px;
 font-weight: 400;
 margin-bottom: 20px
}
.tpt-form p {
 color: #999;
 font-size: 12px;
 line-height: 20px;
 margin-bottom: 20px
}

配置表单文本输入框的样式

.tpt-form input {
 box-sizing: border-box;
 width: 100%;
 height: 38px;
 line-height: 38px;
 padding: 0 10px;
 background: #fff;
 border: 1px solid #eee;
 color: #333;
 font-size: 14px;
 border-radius: 2px;
 margin-bottom: 20px
}

配置表单提交按钮的样式

.tpt-form button {
 width: 100%;
 height: 38px;
 line-height: 38px;
 background: #79b8c1;
 border: 0;
 color: #fff;
 font-size: 14px;
 border-radius: 2px;
 cursor: pointer
}

注：以上部分CSS代码只是帮助大家分析结构，是需要清除所有标签的默认样式。

有问题可以留言，大家一起学习HTML+CSS网页设计。

家好，今天给大家介绍一款，css3实现的登录页面，酷炫的登录和注册页面切换动画html前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

登录和注册酷炫切换，看起来非常专业，背景也很漂亮（图2）

图2

分辨率自适应（图3）

图3

源码完整，需要的朋友可以下载学习（图4）

图4

本源码编码：10182，需要的朋友，点击下面的链接后，搜索10182，即可获取。

就爱UI - 分享UI设计的点点滴滴

有内容均可进入摹客官网下载。

在当今流量成本越来越高的今天，注重每一个细节的整合才能够“黏”住用户。第一时间抓住用户的眼球，留住用户更多的时间进行后续的操作。正所谓先入门，后发展，让更多的人愿意参与进来，这对后期的良好运营其实有着举重如轻的作用。无论是社交网站还是在线时尚商店，首先引起客户关注的是登录页面，有着出色视觉效果的登录页可以快速抓住用户的好感，打造差异化、情感化、互动化等的登录界面才能让你的产品脱颖而出。

摹客，一直致力于为设计师提供各种丰富的设计资源和免费素材。这次也为大家精心整理了各种类型的登录页设计的案例，供大家参考和临摹。更有海量的设计资源和素材，免费打包下载，不要错过。

1. 弹出式登录页

弹出式登录页

设计师：ArcangeloFiore

一个全新的弹出式登录页面模板，可用于网站登录页设计。此登录页包括输入字段，第三方社交平台快速登录按钮以及以及一个蓝色的CTA，蓝色“登录”按钮以其极佳的视觉凸显而出。

2. 插画登录页

选择性登陆页

插画登录页

设计师：MahisaDyan Diptya

一款可爱的插图类型的登录页，巨大的登陆按钮非常突出；颜色，着色，排版使设计独特而清晰。

3. 选择性登录页

设计师：MahisaDyan Diptya

这是一款关于健康类型的App，登录页面提供了医生和患者的登录选项，用户可以根据自己自身情况选择登录。此登录页模板轻盈，干净，清爽。蓝色和白色的搭配提供极佳的用户体验，蓝色CTA也很突出。

4. Lovebirds网站登录设计

Lovebirds网站登录设计

设计师：Luke Peake

非常简洁和清爽的web登录页，专业的色彩搭配。空间分布均匀，左侧为动画效果展示，在登录CTA按钮的下方，用户可选择添加社交媒体登录和注册选项。

5. 研究生管理系统登录页设计

研究生管理系统登录页设计

设计师：Zoeyshen

关于研究生管理系统的登录页面，界面看起来十分美观和精致，与对比色相结合的字体选择为用户提供了最佳的可读性，颜色的搭配为界面注入了新鲜的活力，渐变的背景色与登录页完美融合于一体。

6. HOUSY

HOUSY

设计师：DivanRaj

简洁清新的外观设计，壮观的渐变色彩搭配，提供视觉上的享受。

7. Dipnet动画登录页

Dipnet动画登录页

设计师：RomanBystrytskyi

关于印刷厂应用程序Dipnet的登录页面设计展示，背景与主题结合在一起，动画背景非常引人注目。

8. 登录交互动画

登录交互动画

设计师：Shakuro

非常实用的登录页快速切换动画展示。作者通过一种简单的方法，将用户重定向到密码重置页面。

9. Ghostlamp登录页

Ghostlamp登录页

设计师：SourabhBarua

设计师分享了一种微妙而优雅的网页登录形式，作者为用户提供了两种登录选项：通过常规表单登录以及社交媒体平台的登录方式。登录表单简洁的外观归功于清新的浅色系，白色背景和清晰的字体突出了界面的美观感。

10. 电影网站的登录页面插图展示

电影网站的登录页面插图展示

设计师：Aliffajar

插图优雅精致，排版时尚独特，动画过渡十分顺畅，整体美观迷人，很具吸引力。

响应式登录页面模板免费下载

1. Key登录表单模板

Key登录表单模板