目录
前言
一、网页制作概述
二、登录页面
2.1 HTML内容
2.2 CSS样式
三、技术说明书
四、页面效果图
前言
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，由Twitter的设计师Mark Otto和Jacob Thornton合作开发。
它基于HTML、CSS和JavaScript，旨在通过提供一系列预定义的CSS类、JavaScript插件和HTML模板，简化Web开发过程，使开发者能够快速创建美观且功能丰富的网页。
如果你只是需要使用 Bootstrap 的预编译 CSS 或 JS 文件，你可以直接使用 BootCDN 提供的免费 CDN 加速服务。
CSS文件
<!-- CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">JS文件
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
一、网页制作概述
HTML代码构成了网页的基础结构。编写HTML时，应关注语义化标签、链接和图像、表格和列表的使用，以创建清晰、易于导航的网页。
HTML完成后，使用CSS添加风格和色彩。CSS影响网页的外观和格式，包括颜色、字体和布局。选择合适的颜色、字体和布局，可以提升网页的吸引力。
最后一步是添加交互效果和动态功能，如动画、表单验证和交互反馈，以增强用户体验。
创建一个登录页面通常涉及HTML和CSS的基本知识。下面是一个简单的登录页面的示例，包括了基本的HTML结构以及一些CSS样式来美化页面。
二、登录页面
2.1 HTML内容
首先，我们创建一个基本的HTML结构。在你的HTML文件中，你可以这样写：
<!doctype html>
<html lang="en">
<head>
<!--设置编码-->
<meta charset="utf-8">
<!--添加页面视口-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Template · Bootstrap v4.6</title>
<!-- Bootstrap core CSS -->
<link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="/login" method="post">
<img class="mb-4" src="./assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">欢迎登录</h1>
<label for="inputEmail" class="sr-only">邮箱地址</label>
<input type="email" id="inputEmail" class="form-control" placeholder="请输入邮箱地址" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" id="remember" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登 录</button>
<nav class="navbar fixed-bottom navbar-light bg-light justify-content-center">
<p class="mt-5 mb-3 text-muted">Copyright © 2019-2024</p>
</nav>
</form>
</body>
</html>
2.2 CSS样式
接下来，我们添加一些CSS来美化这个登录页面。在一个css目录下创建一个名为styles.css的文件，并添加以下内容：
html,body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
三、技术说明书
登录页面主要应用了web前端2个模块的技术HTML + CSS
HTML模块
主要针对页面的结构搭建，使用了Bootstrap样式，比如添加按钮样式，还有输入框和选择框的样式；该页面整体采用的是form表单样式作为主要元素加上clsss属性，其中包含:
表单标签form
段落标签 p
字体标签 h1
Bootstrap的图标等。
另外，还有输入框的自带表单验证功能：
CSS模块
主要采用的是浮动式布局的方式，页面搭建主要通过设置form登录表单的clss属性来确定每个元素的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。
综上所述
-
HTML 部分定义了登录表单的结构，包括用户名和密码输入框以及一个提交按钮。表单的
action属性设置为/login，这通常是服务器端处理登录请求的URL。你可以根据实际情况修改这个值。method属性设置为post，这是处理登录信息时的标准方法。 -
CSS 部分提供了样式，包括背景颜色、边框、阴影和按钮的样式，使得登录表单看起来更加美观和用户友好。你可以根据需要调整这些样式。
-
通过以上步骤，你就可以创建一个基本的登录页面了。
四、页面效果图
![NSSCTF [GFCTF 2021]where_is_shell](https://i-blog.csdnimg.cn/img_convert/fb49579b1b1044154fc155bb546e16cb.png)
