基于Bootstrap 的网页html css 登录页制作成品

A_aspectJ项目开发

已于 2025-05-18 09:37:26 修改

阅读量967

点赞数 27

分类专栏： Bootstrap V4学习入门教程文章标签： html css bootstrap 前端

于 2025-05-18 09:29:22 首次发布

本文链接：https://blog.csdn.net/A_aspectJ/article/details/147997358

版权

Bootstrap V4学习入门教程专栏收录该内容

29 篇文章

订阅专栏

前言

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