css 特别样式记录

一、

 这段代码神奇的地方在于, 本来容器的宽度只有1200px,如果不给img赋予宽度100%,那么图片 会超出盒子,如果给了img赋予了宽度100%,多个图片会根据自己图片大小的比例,去分完那1200px,如图二。

 <div className={styles.imgContainer_item}><img src={item.img} className={styles.imgContainer_item_img} alt="" /><div className={styles.imgContainer_item_bg}></div></div>---------------------.imgContainer {width: 1200px;height: 400px;display: flex;.imgContainer_item {.imgContainer_item_img {width: 100%;}.imgContainer_item_bg {}}}

------------------------------------

踩坑记录: 图1图二是我需要的 ;  如果 & 多加了一个空格 ,就会变成了给它下面的所有子元素增加:hover。  

 

  

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

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

相关文章

代码随想录算法训练营第五十七天| 392.判断子序列 115.不同的子序列

今日学习的文章链接和视频链接 392.判断子序列 https://programmercarl.com/0392.%E5%88%A4%E6%96%AD%E5%AD%90%E5%BA%8F%E5%88%97.html 115.不同的子序列 https://programmercarl.com/0115.%E4%B8%8D%E5%90%8C%E7%9A%84%E5%AD%90%E5%BA%8F%E5%88%97.html 自己看到题目的第…

ChatGPT AutoExpert:通过自定义指令,增强 GPT-4 和 GPT-3.5-Turbo 对话模型的功能

本心、输入输出、结果 文章目录 ChatGPT AutoExpert:通过自定义指令,增强 GPT-4 和 GPT-3.5-Turbo 对话模型的功能前言ChatGPT AutoExpert 简介ChatGPT AutoExpert 主要解决什么问题ChatGPT AutoExpert 开发者版本ChatGPT AutoExpert 通过一组 Prompt 来告诉 GPT 如何回复用户…

Java开发中List数据量大,需要分片批次处理

在开发过程中可能会遇到需要处理的List数据量过大&#xff0c;可以选择分批处理的方式对大量数据进行处理。 1、使用 apache 的工具包 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-collections4</artifactId><v…

【python函数】内置函数slice()用法解析

s l i c e {slice} slice 函数&#xff0c;功能如其名字&#xff0c;切片用的。   参数有仨&#xff0c; s l i c e ( s t a r t , s t o p , s t e p ) {slice(start, stop, step)} slice(start,stop,step)&#xff0c;分别为起始点 s t a r t {start} start &#xff0c;终…

xml schema中的all元素

说明 xml schema中的all元素表示其中的子元素可以按照任何顺序出现&#xff0c;每个元素可以出现0次或者1次。 https://www.w3.org/TR/xmlschema-1/#element-all maxOccurs的默认值是1&#xff0c;minOccurs 的默认值是1。 举例 <element name"TradePriceRequest&…

libplctag开源库的API介绍

文章目录 1 开源库概要2 API介绍2.1 Tag Model&#xff08;标签模型&#xff09;2.2 Status Codes&#xff08;状态码&#xff09;2.3 Versions and Checking Library Compatibility&#xff08;版本和检查库的兼容性&#xff09;2.4 Tag Life Cycle&#xff08;标签生命周期&a…

【STM32】---存储器,电源核时钟体系

一、STM32的存储器映像 1 文中的缩写 2 系统构架&#xff08;原理图&#xff09; 3. 存储器映像 &#xff08;1&#xff09;STM32是32位CPU&#xff0c;数据总线是32位的 &#xff08;2&#xff09;STM232的地址总线是32位的。&#xff08;其实地址总线是32位不是由数据总线是…

EV SSL数字证书贵吗

EVSSL证书通常适用于具有高需求的网站和企业&#xff0c;特别是涉及在线交易、金融服务、电子商务平台等需要建立用户信任的场景。大型企业、金融机构、电子商务平台等可以受益于使用EV证书来提升品牌形象和安全性。 申请EVSSL证书&#xff08;Extended Validation SSL certifi…

极光笔记 | 发送功能使用技巧分享

在全球化竞争激烈的商业环境中&#xff0c;高效的消息通知解决方案是企业成功的关键。EngageLab作为一家专注于海外市场的消息服务平台&#xff0c;为全球企业提供了一体化的消息通知解决方案。其中&#xff0c;EngageLab的国际邮件发送是其强大而灵活的产品服务之一。本文将与…

5.覆盖增强技术——PUCCHPUSCH

PUSCH增强方案的标准化工作 1.PUSCH重复传输类型A增强&#xff0c;包括两种增强机制&#xff1a;增加最大重复传输次数&#xff0c;以及基于可用上行时隙的重复传输次数技术方式。 2.基于频域的解决方案&#xff0c;包括时隙间/时隙内跳频的增强 3.支持跨多个时隙的传输块&…

苹果10月24日推送iOS 17.1:修复iPhone 12辐射超标问题 信号会更差

前段时间在iPhone 15系列发布的当天&#xff0c;法国突然宣布iPhone 12不能在该国销售&#xff0c;理由是iPhone 12超过了当地无线电频率暴露的法定范围。 根据法国监管机构ANFR(国家频率管理局)发布的最新消息&#xff0c;苹果将会在10月24日推送iOS 17.1正式版&#xff0c;届…

jmeter(三十三):阶梯线程组Stepping Thread Group,并发线程Concurrency Thread Group

Stepping Thread Group参数详解 this group will start:表示总共要启动的线程数;若设置为 100,表示总共会加载到 100 个线程first,wait for:从运行之后多长时间开始启动线程;若设置为 0 秒,表示运行之后立即启动线程then start:初次启动多少个线程;若设置为 0 个,表示…

php如何在header增加key,sign,timestamp?怎么鉴权?

在PHP中&#xff0c;您可以通过在HTTP请求的Header中增加Key、Sign和Timestamp等信息来进行安全性鉴权。 以下是一种基本的思路和示例&#xff0c;用于说明如何实现这种鉴权机制&#xff1a; 生成Key和Sign&#xff1a; 服务端和客户端之间共享一个密钥&#xff08;Key&#x…

移远通信携手MIKROE推出搭载LC29H系列模组的Click boards开发板,为物联网应用带来高精定位服务

近日&#xff0c;移远通信与MikroElektronika&#xff08;以下简称“MIKROE”&#xff09;展开合作&#xff0c;基于移远LC29H系列模组推出了多款支持实时动态载波相位差分技术&#xff08;RTK&#xff09;和惯性导航&#xff08;DR&#xff09;技术的Click Boards™ 开发板&am…

MySQL 8.0 OCP认证精讲视频、环境和题库之四 多实例启动 缓存、事务、脏读

一、配置第一个mysqld服务 1、编辑选项文件&#xff0c;指定以下选项&#xff1a; [mysqld] basedir/mysql80 datadir/mysql80/data1 socket/mysql80/data1/mysqld.sock pid-file/mysql80/data1/mysqld.pid log-error/mysql80/dat…

【计算机毕业设计】python在线课程培训学习考试系统637r7-PyCharm项目

使用说明 使用Navicat或者其它工具&#xff0c;在mysql中创建对应名称的数据库&#xff0c;并导入项目的sql文件&#xff1b; 使用PyCharm 导入项目&#xff0c;修改配置&#xff0c;运行项目&#xff1b; 将项目中config.ini配置文件中的数据库配置改为自己的配置&#xff0c;…

文本识别工具 TextSniper 免激活for Mac

TextSniper 是一款 macOS 平台上的文本提取工具&#xff0c;它可以将屏幕上的文字内容快速转换为可编辑的文本。无论是从图像、视频、PDF 文件还是其他类型的文档中提取文字&#xff0c;TextSniper 都提供了便捷的功能。 以下是 TextSniper 的一些主要特点和功能&#xff1a; …

云原生SIEM解决方案

云原生&#xff08;Cloud Native&#xff09;是一种基于云计算的软件开发和部署方法论&#xff0c;它强调将应用程序和服务设计为云环境下的原生应用&#xff0c;以实现高可用性、可扩展性和灵活性。 云原生的优势有哪些 高可用性&#xff1a;云原生可以实现应用程序的高可用…

XTU-OJ 1295-Flawless Prime

题目描述 如果一个素数&#xff0c;依次去掉最高位得到一个数&#xff0c;这个数无前导0&#xff0c;并仍是素数的话&#xff0c;我们称其为“无瑕素数”。 比如317是素数&#xff0c;去掉最高位3得到17仍然是素数&#xff0c;再去掉最高位1得到7&#xff0c;仍然是素数&#x…

一篇文章讲明白double、float丢失精度的问题

1.背景 1.10.1 1.2000000000000002 发现上面计算的值竟然和数学计算不一致 2. 问题 计算机是通过二进制计算的&#xff0c;如果我们在二进制的视角来看待上面问题&#xff0c;就很容易发现问题了。 例如&#xff1a;把「0.1」转成二进制的表示&#xff0c;然后还原成十进制&…