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

flex加 grid 布局笔记

<style>
    .flex-container {
        display: flex;
        height: 100%; /* 设置容器的高度 */
    }
    .wide {
        display: flex;
        padding: 10px;
        border: 1px solid lightgray;
        text-align: center;
        justify-content: center; /* 在水平方向上居中 */
        align-items: center; /* 在垂直方向上居中 */
        width: 50%;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 创建两列 */
        grid-template-rows: repeat(2, 1fr); /* 创建两行 */
        gap: 50px; /* 设置列和行之间的间距 */
    }

    .grid-item {
        width: 140px;
        height: 140px;
        background-color: white;
        padding: 20px;
        text-align: center;
        display: grid;
        border: 1px solid #4974A4;
        place-items: center;
       
    }
        .active {
            background-color: #4974A4;
            color: #fff;
        }
    .grid-item {
        transition: background-color 0.3s ease;
    }
        .grid-item:hover:hover {
            background-color: #4974A4;
            color: #fff;
        }
       
        /*.grid-item img {
            width: 140px;
            height: 100px;
        }*/
    .container {
        display: flex;
        flex-direction: column; /* 竖向排列 */
        align-items: center; /* 居中对齐 */
        height: 300px; /* 设置容器高度 */
        border: 1px solid #ccc; /* 边框用于可视化 */
    }

    .item {
        width: 300px;
        height: 50px;
        margin: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #4974A4;
        color: black;
    }
        .item:hover {
            background-color: #4974A4;
            color: #fff;
        }

//灰色线
     .gray-hr {
            border: none;
            border-top: 1px solid #ccc; /* 灰色边框线 */
            margin: 10px 0; /* 可以调整线的上下间距 */
        }
</style>
<div class="flex-container">
    <div class="wide">
        <div class="grid-container" id="typeContainer">
            
                        <div class="grid-item" οnclick="typeClick(@ele.Code)" id="type_@ele.Code">

                           
                                <img src="@ele.STRING_1"  />
                                <span style=" font-size: 16px; font-weight:bold">@ele.TextValue</span>
                           

                        </div>
                    }
                    }
                }


            </div>
    </div>
    <div class="wide"  id="typeChildContainer" style="display: none; flex-direction: column"><div  id="containers"></div>
                                                                    </div>
</div>

相关文章:

flex加 grid 布局笔记

<style> .flex-container { display: flex; height: 100%; /* 设置容器的高度 */ } .wide { display: flex; padding: 10px; border: 1px solid lightgray; text-align: center; justify-content: …...

最高评级!华为云CodeArts Board获信通院软件研发效能度量平台先进级认证

9月26日&#xff0c;华为云CodeArts Board获得了中国信通院《云上软件研发效能度量分级模型》的先进级最高级评估&#xff0c;达到了软件研发效能度量平台评估的通用效能度量能力、组织效能模型、项目效能模型、资源效能模型、个人效能模型、研发效能评价模型、项目管理域、开发…...

图像上传功能实现

一、后端 文件存放在images.path路径下 package com.like.common;import jakarta.servlet.ServletOutputStream; import jakarta.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annot…...

03_Node.js模块化开发

1 Node.js的基本使用 1.1 NPM nodejs安装完成后&#xff0c;会跟随着自动安装另外一个工具npm。 NPM的全称是Node Package Manager&#xff0c;是一个NodeJS包管理和分发工具&#xff0c;已经成为了非官方的发布Node模块&#xff08;包&#xff09;的标准。 2020年3月17日&…...

Nginx支持SNI证书,已经ssl_server_name的使用

整理了一些网上的资料&#xff0c;这里记录一下&#xff0c;供大家参考 什么是SNI&#xff1f; 传统的应用场景中&#xff0c;一台服务器对应一个IP地址&#xff0c;一个域名&#xff0c;使用一张包含了域名信息的证书。随着云计算技术的普及&#xff0c;在云中的虚拟机有了一…...

Hive【Hive(六)窗口函数】

窗口函数&#xff08;window functions&#xff09; 概述 定义 窗口函数能够为每行数据划分 一个窗口&#xff0c;然后对窗口范围内的数据进行计算&#xff0c;最后将计算结果返回给该行数据。 语法 窗口函数的语法主要包括 窗口 和 函数 两个部分。其中窗口用于定义计算范围…...

Met no ‘TRANSLATIONS’ entry in project

这里写自定义目录标题 问题描述&#xff1a;解决方法&#xff1a; 问题描述&#xff1a; 多工程项目&#xff0c;执行完update Translation生成了.ts文件&#xff0c;也用翻译工具翻译完了&#xff0c;执行release时&#xff0c;报错“Met no ‘TRANSLATIONS’ entry in proje…...

Leetcode901-股票价格跨度

一、前言 本题基于leetcode901股票价格趋势这道题&#xff0c;说一下通过java解决的一些方法。并且解释一下笔者写这道题之前的想法和一些自己遇到的错误。需要注意的是&#xff0c;该题最多调用 next 方法 10^4 次,一般出现该提示说明需要注意时间复杂度。 二、解决思路 ①…...

“传统文化宣传片+虚拟人动捕设备”前景如何?

在数字化时代的发展下&#xff0c;动捕设备的加入&#xff0c;让传播传统文化的虚拟人更具生动表现&#xff0c;拉近人们与传统文化的距离&#xff0c;通过虚拟人动作捕捉动画宣传片&#xff0c;引起更多人对传统文化的关注与传承。 *图片源于网络 深圳文博会创意短片《嗨ICIF…...

节假日moc服务数据:解决用户99%的IT问题

Hi~ 伙伴们&#xff0c;这个国庆假期过得怎么样? 节后第一个工作日如期而至&#xff0c; 忙碌是消除倦怠的最佳良药。 回顾8天假日moc工程师的一组服务数据&#xff0c; 处理事件184起&#xff0c;工单23条。 其中&#xff0c;较为典型案例如下&#xff1a; 1、福建某附属医院…...

WOL唤醒配置(以太网、PHY、MAC)

目录 wol 以太网 MAC PHY RMII 通信配置 总结 wol Wake-on-LAN简称WOL&#xff0c;WOL&#xff08;网络唤醒&#xff09; 是一种标准网络协议&#xff0c;它的功效在于让已经进入休眠状态或关机状态的计算机&#xff0c;透过局域网&#xff08;多半为以太网&#xff…...

MySQL复制,约束条件,查询与安全控制

MySQL之复制 复制表 我有一个表 mysql> show tables; ------------------ | Tables_in_school | ------------------ | student | ------------------mysql> select * from student; -------------------------------------------- | id | name | sec |…...

Java ES 滚动查询

滚动查询&#xff08;Scroll Query&#xff09;是 Elasticsearch 提供的一种机制&#xff0c;用于处理大量数据的查询。它允许你在多个请求之间保持“游标”&#xff0c;以便在后续请求中获取更多的结果。 以下是滚动查询的基本工作原理&#xff1a; 1 初始查询: 客户端发送一…...

机器学习算法基础--KNN算法分类

文章目录 1.KNN算法原理介绍2.KNN分类决策原则3.KNN度量距离介绍3.1.闵可夫斯基距离3.2.曼哈顿距离3.3.欧式距离 4.KNN分类算法实现5.KNN分类算法效果6.参考文章与致谢 1.KNN算法原理介绍 KNN&#xff08;K-Nearest Neighbor&#xff09;工作原理&#xff1a; 在一个存在标签的…...

深入探究 C++ 编程中的资源泄漏问题

目录 1、GDI对象泄漏 1.1、何为GDI资源泄漏&#xff1f; 1.2、使用GDIView工具排查GDI对象泄漏 1.3、有时可能需要结合其他方法去排查 1.4、如何保证没有GDI对象泄漏&#xff1f; 2、进程句柄泄漏 2.1、何为进程句柄泄漏&#xff1f; 2.2、创建线程时的线程句柄泄漏 …...

BLE协议栈1-物理层PHY

从应届生开始做ble开发也差不读四个月的时间了&#xff0c;一直在在做上层的应用&#xff0c;对蓝牙协议栈没有过多的时间去了解&#xff0c;对整体的大方向概念一直是模糊的状态&#xff0c;在开发时也因此遇到了许多问题&#xff0c;趁有空去收集了一下资料来完成了本次专栏&…...

光伏储能直流系统MATLAB仿真(PV光伏阵列+Boost DCDC变换器+负载+双向DCDC变换器+锂离子电池系统)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

C++三大特性——继承(上篇)

文章目录 目录 一、继承的概念及定义 1.1继承的概念 1.2 继承定义 1.2.1定义格式 1.2.2继承关系和访问限定符 1.2.3继承基类成员访问方式的变化 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 一、继承的概念及定义 1.1继承的概念 继承(inherita…...

docker系列(9) - docker-compose

文章目录 9. compose编排9.1 介绍9.2 安装9.3 compose常用命令9.4 实战Springboot部署9.4.1 准备组件配置文件9.4.1.1 redis的配置文件9.4.1.2 MySQL的配置文件9.4.1.3 SpringBoot打包文件 9.4.2 准备docker-compose.yml9.4.3 启动服务9.4.4 测试验证 9.5 实战ElasticsearchKib…...

Vue中如何进行日历展示与操作

在Vue中创建交互式日历应用 在Web开发中&#xff0c;创建一个交互式的日历应用是一项常见的任务。Vue.js作为一个流行的JavaScript框架&#xff0c;提供了许多便捷的工具和组件来简化日历的开发。本文将介绍如何使用Vue来创建一个简单但功能强大的日历应用&#xff0c;包括展示…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...