当前位置: 首页 > news >正文

【CSS】 Grid布局:现代网页设计的基石

引言

最近接到一个网页布局比较复杂的页面,看了半天还是决定用grid布局来写,记录一下

在这里插入图片描述

布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局,它让设计师和开发者能够更直观、更灵活地控制网页的结构。本文将深入探讨CSS Grid布局的核心概念、优势以及如何在实际项目中应用它。

CSS Grid布局基础

什么是CSS Grid布局?

CSS Grid布局是一种基于网格的布局系统,允许你将页面分割成多个行和列。它提供了一种在二维空间内布局元素的方法,可以轻松地创建复杂的布局结构。

Grid容器和Grid项

  • Grid容器:通过设置 display: griddisplay: inline-grid 属性,一个元素就变成了Grid容器。
  • Grid项:Grid容器的直接子元素自动成为Grid项。

Grid轨道

  • Grid列和行:通过 grid-template-columnsgrid-template-rows 属性定义网格的列和行。
  • Grid间隙:使用 grid-column-gapgrid-row-gap(或简写为 grid-gap)来设置网格项之间的间隙。

Grid线

  • 命名网格线:可以给网格线命名,以便更精确地定位Grid项。
  • 网格线编号:网格线从1开始编号,可以使用这些编号来指定Grid项的位置。

CSS Grid布局的优势

灵活性

CSS Grid布局提供了前所未有的灵活性,可以轻松地创建响应式设计,适应不同屏幕尺寸和设备。

简洁性

与传统的浮动布局相比,Grid布局的语法更加简洁明了,减少了需要的CSS代码量。

对齐控制

CSS Grid布局提供了强大的对齐控制功能,包括对齐网格项和对齐整个网格。

CSS Grid布局的实用技巧

创建复杂布局

介绍如何使用Grid布局创建复杂的页面布局,包括多列布局、不规则网格等。

响应式设计

探讨如何利用CSS Grid布局实现响应式设计,包括使用媒体查询和网格模板区域。

与Flexbox的对比

简要比较CSS Grid布局与Flexbox布局,帮助读者理解何时使用Grid布局,何时使用Flexbox布局。

实际案例分析

通过分析几个实际的网页设计案例,展示CSS Grid布局在实际项目中的应用。

结语

CSS Grid布局是现代网页设计不可或缺的一部分。掌握它将为你的网页设计带来无限可能,让你能够创建出既美观又功能强大的用户界面。

文章最后推荐一下:CSS Grid Generator
它可以帮你快速实现grid布局

在这里插入图片描述

文章开头布局,完整代码:

<!-- 懒得简化了,先实现页面再说,时间紧任务重,哈哈哈 -->
<template><div class="InvCurrTons"><div class="InvCurrTons-left"><div class="InvCurrTons-left-box1"><div class="toTitle"><h3>碎浆站</h3><div class="fTitle"><div>短纤: 23323</div><div>长纤: 42332</div><div>机械浆: 432</div><div>总计: 66087</div></div></div><div class="InvCurrTons-left-box1-content"><div class="parent" style="width: 12%;"><div v-for="(item, index) in PulpData.items" :key="index"><!-- kd: item.type === 0, --><divclass="kd":class="{bd: item.type === 1,md: item.type === 2}">{{ item.name }}</div></div></div><div class="vertical-dashed-line"></div><div class="vertical-dashed-line2"></div><div class="parent-right" style="width: 85%;"><div class="parent-right-item1"><div class="parent5"><divclass="box1 kd":class="{bd: PulpData.items1[0].type === 1,md: PulpData.items1[0].type === 2,bd2: PulpData.items1[0].type === 3}">{{ PulpData.items1[0].name }}</div></div></div><div class="parent-right-item2"><div class="parent2" style="width: 45%;"><divv-for="(item, index) in PulpData.items2":key="index":class="'LBDiv' + (index + 1)"><!-- kd: item.type === 0, --><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><divclass="vertical-dashed-line2"style="margin-left: 4px;"></div><div class="vertical-dashed-line2"></div><div class="vertical-dashed-line3"></div><divclass="vertical-dashed-line3"style="width: 22%;left: 48%;"></div><div class="parent3" style="width: 20%;"><divv-for="(item, index) in PulpData.items3":key="index":class="'CBDiv' + (index + 1)"><!-- kd: item.type === 0, --><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><div class="vertical-dashed-line4"></div><div class="vertical-dashed-line2"></div><div class="vertical-dashed-line2"></div><div class="parent4" style="width: 25%;"><divv-for="(item, index) in PulpData.items4":key="index":class="'RBDiv' + (index + 1)"><!-- kd: item.type === 0, --><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div></div></div></div></div><div class="InvCurrTons-left-box2"><div class="toTitle" style="height: 20%;"><h3>旧堆场</h3><div class="fTitle"><div>短纤: 23323</div><div>长纤: 42332</div><div>机械浆: 432</div><div>总计: 66087</div></div></div><div class="InvCurrTons-left-box2-content"><divv-for="(item, index) in OldDump.items":key="index"class="jdcBox"><!-- kd: item.type === 0, --><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div></div></div><div class="InvCurrTons-right"><div class="toTitle"><h3>一万方堆场</h3><div class="fTitle"><div>短纤: 23323</div><div>长纤: 42332</div><div>机械浆: 432</div><div>总计: 66087</div></div></div><div class="InvCurrTons-right-content"><div class="box"></div><div class="grid1"><div class="grid1-l"><divv-for="(item, index) in tenKHeapData.items":key="index"class="grid1-l-piece":class="'grid1L' + (index + 1)"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><div style="display: flex;align-items: flex-end;"><divclass="vertical-dashed-line2"style="height: 42%;background-size: 2rem 1.4rem;"></div><divclass="vertical-dashed-line2"style="height: 42%;background-size: 2rem 1.4rem;"></div></div><div class="grid1-c"><divv-for="(item, index) in tenKHeapData.items2":key="index":class="'grid1C' + (index + 1)"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><div class="vertical-dashed-line"></div><div class="vertical-dashed-line2"></div><div class="grid1-r"><divv-for="(item, index) in tenKHeapData.items3":key="index"class="grid1-r-piece"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div></div><div class="box" style="position: relative;"><divclass="vertical-dashed-line3"style="width: 20%;top: 0;left: 1rem;"></div><divclass="vertical-dashed-line3"style="width: 44%;top: 0;left: 8.8rem;"></div><divclass="vertical-dashed-line3"style="width: 22%;top: 0;left: 24.4rem;"></div><divclass="vertical-dashed-line3"style="width: 20%;top: 100%;left: 1rem;"></div><divclass="vertical-dashed-line3"style="width: 44%;top: 100%;left: 8.8rem;"></div><divclass="vertical-dashed-line3"style="width: 22%;top: 100%;left: 24.4rem;"></div></div><div class="grid2"><div class="grid2-l"><divv-for="(item, index) in tenKHeapData.items4":key="index"class="grid1-r-piece"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><div class="vertical-dashed-line"></div><div class="vertical-dashed-line2"></div><div class="grid2-c"><divv-for="(item, index) in tenKHeapData.items5":key="index"class="grid1-r-piece"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div><div class="vertical-dashed-line"></div><div class="vertical-dashed-line2"></div><div class="grid2-l"><divv-for="(item, index) in tenKHeapData.items6":key="index"class="grid1-r-piece"><divclass="kd":class="{bd: item.type === 1,md: item.type === 2,bd2: item.type === 3}">{{ item.name }}</div></div></div></div></div></div></div>
</template><script>
export default {components: {},data() {return {PulpData: {items: [{ name: 111, type: 2 },{ name: 110 },{ name: 109 },{ name: 108, type: 2 },{ name: 107, type: 1 },{ name: 106, type: 1 },{ name: 105, type: 0 },{ name: 104, type: 1 },{ name: 103, type: 2 },{ name: 102 },{ name: 101, type: 2 }],items1: [{ name: "2-3", type: 2 }],items2: [{ name: 201, type: 2 },{ name: 112, type: 2 },{ name: 113, type: 1 },{ name: 202, type: 1 },{ name: 114 },{ name: 203 },{ name: "1-1", type: 2 },{ name: "1-2" },{ name: 204, type: 1 },{ name: "1-3", type: 3 }],items3: [{ name: 205, type: 1 },{ name: 206, type: 2 },{ name: "2-1", type: 3 },{ name: "2-2", type: 3 }],items4: [{ name: 301, type: 0 },{ name: 302, type: 1 },{ name: "3-1", type: 2 },{ name: "3-2", type: 3 },{ name: "3-3", type: 2 }]},OldDump: {items: [{ name: 601, type: 2 },{ name: 602, type: 3 },{ name: 603, type: 0 },{ name: 604, type: 2 },{ name: 605, type: 0 }]},tenKHeapData: {items: [{ name: 718, type: 2 },{ name: 719, type: 1 },{ name: 720, type: 0 }],items2: [{ name: 715, type: 2 },{ name: 716, type: 2 },{ name: 717, type: 1 },{ name: 708, type: 2 },{ name: 709, type: 0 },{ name: 710, type: 1 },{ name: 711, type: 1 },{ name: 712, type: 1 },{ name: 713, type: 2 },{ name: 714, type: 2 }],items3: [{ name: 707, type: 0 },{ name: 706, type: 2 },{ name: 705, type: 1 },{ name: 704, type: 2 },{ name: 703, type: 1 },{ name: 702, type: 2 },{ name: 701, type: 1 }],items4: [{ name: 816, type: 2 },{ name: 817, type: 2 },{ name: 818, type: 1 },{ name: 819, type: 1 },{ name: 820, type: 1 }],items5: [{ name: 811, type: 2 },{ name: 806, type: 2 },{ name: 812, type: 5 },{ name: 807, type: 1 },{ name: 813, type: 1 },{ name: 808, type: 0 },{ name: 814, type: 2 },{ name: 809, type: 2 },{ name: 815, type: 1 },{ name: 810, type: 0 }],items6: [{ name: 801, type: 2 },{ name: 802, type: 1 },{ name: 803, type: 2 },{ name: 804, type: 0 },{ name: 805, type: 0 }]}//type说明: 空堆0 横半堆1 满堆2 竖半堆3};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {},//生命周期 - 创建完成(可以访问当前this实例)created() {},//生命周期 - 挂载完成(可以访问DOM元素)mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script><style lang="less" scoped>
//@import url(); 引入公共css类
.kd {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid #065178;
}
.bd {border: 1px solid #065178;background: linear-gradient(to right, #0073a7 70%, #e9e9e900 0);
}
.md {border: 0px solid;background: #0073a7;
}
.bd2 {border: 1px solid #065178;background: linear-gradient(to bottom, #0073a7 70%, #e9e9e900 0);
}.toTitle {height: 10%;text-align: center;color: #0184cf;.fTitle {color: #71c5e5;display: flex;justify-content: center;div {margin-right: 0.6rem;}}
}
.InvCurrTons {display: flex;height: 100%;&-left {width: 60%;margin: 1rem 0rem 2rem;&-box1 {height: 70%;background: url("../../img/New/cardB.svg") no-repeat;background-size: 100% 100%;background-position: center top;margin: 0 0.5rem;padding: 0.5rem;&-content {display: flex;flex-direction: row;position: relative;height: 90%;padding: 0.4rem 0;.parent {text-align: center;display: flex;flex-direction: column;justify-content: space-between;}.parent-right {.parent-right-item1 {height: 50%;}.parent-right-item2 {position: relative;height: 50%;display: flex;}}}}&-box2 {height: 30%;background: url("../../img/New/cardB.svg") no-repeat;background-size: 100% 100%;background-position: center top;margin: 0.5rem 0.5rem 0;&-content {display: flex;flex-direction: row;position: relative;height: 80%;padding: 0.4rem 0;justify-content: center;.jdcBox {padding: 1rem;width: 7rem;}}}}&-right {width: 45%;background: url("../../img/New/cardB.svg") no-repeat;background-size: 100% 100%;background-position: center top;margin: 1rem 0rem 1.5rem;&-content {height: 90%;position: relative;.box {height: 10%;}.grid1 {height: 45%;display: flex;flex-direction: row;justify-content: space-between;padding: 0 1rem;&-l {width: 23%;padding-right: 0.3rem;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(7, 1fr);grid-column-gap: 0;grid-row-gap: 0.4rem;padding-bottom: 0.3rem;}&-c {height: 100%;width: 46%;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(7, 1fr);grid-column-gap: 0.4rem;grid-row-gap: 4px;padding-bottom: 0.3rem;}&-r {height: 100%;width: 23%;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(7, 1fr);grid-column-gap: 0px;grid-row-gap: 4px;padding-bottom: 0.3rem;}}.grid2 {height: 35%;display: flex;flex-direction: row;justify-content: space-between;padding: 0 1rem;&-l {height: 100%;width: 23%;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(5, 1fr);grid-column-gap: 0px;grid-row-gap: 4px;padding: 0.3rem 0 0.5rem;}&-c {width: 46%;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 0.4rem;grid-row-gap: 4px;padding: 0.3rem 0 0.5rem;}}}}
}.vertical-dashed-line {width: 2px;height: 97%;background-image: linear-gradient(to bottom,rgba(78, 83, 88, 1) 0%,rgba(78, 83, 88, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值(20px)越大线条越长间隙越大margin: 0 0.5rem 0.5rem;
}
.vertical-dashed-line2 {width: 2px;height: 97%;background-image: linear-gradient(to bottom,rgba(40, 51, 63, 1) 0%,rgba(40, 51, 63, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值(20px)越大线条越长间隙越大margin-right: 0.5rem;
}
.vertical-dashed-line3 {width: 35%;height: 2px;background-image: linear-gradient(to right,rgba(78, 83, 88, 1) 0%,rgba(78, 83, 88, 1) 50%,transparent 80%);background-size: 2rem 2rem; //第一个值(20px)越大线条越长间隙越大margin-right: 0.5rem;position: absolute;top: -8px;left: 11%;
}
.vertical-dashed-line4 {width: 3px;height: 97%;background-image: linear-gradient(to bottom, rgba(78, 83, 88, 1));background-size: 2rem 2rem; //第一个值(20px)越大线条越长间隙越大margin-right: 0.2rem;
}
</style><style>
.parent2 {width: 100%;text-align: center;display: grid;grid-template-columns: repeat(2, 1.3fr) 0.8fr repeat(2, 1fr);grid-template-rows: repeat(16, 1fr);grid-column-gap: 2px;grid-row-gap: 2px;
}
.LBDiv1 {grid-area: 13/4/17/6;
}
.LBDiv2 {grid-area: 14 / 2 / 17 / 4;
}
.LBDiv3 {grid-area: 11 / 2 / 14 / 4;
}
.LBDiv4 {grid-area: 9 / 4 / 13 / 6;
}
.LBDiv5 {grid-area: 8 / 2 / 11 / 4;
}
.LBDiv6 {grid-area: 5 / 4 / 9 / 6;
}
.LBDiv7 {grid-area: 1 / 2 / 8 / 3;
}
.LBDiv8 {grid-area: 1 / 3 / 8 / 4;
}
.LBDiv9 {grid-area: 1 / 4 / 5 / 6;
}
.LBDiv10 {grid-area: 1 / 1 / 14 / 2;margin-right: 0.5rem;
}.parent3 {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 10px;grid-row-gap: 5px;
}.CBDiv1 {grid-area: 5 / 1 / 6 / 5;
}
.CBDiv2 {grid-area: 4 / 1 / 5 / 5;
}
.CBDiv3 {grid-area: 1 / 1 / 4 / 3;
}
.CBDiv4 {grid-area: 1 / 3 / 4 / 5;
}.parent4 {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 10px;grid-row-gap: 5px;
}.RBDiv1 {grid-area: 5 / 1 / 6 / 4;
}
.RBDiv2 {grid-area: 4 / 1 / 5 / 4;
}
.RBDiv3 {grid-area: 1 / 1 / 4 / 2;
}
.RBDiv4 {grid-area: 1 / 2 / 4 / 3;
}
.RBDiv5 {grid-area: 1 / 3 / 4 / 4;
}.parent5 {height: 91%;display: grid;grid-template-columns: repeat(6, 1fr) 0.9fr repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 0px;grid-row-gap: 0px;
}.box1 {grid-area: 3 / 7 / 6 / 8;
}.grid1L1 {grid-area: 7 / 1 / 8 / 2;
}
.grid1L2 {grid-area: 6 / 1 / 7 / 2;
}
.grid1L3 {grid-area: 5 / 1 / 6 / 2;
}.grid1C1 {grid-area: 7 / 1 / 8 / 2;
}
.grid1C2 {grid-area: 6 / 1 / 7 / 2;
}
.grid1C3 {grid-area: 5 / 1 / 6 / 2;
}
.grid1C4 {grid-area: 7 / 2 / 8 / 3;
}
.grid1C5 {grid-area: 6 / 2 / 7 / 3;
}
.grid1C6 {grid-area: 5 / 2 / 6 / 3;
}
.grid1C7 {grid-area: 4 / 2 / 5 / 3;
}
.grid1C8 {grid-area: 3 / 2 / 4 / 3;
}
.grid1C9 {grid-area: 2 / 2 / 3 / 3;
}
.grid1C10 {grid-area: 1 / 2 / 2 / 3;
}
</style>

相关文章:

【CSS】 Grid布局:现代网页设计的基石

引言 最近接到一个网页布局比较复杂的页面&#xff0c;看了半天还是决定用grid布局来写&#xff0c;记录一下 布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局&#xff0c;它让设计师和开发者能够更直观、更灵活地控制网页的结构。…...

jQuery UI API 文档

关于《jQuery UI API 文档》&#xff0c;我找到了一些有用的信息。jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。如果您是 jQuery 新手&#xff0c;建议您先查看 jQuery 教程。目前&#xff0c;我找到的资料主要是关于 jQuery UI 1.10 版…...

盘点2024年大家都在用的录屏工具

现在录屏工具的使用范围越来越广了。我的深切体验是有很多人愿意为知识付费了&#xff0c;但是到线下培训的话很多人时间不一定能协调的来&#xff0c;这就导致涌现了不少的录屏课程。这次我们来探讨下要怎么录屏才能呈现更好的效果。 1.福昕录屏大师 链接达达&#xff1a;ww…...

【大数据】探索怎么从一段话中解析关键信息(寄件人相关信息)

本文由ChatGPT生成&#xff0c;主要用于学习&#xff0c;大家有疑问请及时提出。 使用NLP实现文本信息解析功能&#xff1a;以提取姓名、地址和电话号码为例 在这个博客中&#xff0c;我们将通过自然语言处理&#xff08;NLP&#xff09;技术来实现一个简单的文本信息解析功能…...

初学者指南:MyBatis 入门教程

主要介绍了Mybatis的基本使用、JDBC、数据库连接池、lombok注解&#xff01; 文章目录 前言 什么是Mybatis? 快速入门 使用Mybatis查询所有的用户信息 配置SQL提示 JDBC介绍 Mybatis 数据库连接池 lombok 总结 前言 主要介绍了Mybatis的基本使用、JDBC、数据库连接…...

reader-lm:小模型 html转markdown

参考&#xff1a; https://huggingface.co/jinaai/reader-lm-0.5b 在线demo&#xff1a; https://colab.research.google.com/drive/1wXWyj5hOxEHY6WeHbOwEzYAC0WB1I5uA#scrollTo0mG9ISzHOuKK 输入网址&#xff1a;https://www.galaxy-geely.com/E5 结果&#xff1a; 代码…...

进击J6:ResNeXt-50实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的&#xff1a; 阅读ResNeXt论文&#xff0c;了解作者的构建思路对比之前介绍的ResNet50V2、DenseNet算法使用ResNeXt-50算法完成猴痘病识别 二、实…...

新代机床采集数据

新代集團1995年成立於台灣新竹,事業版圖遍布全球,以台灣為中心向外發展,據點橫跨歐洲、美洲、亞洲三大洲。新代長期深耕於機床控制器的軟體及硬體技術研發,專注於運動控制領域,目前已成為亞太市場中深具影響力的控制器領導品牌之一。主營產品包括:機床數控系統、伺服驅動…...

景联文科技:专业数据标注公司,推动AI技术革新

数据标注作为AI技术发展的重要支撑&#xff0c;对于训练高质量的机器学习模型以及推动应用领域的创新具有不可替代的作用。 景联文科技作为专业的数据标注公司&#xff0c;致力于提供专业的数据标注服务&#xff0c;帮助客户解决AI链条中的数据处理难题&#xff0c;共同推动人工…...

k8s以及prometheus

#生成控制器文件并建立控制器 [rootk8s-master ~]# kubectl create deployment bwmis --image timinglee/myapp:v1 --replicas 2 --dry-runclient -o yaml > bwmis.yaml [rootk8s-master ~]# kubectl expose deployment bwmis --port 80 --target-port 80 --dry-runclient…...

android 权限说明

1. 权限的定义语法 注&#xff1a; 任何应用都可以定义权限 <permission 标签是定义权限 <uses-permission 标签是使用权限。 <permission android:description"string resource"android:icon"drawable resource"android:label"string res…...

<winsock>重叠IO模型

基于事件判断io完成 send程序 #include <stdio.h> #include <winsock2.h>#pragma comment(lib, "Ws2_32.lib") #pragma warning(disable : 4996)int main() {WSADATA wsaData;if (WSAStartup(MAKEWORD(2, 2), &wsaData) ! 0){printf("WSAStart…...

Android Tools | 如何使用Draw.io助力Android开发:从UI设计到流程优化

Android Tools | 如何使用Draw.io助力Android开发&#xff1a;从UI设计到流程优化 1. 引言 在Android开发中&#xff0c;视觉化设计与流程管理至关重要。虽然开发工具如Android Studio强大&#xff0c;但它并不适用于所有设计场景。Draw.io是一款免费的在线绘图工具&#xff…...

Java 每日一刊(第5期):变量守护者

前言 这里是分享 Java 相关内容的专刊&#xff0c;每日一更。 本期将为大家带来以下内容&#xff1a; 量子数据宇宙的变量守护者第一章&#xff1a;能源错配与基本数据类型第二章&#xff1a;引用类型与通讯网络的崩溃第三章&#xff1a;作用域冲突与系统崩溃终章&#xff1…...

【C++二分查找】2517. 礼盒的最大甜蜜度

本文涉及的基础知识点 C二分查找 贪心&#xff08;决策包容性) LeetCode 2517. 礼盒的最大甜蜜度 给你一个正整数数组 price &#xff0c;其中 price[i] 表示第 i 类糖果的价格&#xff0c;另给你一个正整数 k 。 商店组合 k 类 不同 糖果打包成礼盒出售。礼盒的 甜蜜度 是礼…...

【详解】数据库E-R图——医院计算机管理系统

题目 某医院病房计算机管理中需要如下信息&#xff1a; 科室&#xff1a;科室名&#xff0c;科室地址&#xff0c;科室电话&#xff0c;医生姓名 病房&#xff1a;病房号&#xff0c;床位号&#xff0c;所属科室名 医生&#xff1a;工作证号&#xff0c;姓名&#xff0c;性别&a…...

分类预测|基于改进的灰狼IGWO优化支持向量机SVM的数据分类预测matlab程序 改进策略:Cat混沌与高斯变异

分类预测|基于改进的灰狼IGWO优化支持向量机SVM的数据分类预测matlab程序 改进策略&#xff1a;Cat混沌与高斯变异 文章目录 一、基本原理原理流程1. **定义目标函数**2. **初始化GWO**3. **评估适应度**4. **更新狼的位置**5. **更新狼的等级**6. **重复迭代**7. **选择最佳解…...

圆锥曲线练习

设 A ( x 1 , y 1 ) , B ( x 2 , y 2 ) A\left( x_{1}, y_{1} \right), B\left( x_{2}, y_{2} \right) A(x1​,y1​),B(x2​,y2​) l : y k ( x 2 ) l: y k\left( x2 \right) l:yk(x2) 显然 y 0 y0 y0符合题意 当 k ≠ 0 k\neq 0 k0 联立 l l l和 C C C ( k 2 1 2 ) x…...

STM32时钟树

1 什么是时钟 2 时钟数简图...

NX—UI界面生成的文件在VS上的设置

UI界面保存生成的三个文件 打开VS创建项目&#xff0c;删除自动生成的cpp文件&#xff0c;将生成的hpp和cpp文件拷贝到项目的目录下&#xff0c;并且在VS项目中添加现有项目。 修改VS的输出路径&#xff0c;项目右键选择属性&#xff0c;链接器中的常规&#xff0c;文件路径D:…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...