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

举报
宇宙之一粟 发表于 2022/03/18 22:18:45 2022/03/18
【摘要】 介绍最近一直想利用写个 Go Web 项目,但苦于自己一直没有前端知识,所以想也从小白的角度(其实也不算)来学习前端的那些知识,今天就来介绍一下 HTML 和 CSS 。今天就来动手写一个登录界面,后期希望能配合 Echo 框架实现前后端打通。HTML:Hyper Text Markup Language,超文本标记语言,可以说是创建网页最重要的标记语言,可以在网页中显示文本、图像、音频和视...

介绍

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200