前端入门：极简登录网页的制作（未使用JavaScript制作互动逻辑）

news2024/10/6 2:30:41

必备工具：vscode

Visual Studio Code - Code Editing. Redefined

前言

准备

HTML源文件的编写（构建）

head部分

body部分

网页背景设置

网页主体构建

CSS源文件的编写（设计）

结果展示

前言

博主稍稍自学了一点前端三件套（在这儿前端入门（认识HTML，CSS，JavaScript三件套）-CSDN博客）（准确来说本篇博客就用了两件），想着搞个页面来练练手，于是就来做一个极简的登陆页面吧。

准备

1.在自己想要的路径下新建一个web-site文件夹：

2.在web-site文件夹中新建以下文件及文件夹

login.html（HTML源文件，用于构建网页）
styles（文件夹，主要存放CSS源文件）
images（文件夹，主要存放网页中使用到的图片等资源）
scripts（文件夹，主要存放JavaScript源文件）虽然这次不用，不过是个习惯

3.在styles文件夹中新建login.css文件。

HTML源文件的编写（构建）

head部分

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" /> <!--网页使用utf-8编码-->
    <meta name="viewport" content="width=device-width" />
    <title>登录</title> <!--页面标题，在浏览器标签页展示-->
    <link href="styles/login.css" rel="stylesheet" />
    <link
  href="https://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet" />
  </head>

HTML的head部分一般为用户不可见的（title可见），主要做一些声明和预备工作。

utf-8编码

UTF-8（Unicode Transformation Format-8）是一种用于表示 Unicode 字符的编码方案之一。Unicode 是一种字符集，包含了世界上几乎所有的文字和符号。UTF-8 是一种变长字符编码方式，可以用来表示 Unicode 中的字符，其特点是对英文使用较小的存储空间，对中文等其他字符也提供了兼容支持。

在 UTF-8 编码中，每个 Unicode 字符被编码成 1 到 4 个字节的序列。具体地，ASCII 码的字符（U+0000 到 U+007F）编码成一个字节，而其他 Unicode 字符则根据其码点范围以不同的字节长度编码。这种设计使得 UTF-8 具有向后兼容性，因为它能够处理传统的 ASCII 码，并且支持大多数现代应用中使用的字符。

UTF-8 在计算机中广泛应用于文本文件、网络通信以及各种软件中，因为它提供了一种灵活且高效的方式来处理各种语言和符号。

body部分

body部分是用户可见的主要部分。

网页背景设置

<body style="background-image: url(images/login-background.png); 
  background-size: 100% ;
  background-attachment: fixed;" > <!--调用style中的background-image给出图片的路径，通过设置size为100%，设置图片为填充，来设置网页背景-->

注意路径后需要给出图片的完整名称（可自行重命名图片），我们用一张美丽的图片来作背景（崩铁，启动！）
把这张图片存放于images文件夹下，将其重命名为“login-background”(格式为.png)，随后即可按上述代码调用。

网页主体构建

 <body>
    <div class="title">
        <h1>登录</h1>
    </div>

    <div class="login"> <!--用div框出元素，利用class定义伪类，便于CSS整体操作-->
        <div style="text-align: center;">
            <label for="count">账户</label>
            <br>
        </div>

        <div style="text-align: center;vertical-align:middle;">
            <input type="text" id="count" count="count" required minlength="15" maxlength="15" size="20">
            <br>
        </div>
        
        <div style="text-align: center;">
            <label for="passworld">密码</label>
            <br>
        </div>    

        <div style="text-align: center;vertical-align: middle;">
            <input type="text" id="passworld" passworld="passworld" required minlength="6" maxlength="6">
            <br>
        </div>    

        <div class="login_button" style="text-align: center;">
            <button onclick="location.href='main.html'">登录</button>
        </div>
    </div>
  </body>

在body部分设置各类文字，输入框，按钮等。

CSS源文件的编写（设计）

html {
font-size: 20px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}

h1{
    font-size: 60px;
    text-align: center; /*垂直居中对齐*/
}

.login{
    /*设置边框样式*/
    border-style:inset ; 
    border-radius:30px ;
    border-width: thick;
    /*设置边框颜色*/
    border-color:color(from color srgb r g b) ;
    /*设置边距*/
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 10%;
    /*用颜色填充边框背景*/
    background-color:gray;
}

.title{
    /*设置标题颜色*/
    color:cornsilk ;
}

在CSS源文件中，对字体颜色，输入框样式，输入框边距等进行设计。