如何用flex布局设计登录页?

使用 Flex 布局设计登录页是一种简单而灵活的方式,让页面在不同屏幕大小下都能有良好的布局。以下是一个简单的例子,演示如何使用 Flex 布局设计登录页:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Login Page</title>
</head>
<body><div class="login-container"><div class="login-box"><h2>Login</h2><form action="#"><label for="username">Username:</label><input type="text" id="username" name="username" required><label for="password">Password:</label><input type="password" id="password" name="password" required><button type="submit">Login</button></form></div></div>
</body>
</html>

CSS 样式(styles.css):

body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}.login-container {width: 100%;max-width: 400px;
}.login-box {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}h2 {text-align: center;color: #333;
}form {display: flex;flex-direction: column;
}label {margin-bottom: 8px;color: #555;
}input {padding: 10px;margin-bottom: 16px;border: 1px solid #ccc;border-radius: 4px;
}button {padding: 12px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}

在这个例子中:

1、使用 display: flex 将 body 设置为弹性容器,通过 justify-content 和 align-items 居中页面内容。

2、.login-container 作为登录容器,使用 max-width 限制其最大宽度,并使其在小屏幕上保持 100% 宽度。

3、.login-box 是登录框,具有一些基本的样式,如背景颜色、内边距、圆角和阴影。

4、表单内的元素使用 Flex 布局来垂直排列,flex-direction: column。

5、表单元素(label、input、button)都有一些基本的样式,如间距、边框、边框半径等。

这只是一个简单的例子,你可以根据具体需求进行修改和扩展。Flex 布局的优势在于它提供了一种简便的方式来创建响应式和灵活的布局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从Android源码中生成系统签名文件

从Android源码中生成系统签名文件 文章目录 从Android源码中生成系统签名文件1、在linux中打开编译android源码目录。2、cd到签名文件位置3、生成 platform.pem文件4、生成 platform.p12 文件5、生成 最终的 platform.jks系统签名文件6、把platform.jks 放到Studio 项目app 根目…

word中,文本框如何跨页?

我们经常使用word编辑一些文档&#xff0c;文档中往往会有一些比较大的文本框&#xff0c;需要跨多页&#xff0c;我们可以使用本文章中的方法&#xff0c;将文本框连接在一起&#xff0c;是的内容自动跨页。 在文字中插入两个文本框如下图&#xff1a; 将内容放到第一个文本框…

ubuntu上搭建bazel编译环境,构建Android APP

背景是github上下载的工程&#xff0c;说明仅支持bazel编译&#xff0c;折腾了一天Android studio&#xff0c;失败。 不得不尝试单价bazel编译环境&#xff0c;并不复杂&#xff0c;过程记录如下 说明&#xff1a;ubuntu环境是20.04&#xff0c;pve虚拟机安装 1.安装jdk sudo…

Android audio环形缓冲队列

1、背景 在学习audio的过程中&#xff0c;看到了大神zyuanyun的博客&#xff0c;在博客的结尾&#xff0c;大神留下了这些问题&#xff1a; 但是大神没有出后续的博文来说明audio环形缓冲队列的具体实现&#xff0c;这勾起了我强烈的好奇心。经过一段时间的走读代码&#xff…

朴素贝叶斯 朴素贝叶斯原理

朴素贝叶斯 朴素贝叶斯原理 判别模型和生成模型 监督学习方法又分生成方法 (Generative approach) 和判别方法 (Discriminative approach)所学到的模型分别称为生成模型 (Generative Model) 和判别模型 (Discriminative Model)。 朴素贝叶斯原理 朴素贝叶斯法是典型的生成学习…

深度学习之全面了解网络架构

在这篇文章中&#xff0c;我们将和大家探讨“深度学习中的网络架构”这个主题&#xff0c;解释相关背景知识&#xff0c;并就一些问题进行解答。 我选择的问题反映的是常见用法&#xff0c;而不是学术用例。我将概括介绍该主题&#xff0c;然后探讨以下四个问题&#xff1a; …

Java的I/O演进之路

文章目录 通信技术整体解决的问题1 I/O 模型基本说明2 I/O模型Java BIOJava NIOJava AIO 3 BIO、NIO、AIO 适用场景分析 通信技术整体解决的问题 局域网内的通信要求。多系统间的底层消息传递机制。高并发下&#xff0c;大数据量的通信场景需要。游戏行业。无论是手游服务端&a…

区块链的可拓展性研究【04】分片

分片属于layer1扩容 区块链分片是一种技术实现&#xff0c;可以将区块链网络分成多个片段&#xff0c;每个片段负责处理一部分的交易数据。这种方法可以提高区块链网络的处理速度和吞吐量&#xff0c;降低交易确认时间和费用&#xff0c;同时也可以减轻节点运行负担。 在传统…

【出现模块node_modules里面包找不到】

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 一、出现的问题二、解决办法三、其它可供参考 一、出现的问题 在本地运行 npm run docs:dev之后&#xff0c;出现 Error [ERR_MODULE_NOT_FOUND]: Cannot find package Z:\Blog\docs\node_modules\htmlparser2\ imported from Z:\Blo…

微信小程序base64与十六进制相互转换(使用btoa、atob方法报undefined)

前言&#xff1a;搜到很多方法都用到了btoa()、atob()&#xff0c;这两个属于Window 对象&#xff0c;在浏览器端可以直接使用&#xff0c;但是在小程序里面使用会报undefined。看到uniapp和微信小程序官方文档都提供了下面两个api&#xff0c;就想着经过ArrayBuffer 对象转换一…

入门Redis学习总结

记录之前刚学习Redis 的笔记&#xff0c; 主要包括Redis的基本数据结构、Redis 发布订阅机制、Redis 事务、Redis 服务器相关及采用Spring Boot 集成Redis 实现增删改查基本功能 一&#xff1a;常用命令及数据结构 1.Redis 键(key) # 设置key和value 127.0.0.1:6379> set …

解释AI决策,这10个强大的 Python 库记得收藏!

本文整理了10个常用于可解释AI的Python库&#xff0c;方便我们更好的理解AI模型的决策。 什么是XAI&#xff1f; XAI&#xff08;Explainable AI&#xff09;的目标是为模型的行为和决策提供合理的解释&#xff0c;这有助于增加信任、提供问责制和模型决策的透明度。XAI 不仅…

《深入浅出进阶篇》洛谷P3197 越狱——集合

洛谷P3197 越狱 题目大意&#xff1a; 监狱有 n 个房间&#xff0c;每个房间关押一个犯人&#xff0c;有 m 种宗教&#xff0c;每个犯人会信仰其中一种。如果相邻房间的犯人的宗教相同&#xff0c;就可能发生越狱&#xff0c;求有多少种状态可能发生越狱。 答案对100,003 取模。…

Temu卖家如何获取流量?Temu新手卖家流量来源哪里?——站斧浏览器

流量对于每个平台来说都是很重要的&#xff0c;那么Temu卖家如何获取流量&#xff1f;流量来源哪里&#xff1f; Temu卖家如何获取流量&#xff1f; 1、优化产品标题和描述&#xff1a;在Temu平台上&#xff0c;买家通常通过搜索关键词来寻找他们感兴趣的产品。因此&#xff…

【数电笔记】58-同步D触发器

目录 说明&#xff1a; 1. 电路组成 2. 逻辑功能 3. 特性表、特性方程 4. 状态转移图 例题 5. 同步D触发器的特点 6. 集成同步D触发器&#xff1a;74LS375 74LS375内部原理 说明&#xff1a; 笔记配套视频来源&#xff1a;B站本系列笔记并未记录所有章节&#xff0c;…

服务器部署网易开源TTS | EmotiVoice部署教程

一、环境 ubuntu 20.04 python 3.8 cuda 11.8二、部署 1、docker方式部署 1.1、安装docker 如何安装docker&#xff0c;可以参考这篇文章 1.2、拉取镜像 docker run -dp 127.0.0.1:8501:8501 syq163/emoti-voice:latest2、完整安装 安装python依赖 conda create -n Emo…

Web 开发的 20 个实用网站

Web 开发的 20 个实用网站 作为一名前端开发工程师&#xff0c;我们一定使用过很多工具来提高自己的工作效率。它们可以是网站、文档或 JavaScript 库。 本文将分享30个有趣的网站。 JavaScript正则表达式可视化工具 https://jex.im/regulex/#!flags&re%5E(a%7Cb)*%3F%…

Centos7及Ubuntu系统安装指定版本dockerdocker-compose安装

Centos7系统 docker指定版本安装【官方文档步骤】 官方文档地址&#xff1a;https://docs.docker.com/engine/install/centos/ # 1.安装yum工具及设置docker-ce镜像库 sudo yum install -y yum-utils# 国外的镜像下载太慢了改成阿里云镜像库 sudo yum-config-manager --add-rep…

★102. 二叉树的层序遍历

102. 二叉树的层序遍历 很巧妙的&#xff0c;又学习了一种层次遍历的方法&#xff0c;就是说根据当前的队列的长度去遍历&#xff0c;遍历的当前队列的长度就是该层次的节点个数。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* Tr…

AIGC专题报告:AIGC助力大规模对象存储服务OSS的能效提升

今天分享的AIGC系列深度研究报告&#xff1a;《AIGC专题报告&#xff1a;AIGC助力大规模对象存储服务OSS的能效提升》。 &#xff08;报告出品方&#xff1a;全球软件开发大会&#xff09; 报告共计&#xff1a;18页 结合AI的智能运维助力能效提升 场景1&#xff1a;通过 AI…