如何使用 HTML 和 CSS 写一个登录界面

作者：宇宙之一粟

2022 年 3 月 18 日
本文字数：1680 字
阅读完需：约 6 分钟

介绍

最近一直想利用写个 Go Web 项目，但苦于自己一直没有前端知识，所以想也从小白的角度（其实也不算）来学习前端的那些知识，今天就来介绍一下 HTML 和 CSS 。

今天就来动手写一个登录界面，后期希望能配合 Echo 框架实现前后端打通。

HTML：Hyper Text Markup Language，超文本标记语言，可以说是创建网页最重要的标记语言，可以在网页中显示文本、图像、音频和视频。

CSS：Cascading Style Sheets，中文翻译为层叠样式表，用于定义网页的样式，修饰 HTML 文件，可以用来制作响应式网页，并用于样式及其格式规则，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 有三种引用方式：

内联 CSS，又称行内样式，就是把 CSS 样式直接放在代码行内的标签中，一般是写入标签的 style 属性中，直接了解，但可想而知这种方式也不容易修改。
内部 CSS，也是在 style 标签中书写 CSS 代码，但此时的 style 标签写在 head 标签中
外部 CSS，将 CSS 代码写好保存在 .css 的样式表中，然后通过 HTML 文件引入，通常有两种引用方式：链接式和导入式。

关于 HTML 和 CSS 的简要介绍就到此结束了，接下来我们看如何写一个界面：

新建一个登录界面

在本地新建一个 login.html 的本地文件，然后通过 VS code 打开，写入如下代码：

<!DOCTYPE html><html>    <head>        <title>Login Form</title>    </head>    <body>        <h2>登录界面</h2><br>        <div class="login">            <form id="login" method="get">                <label><b>用户名:</b></label>                <input type="text" name="Uname" id="Uname" maxlength="100" placeholder="Enter Username or Email">                <br><br>                <label><b>密码：</b></label>                <input type="Password" name="Pass" id="Pass" placeholder="Enter your Password">                <br><br>                <input type="button" name="log" id="log" value="登录">                <br><br>                <input type="checkbox" id="check">                <span>记住我</span>                <br><br>                忘记密码？ <a href="#">点此处</a>            </form>        </div>    </body></html>

复制代码

然后通过浏览器打开，可以看到如下图的界面：

但是这个界面真的很不美观，此时 CSS 样式就能派上用场了。

新建 CSS 文件

这里我们通过外部 CSS 的方式来美化我们的登录界面。在 login.html 同级目录下新建一个名为 css 的文件夹，然后新建一个 style.css 的文件，写入如下代码：

body{    margin: 0;    padding: 0;    background-color: #4983f0ba;    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}.login{    width: 382px;    overflow: hidden;    margin: auto;    margin: 20 0 0 450px;    padding: 80px;    background: #438175;    border-radius: 16px;}h2{    text-align: center;    color: #277582    padding: 20px;}label{    color: #30e682;    font-size: 17px;}#Uname{    width: 300px;    height: 30px;    border: none;    border-radius: 4px;    padding-left: 8px;}#Pass{    width: 300px;    height: 30px;    border: none;    border-radius: 4px;    padding-left: 8px;}#log{    width: 300px;    height: 30px;    border: none;    border-radius: 20px;    padding-left: 7px;    color: blue;}span{    color: white;    font-size: 17px;}a{    font-size: 16px;    background-color: rgb(248, 245, 245);}

复制代码

然后在 login.html 文件的 head 标签中导入我们的 CSS 文件：

<head>    <title>Login Form</title>    <link rel="stylesheet" type="text/css" href="css/style.css"></head>

复制代码

最终呈现的效果如下;

总结

界面有点简陋，但也算是完成了入门写一个登录界面，希望各位前端大佬们多多指点，接下来就是该考虑如何用 Go 代码与这个界面交互了。下一篇文章见！

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/7e6fc37c6d1953809a25183db】。

宇宙之一粟

关注

宇宙古今无有穷期，一生不过须臾，当思奋争 2020.05.07 加入

🏆InfoQ写作平台-第二季签约作者 🏆 混迹于江湖，江湖却没有我的影子热爱技术，专注于后端全栈，轻易不换岗拒绝内卷，工作于软件工程师，弹性不加班热衷分享，执着于阅读写作，佛系不水文

发布

暂无评论

创作场景

如何使用 HTML 和 CSS 写一个登录界面

介绍

新建一个登录界面

新建 CSS 文件

总结

宇宙之一粟

评论