开源一夏 | 使用 CSS 的仿 GitHub 登录页面
在线演示地址：https://haiyong.site/demo/github.html
码上掘金地址：https://code.juejin.cn/pen/7130522560411729934
源码也可在文末免费获取
✨ 项目基本结构
目录结构如下：
本节教程我会带大家使用 HTML 和 CSS 来制作一个仿 GitHub 的登录界面。GitHub 是开发者的乐园，作为一个开发者应该多去逛一逛。
本节示例将会实现如下所示的效果：
正如同学们在上面看到的，这个设计跟 GitHub 的登录表单非常像。首先是一个图标，然后是一个标题，接着是一个包含用于输入用户名和密码的框。最后，有一个小盒子可以创建一个新帐户。
下面让我们一起来实现吧！
知识点
list-style 属性
text-decoration 属性
outline 属性
display 属性
box-shadow 属性
border 属性
cursor 属性
伪类选择器
登录表单的基本结构
首先还是跟往常一样新建一个 HTML 页面，在文件中输入英文 !，然后按 tab 键生成模板，我们在文件中添加一对 div 标签作为登录表单的容器：
我们使用以下 CSS 作为网页初始代码，这里将背景颜色设为白色。
然后，我们使用以下 CSS 代码创建此登录表单的主要区域。
这里我们设置最大宽度为 310px。外边距 margin 用于将表单放置在网页的中间。
到这里其实只是准备阶段，现在我们预览的效果还是一片空白。
在登录页面添加徽标
接下来在 class="wrapper" 的 div 的最顶部添加一个图标。在这里使用了 GitHub 网站的 logo。
然后给 logo 添加以下样式。
效果如下所示：
属性说明如下：
display:block是将元素显示为块级元素。
添加标题
接下来我们在图片下方添加一个标题。
然后，设置标题的颜色为黑色，字体大小为 24px。
效果如下所示：
登录表单
登录表单就是我们的输入框和按钮的显示区域。
首先我们创建两个输入框和一个登录按钮。第一个输入框用于输入邮箱地址，第二个输入框用于输入登录密码。
然后给背景和输入框添加样式。
效果如下所示：
属性说明如下：
border: 1px solid #d8dee2;设置宽度为 1 个像素的白色实线边框，这种是border属性的简写。border-radius: 5px;设置表单为圆角，值越大，圆角的弧度越大。
我们再给输入区域添加一些样式。
属性说明如下：
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 和边框颜色会发生变化。
设计登录按钮
登录按钮是没有固定的大小，它的大小取决于内容的数量。在这里我使用绿色作为背景色。
鼠标放在按钮上背景颜色会改变，还会变成手形游标，效果如下图：
属性说明如下：
cursor属性规定要显示的光标的类型（形状），这里的pointer使光标呈现为指示链接的指针（一只手）、。:hover属于是伪类选择器，该选择器选择的是元素的状态，如鼠标悬停状态、点击状态、未访问状态、访问过状态等，其格式为a:hover/active/link/visited{}。
创建新帐户的选项
最后，我们来添加一个新账户的选项，在 class="form" 的 div 后面添加如下代码。如果你去看 GitHub 网站的登录表单，也会看到这个选项。
我们设置一下它的样式。
到此，仿 GitHub 登录页面的效果就实现啦！
📑 完整源码下载⬇
到此我们的仿 GitHub 登录页面就完成了，本实验的完整代码已上传，下载地址：
1.码上掘金地址：https://code.juejin.cn/pen/7130522560411729934
2.GitHub 地址（给个 star ❤️ 吧）：https://github.com/wanghao221/moyu
总结
希望通过上面的教程，大家已经学会了如何使用 HTML 和 CSS 代码来创建仿 GitHub 登录界面。同时我们也了解了 CSS 中一些常用属性，例如 outline、display、border 和 cursor，还认识了 CSS 中比较常用的伪类选择器。
同学们也动起手来做一个属于自己的登录界面吧！
版权声明: 本文为 InfoQ 作者【海拥(haiyong.site)】的原创文章。
原文链接:【http://xie.infoq.cn/article/766de6877f657e8fba192a945】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
公众号：海拥 2021.11.29 加入
【个人网站】haiyong.site 【联系方式】微信：wh18363 【软件技能】前端，Java，Python 【个人称号】InfoQ 写作社区签约作者，华为云享专家，CSDN原力作者，全栈领域优质创作者，掘金2021年度人气作者No.21
评论