基于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…...
AUTOSAR图解==＞AUTOSAR_SRS_Transformer
AUTOSAR Transformer 详解 基于AUTOSAR标准的Transformer组件技术解析 目录 1. AUTOSAR Transformer 概述 1.1 Transformer的作用1.2 Transformer在AUTOSAR中的位置2. Transformer架构设计 2.1 整体架构2.2 类结构设计2.3 交互流程3. Transformer类型与实现 3.1 SOME/IP Transf…...
iOS APP启动页及广告页的实现
iOS APP启动页及广告页的实现涉及UI布局、数据加载、倒计时控制、广告跳转等多个关键环节。以下是我的一些使用心得： 1. UI实现方案 双Window方案 原理：同时创建两个Window，主Window位于底层，广告Window覆盖在其上。通过切换mak…...
图绘Linux：基础指令脉络阁
目录 Linux命令行介绍 目录操作 ls 目录所含文件信息 ls 常用选项 pwd 在那个目录下 cd 进入目录 mkdir 创建目录 文件操作 touch 创建普通文件 echo向文件写入 cat 输出文件内容 cp 拷贝文件/目录 mv剪切重命名 rm 删除文件/目录 查找 * 匹配符 man 查找指令 …...
数字格式化库 accounting.js的使用说明
accounting.js 是一个用于格式化数字、货币和金额的轻量级库，特别适合财务和会计应用。以下是其详细使用说明： 安装与引入 通过 npm 安装： bash 复制 下载 npm install accounting 引入： javascript 复制 下载 const accounting …...
ngx_http_proxy_protocol_vendor_module 模块
一、前置要求 启用 PROXY 协议 在 listen 指令中添加 proxy_protocol 参数，例如： server {listen 80 proxy_protocol;listen 443 ssl proxy_protocol;… }商业订阅 本模块仅在 Nginx 商业版中提供。 二、示例配置 http {# 将 GCP 的 PSC 连接 ID 添…...
)
C++11-(2)
文章目录 （一）C11新增功能1.1 引用折叠1.1.1 在模板中使用引用折叠的场景1.1.2 引用折叠是如何实现的 1.2 完美转发1.3 lambda表达式语法1.3.1 定义1.3.2 lambda的使用场景1.3.3 捕捉列表1.3.4 mutable语法1.3.5 lambda的原理 （一）…...
LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项
LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项 第 一 题 - - - 移 除 元 素方 法 一 - - - 双 重 循 环方 法 二 - - - 双 指 针方 法 三 - - - 相 向 双 指 针（面 对 面 移 动） 第 二 题 - - -…...
QT6 源（106）：阅读与注释重要的基类控件 QWidget，这是其精简版，完整注释版为篇 37
（1）原篇幅 37 为最开始整理，整理的不是太完善。重点不突出。故重新整理，但删除了大量的注释，重在突出本 QWidget类的内部逻辑，更易观察其包含了哪些内容。至于不理解的成员函数与属性，内容已不太…...
【Bluedroid】蓝牙HID DEVICE错误报告处理全流程源码解析
本文基于Android蓝牙协议栈代码，深入解析HID设备在接收非法指令（如无效的SET_REPORT）时的错误处理全流程，涵盖错误映射、协议封装、传输控制三大核心模块。重点剖析以下机制： HID协议规范错误码的动态转换策略 控制通…...
Day29 类的装饰器
类也有修饰器，他的逻辑类似：接收一个类，返回一个修改后的类。例如 添加新的方法或属性（如示例中的 log 方法）。修改原有方法（如替换 init 方法，添加日志）。甚至可以返回一个全新的类…...
学习黑客Active Directory 入门指南（二）
Active Directory 入门指南（二）：深入逻辑结构与物理组件 🌳🏢 大家好！欢迎回到 “Active Directory 入门指南” 系列的第二篇。在上一篇中，我们初步认识了Active Directory，了解了其…...
为什么el-select组件在下拉选择后无法赋值
为什么el-select组件在下拉选择后无法赋值 https://blog.csdn.net/ZHENGCHUNJUN/article/details/127325558 这个链接解决了大模型无法解决的问题 大模型能够写基础且高级一些的代码，但是遇到再深入一些的问题，还是得问百度。对于我这种小白来说问题原因…...
FreeRTOS的学习记录（临界区保护，调度器挂起与恢复）
临界区 在 FreeRTOS 中，临界区（Critical Section） 是指程序中一段必须以原子方式执行的代码区域，在此区域内不允许发生任务切换或中断干扰，以保护共享资源或执行关键操作。FreeRTOS 提供了多种机制来实现临界区&#…...
给个人程序加上MCP翅膀
背景 最近MCP这个词真是到处都是，看起来特别高大上。我平时没事的时候也一直在关注这方面的技术，知道它是怎么一回事，也懂该怎么去实现。但可惜一直抽不出时间来自己动手搞一个MCP服务。网上关于MCP的教程一搜一大把，但基本上都是…...
2023年河南CCPC（ABCEFHK）
文章目录 2023河南CCPCA. 小水獭游河南(字符串)B. Art for Rest(数组切割)C. Toxel与随机数生成器(水)E. 矩阵游戏（dp）F. Art for Last(区间最小差分)H. Travel Begins(数学思维)K. 排列与质数（规律）总结 2023河南CCPC A. 小水獭…...
【 Redis | 实战篇 秒杀优化 】
目录 前言： 1.分布式锁 1.1.分布式锁的原理与方案 1.2.Redis的String结构实现分布式锁 1.3.锁误删问题 1.4.锁的原子性操作问题 1.5.Lua脚本解决原子性问题 1.6.基于String实现分布式锁存在的问题 1.7.Redisson分布式锁 2.秒杀优化 3.秒杀的异步优化 3.1…...
【Spring】核心机制：IOC与DI深度解析
目录 1.前言 2.正文 2.1三层架构 2.2Spring核心思想（IOC与AOP） 2.3两类注解：组件标识与配置 2.3.1五大类注解 2.3.1.1Controller 2.3.1.2Service 2.3.1.3Repository 2.3.1.4Configuration 2.3.1.5Component 2.3.2方法注解&#x…...
1-机器学习的基本概念
文章目录 一、机器学习的步骤Step1 - Function with unknownStep2 - Define Loss from Training DataStep3 - Optimization 二、机器学习的改进Q1 - 线性模型有一些缺点Q2 - 重新诠释机器学习的三步Q3 - 机器学习的扩展Q4 - 过拟合问题（Overfitting） 一、…...
ARM A64 STR指令
ARM A64 STR指令 1 STR (immediate)1.1 Post-index1.1.1 32-bit variant1.1.2 64-bit variant 1.2 Pre-index1.2.1 32-bit variant1.2.2 64-bit variant 1.3 Unsigned offset1.3.1 32-bit variant1.3.2 64-bit variant 1.4 Assembler symbols 2 STR (register)2.1 32-bit varia…...
虚幻引擎5-Unreal Engine笔记之`GameMode`、`关卡（Level）` 和 `关卡蓝图（Level Blueprint）`的关系
虚幻引擎5-Unreal Engine笔记之GameMode、关卡（Level） 和 关卡蓝图（Level Blueprint）的关系 code review! 文章目录 虚幻引擎5-Unreal Engine笔记之GameMode、关卡（Level） 和 关卡蓝图（Level B…...
软件工具：批量图片区域识别+重命名文件的方法，发票识别和区域选择方法参考，基于阿里云实现
基于阿里云的批量图片区域识别与重命名解决方案 图像识别重命名 应用场景 企业档案管理：批量处理扫描的合同、文件等图片，根据合同编号、文件标题等关键信息重命名文件医疗影像处理：识别X光、CT等医学影像中的患者ID、检查日…...
.NET外挂系列：1. harmony 基本原理和骨架分析
一：背景 1. 讲故事 为什么要开这么一个系列，是因为他可以对 .NET SDK 中的方法进行外挂，这种技术对解决程序的一些疑难杂症特别有用，在.NET高级调试 领域下大显神威，在我的训练营里也是花了一些篇幅来说这个…...
深入理解位图（Bit - set）：概念、实现与应用
目录 引言 一、位图概念 （一）基本原理 （二）适用场景 二、位图的实现（C 代码示例） 三、位图应用 1. 快速查找某个数据是否在一个集合中 2. 排序 去重 3. 求两个集合的交集、并集等 4. 操作系…...
React Flow 边事件处理实战：鼠标事件、键盘操作及连接规则设置（附完整代码）
本文为《React Agent：从零开始构建 AI 智能体》专栏系列文章。 专栏地址：https://blog.csdn.net/suiyingy/category_12933485.html。项目地址：https://gitee.com/fgai/react-agent（含完整代码示例与实战源）。完整介绍…...
【计算机网络】第一章：计算机网络体系结构
本篇笔记课程来源：王道计算机考研 计算机网络 【计算机网络】第一章：计算机网络体系结构 一、计算机网络的概念1. 理论2. 计算机网络、互连网、互联网的区别 二、计算机网络的组成、功能1. 组成2. 功能 三、交换技术1. 电路交换2. 报文交换3. 分组交换4.…...
实战设计模式之状态模式
概述 作为一种行为设计模式，状态模式允许对象在其内部状态改变时，改变其行为。这种模式通过将状态逻辑从对象中分离出来，并封装到独立的状态类中来实现。每个状态类代表一种特定的状态，拥有自己的一套行为方法。当对象的状态发生变…...
[C++入门]类和对象中（2）日期计算器的实现
目录 一、运算符重载 1、格式 2、简单举例 2、前置，后置 3、日期生成器的实现 1、声明与定义 1、友元函数 2、print函数 3、运算符重载 4、GetMonthDay 5、，-，，-的实现 6、重载流操作符 2、实现 3、定义源码 一、运算…...
数据质量问题的形成与解决
在数字化时代，数据已成为企业和组织发展的核心资产，数据质量的高低直接影响着决策的准确性、业务的高效性以及系统的稳定性。然而，数据质量问题频发，严重阻碍了数据价值的充分发挥。 一、数据质量问题的成因分析 1.信息因素 元数…...
论文阅读（四）:Agglomerative Transformer for Human-Object Interaction Detection
论文来源：ICCV（2023） 项目地址：https://github.com/six6607/AGER.git 1.研究背景 人机交互（HOI）检测需要同时定位人与物体对并识别其交互关系，核心挑战在于区分相似交互的细微视觉差异&#…...
【机器学习】工具入门：飞牛启动Dify Ollama Deepseek
很久没有更新文章了,最近正好需要研究一些机器学习的东西，打算研究一下 difyOllama 以下是基于FN 的dify本地化部署，当然这也可能是全网唯一的飞牛部署dify手册 部署 官方手册：https://docs.dify.ai/en/getting-started/install-self-hos…...
课外活动：再次理解页面实例化PO对象的魔法方法__getattr__
课外活动：再次理解页面实例化PO对象的魔法方法__getattr__ 一、动态属性访问机制解析 1.1 核心实现原理 class Page:def __getattr__(self, loc):"""魔法方法拦截未定义属性访问"""if loc not in self.locators.keys():raise Exce…...
面试题总结二
1.mybatis三个范式 第一范式：表中字段不能再分，每行数据都是唯一的第二范式：满足第一范式，非主键字段只依赖于主键第三范式：满足第二范式，非主键字段没有传递依赖 2.MySQL数据库引擎有哪些 InnoDB&#…...
代码随想录算法训练营第六十六天| 图论11—卡码网97. 小明逛公园，127. 骑士的攻击
继续补，又是两个新算法，继续进行勉强理解，也是训练营最后一天了，六十多天的刷题告一段落了！ 97. 小明逛公园 97. 小明逛公园 感觉还是有点难理解原理 Floyd 算法对边的权值正负没有要求，都可以处理。核心…...
编程技能：字符串函数07，strncat
专栏导航 本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。 （一）WIn32 专栏导航 上一篇：编程技能：字符串函数06，strcat 回到目录…...
[Java实战]Spring Boot整合RabbitMQ：实现异步通信与消息确认机制（二十七）
[Java实战]Spring Boot整合RabbitMQ：实现异步通信与消息确认机制（二十七） 摘要：本文通过完整案例演示Spring Boot与RabbitMQ的整合过程，深入讲解异步通信原理与消息可靠性保证机制。包含交换机类型选择、消息持久化配…...
数据库中关于查询选课问题的解法
前言 今天上午起来复习了老师上课讲的选课问题。我总结了三个解法以及一点注意事项。 选课问题介绍 简单来说就是查询某某同学没有选或者选了什么课。然后查询出该同学的姓名，学号，课程号，课程名之类的。 sql文件我上传了。大家可以尝试练…...
用 UniApp 开发 TilePuzzle：一个由 CodeBuddy 主动驱动的拼图小游戏
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 起心动念：从一个小游戏想法开始 最近在使用 UniApp 做练手项目的时候，我萌生了一个小小…...
golang 安装gin包、创建路由基本总结
文章目录 一、安装gin包和热加载包二、路由简单场景总结 一、安装gin包和热加载包 首先终端新建一个main.go然后go mod init ‘项目名称’执行以下命令 安装gin包 go get -u github.com/gin-gonic/gin终端安装热加载包 go get github.com/pilu/fresh终端输入fresh 运行 &…...
组态王|组态王中如何添加西门子1200设备
哈喽，你好啊，我是雷工！ 最近使用组态王采集设备数据，设备的控制器为西门子的1214CPU， 这里边实施边记录，以下为在组态王中添加西门子1200PLC的笔记。 1、新建 在组态王工程浏览器中选择【设备】→点击【新建】。 2、选择设备 和设备建立通讯要通过对应的设备驱动。 在…...
碎片笔记｜PromptStealer复现要点（附Docker简单实用教程）
前言：本篇博客记录PromptStealer复现历程，主要分享环境配置过程中的一些经验。 论文信息：Prompt Stealing Attacks Against Text-to-Image Generation Models. USENIX, 2024. 开源代码：https://github.com/verazuo/prompt-stealin…...
Docker配置SRS服务器 ，ffmpeg使用rtmp协议推流+vlc拉流
目录 演示视频 前期配置 Docker配置 ffmpeg配置 vlc配置 下载并运行 SRS 服务 推拉流流程实现 演示视频 2025-05-18 21-48-01 前期配置 Docker配置 运行 SRS 建议使用 Docker 配置 Docker 请移步： 一篇就够！Windows上Docker Desktop安装 汉化完整指…...
c++学习之--- list
目录 编辑 一、list的定义: 二、list的模拟实现： 1、list的基本框架： 2、list的普通迭代器： 设计思想： 迭代器的一个特殊需求（c 对于重载->的一颗语法糖）： 代码实现： 3、cons…...
【C++】set、map 容器的使用
文章目录 1. set 和 multiset 的使用1.1 set类的介绍1.2 set的构造和迭代器1.3 set 的增删查1.4 insert和迭代器调用示例1.5 find和erase使用示例1.6 multiset和set的差异 2. map 和 multimap 的使用2.1 map 类的介绍2.2 pair 类型介绍2.3 map 的构造和迭代器2.4 map 的增删查2…...
)
实习记录小程序|基于SSM+Vue的实习记录小程序设计与实现(源码+数据库+文档)
实习记录小程序 目录 基于SSM的习记录小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端： 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大厂码…...
Git从入门到精通
Git 是什么 Git 是一个分布式版本控制系统，主要用于跟踪和管理文件（尤其是代码）的变更。 Git的下载与安装 进入git官网下载界面,选择Windows系统。 点击选择Git for Windows/x64 Setup,进行安装。 注意: Git GUI 是Git提供的一个图形界面工…...
)
Binary Prediction with a Rainfall Dataset-(回归+特征工程+xgb)
Binary Prediction with a Rainfall Dataset 题意： 给你每天的天气信息，让你预测降雨量。 数据处理： 1.根据特征值构造天气降雨量的新特征值 2.根据时间构造月和季节特征 3.处理缺失值 建立模型： 1.建立lightgbm模型 2.建立…...
【C++】unordered_map与set的模拟实现
unordered系列map和set，与普通区别 用法几乎相同，键值唯一，区别unordered系列迭代器是单向的并且遍历出来不是有序的。unordered系列在数据规模大且无序的情况下性能更优 底层实现： map 和 set ：基于平衡二叉树&…...
老旧设备升级利器：Modbus TCP转 Profinet让能效监控更智能
在工业自动化领域，ModbusTCP和Profinet是两种常见的通讯协议。Profinet是西门子公司推出的基于以太网的实时工业以太网标准，而Modbus则是由施耐德电气提出的全球首个真正开放的、应用于电子控制器上的现场总线协议。这两种协议各有各的优点，但…...
编译原理--期末复习
本文是我学习以下博主视频所作的笔记，写的不够清晰，建议大家直接去看这些博主的视频，他/她们讲得非常好： 基础知识概念： 1.【【编译原理】期末复习 零基础自学】，资料 2.【编译原理—混子速成期末保过】&…...