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

必备工具：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" /><linkhref="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源文件中，对字体颜色，输入框样式，输入框边距等进行设计。