使用 CSS 的仿 GitHub 登录页面

简介: 使用 CSS 的仿 GitHub 登录页面

✨ 项目基本结构


目录结构如下:

├── css
│   └── style.css
└── index.html

本节教程我会带大家使用 HTML 和 CSS 来制作一个仿 GitHub 的登录界面。GitHub 是开发者的乐园,作为一个开发者应该多去逛一逛。

本节示例将会实现如下所示的效果:

image.png

正如同学们在上面看到的,这个设计跟 GitHub 的登录表单非常像。首先是一个图标,然后是一个标题,接着是一个包含用于输入用户名和密码的框。最后,有一个小盒子可以创建一个新帐户。

下面让我们一起来实现吧!

知识点

  • list-style 属性
  • text-decoration 属性
  • outline 属性
  • display 属性
  • box-shadow 属性
  • border 属性
  • cursor 属性
  • 伪类选择器

登录表单的基本结构

首先还是跟往常一样新建一个 HTML 页面,在文件中输入英文 !,然后按 tab 键生成模板,我们在文件中添加一对 div 标签作为登录表单的容器:

<div class="wrapper"></div>

我们使用以下 CSS 作为网页初始代码,这里将背景颜色设为白色。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  outline: none;
  font-family: "Open Sans", sans-serif;
}
body {
  font-size: 14px;
  background-color: #f9f9f9;
}

然后,我们使用以下 CSS 代码创建此登录表单的主要区域。

这里我们设置最大宽度为 310px。外边距 margin 用于将表单放置在网页的中间。

.wrapper {
  max-width: 310px;
  width: 100%;
  height: auto;
  margin: 40px auto;
}

到这里其实只是准备阶段,现在我们预览的效果还是一片空白。


在登录页面添加徽标


接下来在 class="wrapper" 的 div 的最顶部添加一个图标。在这里使用了 GitHub 网站的 logo。

<div class="logo">
  <img
    src="https://labfile.oss.aliyuncs.com/courses/8605/github.png"
    alt="GitHub"
  />
</div>

然后给 logo 添加以下样式。

.wrapper .logo img {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 25px;
}

效果如下所示:

image.png

属性说明如下:

  • display:block 是将元素显示为块级元素。


添加标题


接下来我们在图片下方添加一个标题。

<div class="title">
  <p>Sign in to GitHub</p>
</div>

然后,设置标题的颜色为黑色,字体大小为 24px

.wrapper .title p {
  margin-bottom: 15px;
  font-size: 24px;
  text-align: center;
  color: #333;
}

效果如下所示:

image.png


登录表单


登录表单就是我们的输入框和按钮的显示区域。

首先我们创建两个输入框和一个登录按钮。第一个输入框用于输入邮箱地址,第二个输入框用于输入登录密码。

<div class="form">
  <div class="input_field">
    <label>Username or email address</label>
    <input type="text" class="input" />
  </div>
  <div class="input_field">
    <label>Password</label>
    <input type="password" class="input" />
    <a href="#" class="forgot">Forgot password?</a>
  </div>
  <div class="btn">
    <input type="submit" value="Sign in" class="sign_btn" />
  </div>
</div>

然后给背景和输入框添加样式。

.wrapper .form {
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid #d8dee2;
  border-radius: 5px;
  padding: 20px;
}
.wrapper .form .input_field {
  margin-bottom: 15px;
  position: relative;
}
.wrapper .form .input_field label {
  display: block;
  font-weight: 600;
  margin-bottom: 7px;
  color: #24292e;
}

效果如下所示:

image.png

属性说明如下:

  • border: 1px solid #d8dee2; 设置宽度为 1 个像素的白色实线边框,这种是 border 属性的简写。
  • border-radius: 5px; 设置表单为圆角,值越大,圆角的弧度越大。

我们再给输入区域添加一些样式。

.wrapper .form .input_field .input {
  width: 100%;
  background: #fff;
  border: 1px solid #d1d5da;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
  border-radius: 3px;
  color: #24292e;
  font-size: 16px;
  line-height: 20px;
  min-height: 34px;
  padding: 6px 8px;
}

属性说明如下:

box-shadow: inset 0 1px 2px rgba(27,31,35,.075); 给元素设置了阴影效果,使用 inset 关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。此时阴影会在边框之内,0 1px 2px 分别为 x 偏移量、y 偏移量和阴影模糊半径,rgba(27,31,35,.075) 为阴影颜色。

我们给 Forgot password 的文本,也添加一些样式。当你点击输入框时,box-shadow 和边框颜色会发生变化。

.wrapper .form .input_field a.forgot {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: #0366d6;
}
.wrapper .form .input_field .input:focus {
  border-color: #2188ff;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 2.5px rgba(3, 102, 214, 0.3);
}


设计登录按钮


登录按钮是没有固定的大小,它的大小取决于内容的数量。在这里我使用绿色作为背景色。

.wrapper .form .sign_btn {
  margin-top: 20px;
  background-color: #28a745;
  border: 1px solid rgba(27, 31, 35, 0.2);
  width: 100%;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 2px;
}
.wrapper .form .sign_btn:hover {
  background-color: #279f43;
}

鼠标放在按钮上背景颜色会改变,还会变成手形游标,效果如下图:

链接

image.png

属性说明如下:

  • cursor 属性规定要显示的光标的类型(形状),这里的 pointer 使光标呈现为指示链接的指针(一只手)、。
  • :hover 属于是伪类选择器,该选择器选择的是元素的状态,如鼠标悬停状态、点击状态、未访问状态、访问过状态等,其格式为 a:hover/active/link/visited{}


创建新帐户的选项


最后,我们来添加一个新账户的选项,在 class="form" 的 div 后面添加如下代码。如果你去看 GitHub 网站的登录表单,也会看到这个选项。

<div class="create_act">
  <p>New to GitHub? <a href="#">Create an account.</a></p>
</div>

我们设置一下它的样式。

.wrapper .create_act {
  border: 1px solid #d8dee2;
  border-radius: 5px;
  padding: 15px 20px;
  text-align: center;
  margin-bottom: 40px;
}
a {
  color: #0366d6;
}
.wrapper .create_act a:hover {
  text-decoration: underline;
}

到此,仿 GitHub 登录页面的效果就实现啦!


总结


希望通过上面的教程,大家已经学会了如何使用 HTML 和 CSS 代码来创建仿 GitHub 登录界面。同时我们也了解了 CSS 中一些常用属性,例如 outlinedisplaybordercursor,还认识了 CSS 中比较常用的伪类选择器。

同学们也动起手来做一个属于自己的登录界面吧!


目录
相关文章
|
6月前
|
前端开发
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
118 0
|
JavaScript
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
264 0
用HTML+CSS构建一个绚丽的登录页面
|
存储 前端开发
【大前端】用html和css写一个QQ邮箱登录页面
【大前端】用html和css写一个QQ邮箱登录页面
536 0
【大前端】用html和css写一个QQ邮箱登录页面
|
前端开发
HTMl+CSS 模仿京东网登录页面
HTMl+CSS 模仿京东网登录页面
426 0
HTMl+CSS 模仿京东网登录页面
|
1天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
29 0
[HTML、CSS]知识点
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5基础
H5+CSS3+JS逆向前置——HTML1、H5基础
21 0
|
16天前
|
前端开发 JavaScript UED
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
23 1
|
19天前
|
监控 前端开发 JavaScript
局域网远程管理软件的图形化界面设计(使用HTML/CSS)
在现代企业和组织中,局域网远程管理软件发挥着至关重要的作用。为了更好地实现对局域网内设备的远程管理,图形化界面设计显得尤为重要。本文将探讨如何使用HTML和CSS创建一种直观而功能强大的远程管理软件界面。
67 0