基于Bootstrap 的网页html css 登录页制作成品
目录
前言
一、网页制作概述
二、登录页面
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 部分提供了样式，包括背景颜色、边框、阴影和按钮的样式，使得登录表单看起来更加美观和用户友好。你可以根据需要调整这些样式。
-
通过以上步骤，你就可以创建一个基本的登录页面了。
四、页面效果图
相关文章：
基于Bootstrap 的网页html css 登录页制作成品
目录 前言 一、网页制作概述 二、登录页面 2.1 HTML内容 2.2 CSS样式 三、技术说明书 四、页面效果图 前言 Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，由Twitter的设计师Mark Otto和Jacob Thornton合作开发。 它基于HTML、CSS和JavaScri…...
python中http.cookiejar和http.cookie的区别
在Python中，http.cookiejar和http.cookie（通常指http.cookies模块）是两个不同的模块，它们的主要区别如下： 1. 功能定位 http.cookiejar 用于管理HTTP客户端的Cookie，提供自动化的Cookie存储、发送和接收功…...
【NLP 71、常见大模型的模型结构对比】
三到五年的深耕，足够让你成为一个你想成为的人 —— 25.5.8 模型名称位置编码Transformer结构多头机制Feed Forward层设计归一化层设计线性层偏置项激活函数训练数据规模及来源参数量应用场景侧重GPT-5 (OpenAI)RoPE动态相对编码混合专家架构（MoE&#…...
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
组件导航 (Navigation)flutter项目搭建 接上一章flutter项目的环境变量配置并运行flutter 上一章面熟了搭建flutter并用编辑器运行了ohos项目，这章主要是对项目的工程化改造 先创建flutter项目，再配置Navigation 1.在开发视图的resources/base/profi…...
HGDB企业版迁移到HGDB安全版
文章目录 环境文档用途详细信息 环境 系统平台：Linux x86-64 Red Hat Enterprise Linux 7 版本：4.5.8,6.0 文档用途 HGDB企业版数据库通过命令备份恢复，迁移到HGDB安全版中。 详细信息 1、环境介绍 1 IP 操作系统 cpux.x.65.10 …...
ProfibusDP主站转modbusTCP网关与ABB电机保护器数据交互
ProfibusDP主站转modbusTCP网关与ABB电机保护器数据交互 在工业自动化领域，Profibus DP（Process Field Bus）和Modbus TCP是两种常见的通讯协议，它们各自在不同的场合发挥着重要作用。然而，随着技术的发展和应用需求的…...
AM32电调学习解读六：main.c文件的函数介绍
最近在学习AM32电调的2.18版本的源码，我用的硬件是AT32F421，整理了部分流程处理，内容的颗粒度是按自己的需要整理的，发出来给有需要的人参考。按自己的理解整理的，技术能力有限，可能理解有误，欢…...
ubuntu24.04上安装NVIDIA driver+CUDA+cuDNN+Anaconda+Pytorch
一、NVIDIA driver 使用Ubuntu系统的：软件和更新——>附加驱动，安装NVIDIA驱动。 二、CUDA 安装命令：sudo apt install nvidia-cuda-toolkit 三、cuDNN cuDNN 9.10.0 Downloads | NVIDIA Developer 四、Anaconda Download Anaconda Di…...
 与 DBMS_STATS.GATHER_DATABASE_STATS_JOB_PROC (Oracle) 对比)
AutoVACUUM (PostgreSQL) 与 DBMS_STATS.GATHER_DATABASE_STATS_JOB_PROC (Oracle) 对比
AutoVACUUM (PostgreSQL) 与 DBMS_STATS.GATHER_DATABASE_STATS_JOB_PROC (Oracle) 对比 核心功能对比 特性PostgreSQL AutoVACUUMOracle GATHER_DATABASE_STATS_JOB_PROC主要目的空间回收 统计信息更新仅优化器统计信息收集底层机制MVCC(多版本并发控制)维护CBO(基于成本的…...
Rust中的交叉编译与vendered特性
Rust中的交叉编译与vendered特性 引言 Rust 作为一种现代系统编程语言，以其内存安全和并发性能著称。然而，当涉及到跨平台开发时，尤其是交叉编译，开发者往往会遇到各种依赖问题。vendored 特性作为 Cargo 生态系统中的一个重要工…...
3、函数和约束
# 提供的数据sql CREATE TABLE IF NOT EXISTS student(no BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT 学号,name VARCHAR(20) NOT NULL COMMENT 姓名,sex VARCHAR(2) DEFAULT 男 COMMENT 性别, age INT(3) DEFAULT 0 COMMENT 年龄,score DOUBLE(5,2) COMMENT 成绩…...
PhpStudy | PhpStudy 工具安装 —— Windows 系统安装 PhpStudy
🌟想了解这个工具的其它相关笔记？看看这个：[网安工具] 服务器环境配置工具 —— PhpStudy 使用手册 笔者备注：Windows 中安装 PhpStudy 属于傻瓜式安装，本文只是为了体系完善而发。 在前面的章节中，笔者简…...
Debezium快照事件监听器系统设计
Debezium快照事件监听器系统设计 1. 系统概述 1.1 设计目标 为 Debezium 的快照过程提供可扩展的事件监听机制允许外部系统在快照过程中执行自定义逻辑提供线程安全的事件分发机制确保监听器的异常不会影响主快照流程1.2 核心功能 表快照开始事件监听表快照完成事件监听行数据…...
基于vue框架的订单管理系统r3771（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
系统程序文件列表 项目功能：商家,用户,商品信息,订单信息,订单配送,评价记录 开题报告内容 基于Vue框架的订单管理系统开题报告 一、研究背景与意义 随着电子商务的快速发展和消费者购物习惯的改变，传统订单管理方式面临效率低、易出错、难以适应高并…...
【2025年前端高频场景题系列】使用同一个链接，如何实现PC打开是web应用、手机打是-个H5 应用？
面试情境与问题引入 在前端开发面试中，面试官经常会抛出一些看似简单却能考察多方面能力的问题。"如何实现同一个链接在PC端和移动端展示不同应用？"就是这样一个典型问题。为什么面试官喜欢问这个问题？因为它能同时考察候选人的设备适配知识、性能优化意识、用户…...
语音识别-2
目录 1.蓝牙优化 1.打开sco 2.外放时的蓝牙的不同版本适配 2.微软文本转语音优化 1.异步文本转语音 2.语音的个性化 上一篇关于语音识别, 虽然能用,但在系统适配,机器适配方面,速度,性能等还是有优化的地方.所以这篇是关于这些的. 1.蓝牙优化 A2DP：是一种单向的高品质音…...
React useState 的同步/异步行为及设计原理解析
一、useState 的同步/异步行为 异步更新（默认行为） • 场景：在 React 合成事件（如 onClick）或生命周期钩子（如 useEffect）中调用 useState 的更新函数时，React 会将这些更新放入队列…...
语音识别——语音转文字
SenseVoiceSmall阿里开源大模型，SenseVoice 是具有音频理解能力的音频基础模型，包括语音识别（ASR）、语种识别（LID）、语音情感识别（SER）和声学事件分类（AEC）或…...
兰亭妙微：用系统化思维重构智能座舱 UI 体验
兰亭妙微设计专注于以产品逻辑驱动的界面体验优化，服务领域覆盖AI交互、智能穿戴、IoT设备、智慧出行等多个技术密集型产业。我们倡导以“系统性设计”为方法论，在用户需求与技术边界之间找到最优解。 此次智能驾驶项目，我们为某车载平台提供…...
计算机视觉----基础概念、卷积
一、概述 1.计算机视觉的定义 计算机视觉（Computer Vision）是一个跨学科的研究领域，主要涉及如何使计算机能够通过处理和理解数字图像或视频来自动进行有意义的分析和决策。其目标是使计算机能够从视觉数据中获取高层次的理解，类似于人类的视觉处理能力。 具体来说，计算机…...
第三十七节：视频处理-视频读取与处理
引言：解码视觉世界的动态密码 在数字化浪潮席卷全球的今天，视频已成为信息传递的主要载体。从短视频平台的爆火到自动驾驶的视觉感知，视频处理技术正在重塑人类与数字世界的交互方式。本指南将深入探讨视频处理的核心技术，通过Python与OpenCV的实战演示，为您揭开动态影像…...
【自然语言处理与大模型】向量数据库：Chroma使用指南
Chroma是一款功能强大的开源 AI 应用数据库，专为高效数据存储与检索而设计。它不仅支持 Embedding 和 Metadata 的存储，还集成了多项核心功能，包括向量搜索、全文搜索、Document 存储、Metadata 过滤以及多模态检索。此外，Chroma …...
NSSCTF [GFCTF 2021]where_is_shell
889.[GFCTF 2021]where_is_shell(system($0)64位) [GFCTF 2021]where_is_shell (1) 1.准备 motalymotaly-VMware-Virtual-Platform:~$ file shell shell: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.s…...
WSL 安装 Debian 12 后，Linux 如何安装 vim ?
在 WSL 的 Debian 12 中安装 Vim 非常简单，只需使用 apt 包管理器即可。以下是详细步骤： 1. 更新软件包列表 首先打开终端，确保系统包列表是最新的： sudo apt update2. 安装 Vim 直接通过 apt 安装 Vim： sudo apt …...
电子数据取证（数字取证）技术全面指南：从基础到实践
为了后续查阅方便，推荐工具先放到前面 推荐工具 数字取证基础工具 综合取证平台 工具名称类型主要功能适用场景EnCase Forensic商业全面的证据获取和分析、强大的搜索能力法律诉讼、企业调查FTK (Forensic Toolkit)商业高性能处理和索引、集成内存分析大规模数据处…...
Ubuntu使用Docker搭建SonarQube企业版（含破解方法）
目录 Ubuntu使用Docker搭建SonarQube企业版（含破解方法）SonarQube介绍安装Docker安装PostgreSQL容器Docker安装SonarQube容器SonarQube汉化插件安装 破解生成license配置agent 使用 Ubuntu使用Docker搭建SonarQube企业版（含破解方法ÿ…...
Spark SQL 之 Analyzer
Spark SQL 之 Analyzer // Special case for Project as it supports lateral column alias.case p: Project =>val resolvedNoOuter = p.projectList.map(resolveExpressionByPlanChildren(_, p...
c/c++数据类型转换.
author: hjjdebug date: 2025年 05月 18日 星期日 20:28:52 CST descrip: c/c数据类型转换. 文章目录 1. 为什么需要类型转换?1.1 发生的时机:1.2 常见的发生转换的类型: 2. c语言的类型转换: (Type) value2.1 c语言的类型变换是如何实现的? 规则是什么? 3. c 的static_cast…...
Django 项目的 models 目录中，__init__.py 文件的作用
在 Django 项目的models/init.py文件中，这些导入语句的主要作用是将各个模型类从不同的模块中导入到models包的命名空间中。这样做有以下几个目的： 简化导入路径 当你需要在项目的其他地方使用这些模型时，可以直接从models包导入，…...
实验六：FPGA序列检测器实验
FPGA序列检测器实验（远程实验系统） 文章目录 FPGA序列检测器实验（远程实验系统）一、数字电路基础知识1. 时钟与同步2. 按键消抖原理代码讲解：分频与消抖3. 有限状态机（FSM）设计代码讲解：状态机编码与转移4. 边沿检测与信号同步5. 模块化设计二、实验数字电路整体思想三…...