介绍
最近一直想利用写个 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 代码与这个界面交互了。下一篇文章见！
