目录
前言
一、网页制作概述
二、登录页面
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 部分提供了样式，包括背景颜色、边框、阴影和按钮的样式，使得登录表单看起来更加美观和用户友好。你可以根据需要调整这些样式。
-
通过以上步骤，你就可以创建一个基本的登录页面了。
四、页面效果图
