前端学习之Flex布局
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex布局示例</title><style>.container {/* Flex布局 ，父盒子设置为flex布局后，子元素的float/clear/position/vertical-align属性无效 */display: flex;/* 水平居中 */justify-content:space-around;/* 垂直居中 */align-items: center;/* 容器高度 */height: 300px;/* 容器宽度 */border: 2px solid #333;flex-direction:row;flex-wrap: nowrap;}.item {/* 子元素宽度 */width: 200px;/* 子元素高度 */height: 100px;/* 子元素背景颜色 */background-color: #f0f0f0;border: 1px solid #ccc;/* 子元素居中 */display: flex;justify-content:center;align-items: center;font-size: 20px;}</style>
</head>
<body><section class="container-section"><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div><h2>Flex布局应用场景</h2><p>Flex布局适用于需要在不同屏幕尺寸上保持良好布局的场景，例如：</p><ul><li>响应式设计：在不同设备上自动调整元素的排列方式。</li><li>导航栏：创建水平或垂直的导航菜单。</li><li>卡片布局：在页面上均匀分布卡片元素。</li></ul><h2>Flex布局优缺点</h2><h3>优点</h3><ul><li>简化布局代码：无需使用浮动或定位来实现复杂的布局。</li><li>自动调整大小：子元素可以根据容器大小自动调整。</li><li>对齐方式灵活：可以轻松控制子元素的对齐方式。</li></ul><h3>缺点</h3><ul><li>浏览器兼容性：虽然现代浏览器普遍支持Flexbox，但旧版浏览器可能存在兼容性问题。</li><li>学习曲线：对于不熟悉Flexbox的开发者，需要一些时间来掌握其工作原理。</li><li>复杂布局限制：对于非常复杂的布局，Flexbox可能不如Grid布局灵活。</li></ul></section><h1>响应式布局demo如下</h1><section class="container-responsive"><style>.responsive-container {display: flex;flex-wrap: wrap; /* 允许子元素换行 */justify-content: space-around;border: 2px solid #333;padding: 10px;}.responsive-item {width: calc(25% - 40px); /* 每个子元素占据1/3宽度，减去间距 */margin: 10px;background-color: #f0f0f0;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;font-size: 20px;}@media (max-width: 960px) {.responsive-item {width: calc(50% - 40px); /* 在较小屏幕上，每个子元素占据1/2宽度 */}}@media (max-width: 480px) {.responsive-item {width: 100%; /* 在非常小的屏幕上，每个子元素占据100%宽度 */}}</style><div class="responsive-container"><div class="responsive-item">responsive Item 1</div><div class="responsive-item">responsive Item 2</div><div class="responsive-item">responsive Item 3</div><div class="responsive-item">responsive Item 4</div></div></section><h1>导航栏demo如下</h1><selection class="nav"><style>.navbar {display: flex;justify-content: space-around;background-color: #333;padding: 10px;}.nav-item {color: white;font-size: 18px;cursor: pointer;}.nav-item:hover {color: #ffcc00;}</style><nav class="navbar"><div class="nav-item">Home</div><div class="nav-item">About</div><div class="nav-item">Services</div><div class="nav-item">Contact</div></nav></selection><h1>卡片布局demo如下</h1><section class="card"><style>.card-container {display: flex;justify-content: space-around;flex-wrap: wrap;padding: 10px;}.card {width: calc(33.333% - 20px);margin: 10px;background-color: #f0f0f0;border: 1px solid #ccc;padding: 20px;box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);}.card h3 {margin-top: 0;}.card p {margin-bottom: 0;}</style><div class="card-container"><div class="card"><h3>Card 1</h3><p>This is the content of card 1.</p></div><div class="card"><h3>Card 2</h3><p>This is the content of card 2.</p></div><div class="card"><h3>Card 3</h3><p>This is the content of card 3.</p></div></div></section>
</body>
</html>
相关文章：
前端学习之Flex布局
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Flex布局示例</title><style>.conta…...
游戏引擎学习第97天
回顾昨天并计划今天 在这期节目中，主要讲解了光照的概念，并进一步讨论了法线贴图光照的实现。节目的内容大致分为几个部分： 光照的基础概述：讨论了光的工作原理以及如何在编程图形时需要考虑光照问题。尽管这些概念并没有深入到…...
Mysql中存储引擎各种介绍以及应用场景、优缺点
概述 MySQL 提供了多种存储引擎，每种引擎有不同的特点和适用场景。以下是几种常见的 MySQL 存储引擎的详细介绍，包括它们的底层工作原理、优缺点，以及为什么 MySQL 默认选择某种引擎。 1. InnoDB 底层工作原理： 事务支持&#…...
PHP 运算符
PHP 运算符 概述 PHP 是一种广泛使用的开源服务器端脚本语言，它具有丰富的运算符集，这些运算符是编写 PHP 程序的基础。运算符用于执行各种数学、逻辑和比较操作。本篇文章将详细介绍 PHP 中常用的运算符，包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。 算术运…...
Vue全流程--Vue3.0与Vue2.0响应式原理对比
Vue2中数据的响应式 需要使用Vue.set这么一个api，修改数据 需要使用Vue.delete这么一个api，删除数据 数据代理这个当面的理解可以看看我前面文章Vue全流程--数据代理的理解以及在Vue中的应用-CSDN博客 Vue3中数据的响应式 Vue3使用proxy这个api实现…...
C语言学习笔记：子函数的调用实现各个位的累加和
在C语言程序学习之初，我们都会学习如何打印 hello world，在学习时我们知道了int main（）是主函数，程序从main函数开始执行，这是流程控制的一部分内容。在主函数中我们想要实现一些功能，比如求各个…...
【大模型】本地部署DeepSeek-R1:8b大模型及搭建Open-WebUI交互页面
本地部署DeepSeek-R1:8b大模型 一、摘要及版本选择说明1.1 摘要1.2 版本选择 二、下载并安装Ollama三、运行DeepSeek-R1:8b大模型四、安装Open WebUI增强交互体验五、关闭Ollama开机自动启动六、DeepSeek大模型启停步骤 一、摘要及版本选择说明 1.1 摘要 作为一名对 AI 和生成…...
Python 调用 Stabilityai API在本地生成图像
Python 调用 Stabilityai API在本地生成图像 摘要功能 代码结构关键技术代码下载立即体验 摘要 本程序利用硅基流动目前的免费 stabilityai/stable-diffusion-2-1 模型API，生成图像并下载到本地，用户可以通过输入描述性提示词来获取相应的图像。使用Pyt…...
Python3中异常处理：try-finally语句的示例
一. 简介 前面一篇文章简单学习了 try-finally语句结构，执行过程、以及使用场景。文章如下： Python3中异常处理：try-finally语句-CSDN博客 本文写一些简单的示例来继续学习 try-finally语句的使用。 二. Python3中异常处理：try…...
Lua限流器的3种写法
学而不思则罔，思而不学则殆 引言 上篇文章讲解了Lua脚本，事务和Pipline之间的使用方式和性能差距，本篇文章将聚焦Lua脚本，我将用三种写法来展现如何实现一个Redis限流器 固定窗口限流 固定窗口限流也是最简单的限流算法&#x…...
基于 GEE 利用插值方法填补缺失影像
目录 1 完整代码 2 运行结果 利用GEE合成NDVI时，如果研究区较大，一个月的影像覆盖不了整个研究区，就会有缺失的地方，还有就是去云之后，有云量的地区变成空值。 所以今天来用一种插值的方法来填补缺失的影像…...
linux部署ollama+deepseek+dify
Ollama 下载源码 curl -L https://ollama.com/download/ollama-linux-amd64.tgz -o ollama-linux-amd64.tgz sudo tar -C /usr -xzf ollama-linux-amd64.tgz启动 export OLLAMA_HOST0.0.0.0:11434 ollama serve访问ip:11434看到即成功 Ollama is running 手动安装deepseek…...
在微服务中，如何使用feign在各个微服务中进行远程调用
在微服务中，如何使用feign在不同微服务中进行远程调用 在微服务中，如何使用feign在不同微服务中进行远程调用 步骤： 第一步： 引入feign依赖 <dependency><groupId>org.springframework.cloud</groupId><…...
Kafka中的KRaft算法
我们之前的Kafka值依赖于Zookeeper注册中心来启动的，往里面注册我们节点信息 Kafka是什么时候不依赖Zookeeper节点了 在Kafka2.8.0开始就可以不依赖Zookeeper了 可以用KRaft模式代替Zookeeper管理Kafka集群 KRaft Controller和KRaft Leader的关系 两者关系 Lea…...
vue3 -- 集成 amap（高德地图）
🍍效果 本文介绍了如何在 Vue 3 项目中集成高德地图（AMap），并使用 PoiPicker 实现地点搜索功能。 文章首先通过 AMapLoader 异步加载高德地图 API，并初始化 Map 实例。同时，借助 AMapUI 组件库引入 PoiPicker，绑定搜索输入框，实现地点选择功能。PoiPicker 监听用户的 …...
基于用户的协同过滤算法推荐
import numpy as np 计算用户之间的相似度（这里使用余弦相似度） def cosine_similarity(user1, user2): numerator np.dot(user1, user2) denominator np.linalg.norm(user1) * np.linalg.norm(user2) return numerator / denominator if denominato…...
4.python+flask+SQLAlchemy+达梦数据库
前提 1.liunx Centos7上通过docker部署了达梦数据库。从达梦官网下载的docker镜像。（可以参考前面的博文） 2.windows上通过下载x86,win64位的达梦数据库，只安装客户端，不安装服务端。从达梦官网下载达梦数据库windows版。（可以参考前面的博文） 这样就可以用windows的达…...
神经网络常见激活函数 4-LeakyReLU函数
文章目录 LeakyReLU函数导函数函数和导函数图像优缺点pytorch中的LeakyReLU函数tensorflow 中的LeakyReLU函数 LeakyReLU LeakyReLU： Leaky Rectified Linear Unit 函数导函数 LeakyReLU函数 L e a k y R e L U { x x > 0 p x x < 0 p ∈ ( 0 , 1 ) \rm …...
PHP盲盒商城系统源码 晒图+免签+短信验证+在线回收 thinkphp框架
源码介绍 PHP盲盒商城系统源码 晒图免签短信验证在线回收 thinkphp框架 源码前端uniapp开发，可以打包成APP（非H5封壳）H5，接其他平台支付通道，前后端全开源 H5盲盒首页可以直接开盒新UI 修复优化BUG，修复无…...
单例模式详解（Java）
单例模式详解（Java） 一、引言 1.1 概述单例模式的基本概念和重要性 单例模式是一种常用的软件设计模式，它确保一个类在整个应用程序中只有一个实例，并提供一个全局访问点来访问这个唯一实例。这种模式在资源管理、配置设置和日志记录等方面非常有用，因为它们通常只需要…...
用Python和MNE库玩转BCI Competition IV 2a脑电数据集：从数据加载到可视化全流程
用Python和MNE库玩转BCI Competition IV 2a脑电数据集：从数据加载到可视化全流程当你第一次接触脑电信号处理时，面对原始数据文件可能会感到无从下手。BCI Competition IV 2a数据集作为脑机接口领域的经典基准数据，包含了9名受试者四种运动想…...
如何进行TVA仿真引擎的“光照地狱”训练？
重磅预告：本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容，该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著，特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...
【DeepSeek架构评审功能深度解密】：20年架构师亲授3大避坑指南与5步落地 checklist
更多请点击： https://kaifayun.com 第一章：DeepSeek架构评审功能全景概览 DeepSeek架构评审功能是一套面向大模型系统设计与工程落地的自动化分析框架，聚焦于模型结构合理性、计算图优化潜力、内存访问模式、算子兼容性及部署约束等多维度评…...
GEO生成引擎优化：当AI成为信息分发的主角，品牌如何抢占对话窗口？
当用户不再"搜索-浏览"，而是直接"AI提问-获取答案"，传统SEO的逻辑正在被彻底改写。2026年，GEO（Generative Engine Optimization，生成式引擎优化）已经从概念走向规模化落地。本文从技术…...
从RD、CS到WK：一文讲透SAR主流成像算法的演进与选型实战
从RD、CS到WK：SAR成像算法选型实战指南 当无人机掠过灾区上空，或卫星扫描地球表面时，合成孔径雷达（SAR）正通过电磁波穿透云层和黑暗，将地面信息转化为高分辨率图像。而决定图像质量的关键，在于工…...
DeepSeek模型微调全链路解析：从数据准备、LoRA配置到推理部署的7大关键步骤
更多请点击： https://intelliparadigm.com 第一章：DeepSeek模型微调全链路概览 DeepSeek系列大语言模型（如DeepSeek-V2、DeepSeek-Coder）凭借其开源特性、高性能推理能力与丰富的领域适配性，已成为工业界与学术界微调…...
告别鼠标点击，微博图片批量下载的轻松方案
告别鼠标点击，微博图片批量下载的轻松方案 【免费下载链接】weiboPicDownloader Download weibo images without logging-in 项目地址: https://gitcode.com/gh_mirrors/we/weiboPicDownloader 还记得那个周末的下午吗？你喜欢的博主发布了九宫格美…...
机器学习在射电天文数据分类中的应用：以MIGHTEE巡天SFG/AGN分类为例
1. 项目概述：当机器学习遇见深空射电巡天在射电天文学领域，我们正经历一场数据洪流。以MeerKAT望远镜阵列主导的MIGHTEE巡天项目为例，其在COSMOS天区的一次早期科学数据释放，就在不到1平方度的天区内探测到了超过6000个射电源。传…...
从API Key管理视角看Taotoken平台的安全与审计功能
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 从API Key管理视角看Taotoken平台的安全与审计功能 对于依赖大模型API进行开发的团队而言，API Key的管理与安全是项目稳…...
H3C VSR路由器实战：用QoS策略给不同VLAN用户打DSCP标签（附配置命令详解）
H3C VSR路由器QoS实战：基于VLAN的DSCP标记与流量调度指南 在企业网络环境中，不同业务对网络质量的需求差异显著。普通办公流量可以容忍轻微延迟，但视频会议需要稳定的低延迟保障，而访客上网则可能消耗大量带宽却无需优先保障。本文…...