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

【CSS】常见

一. 溢出隐藏

1.1 单行文本溢出

.content{max-width:200px; 	/* 定义容器最大宽度 */overflow:hidden; 	/* 隐藏溢出的内容 */text-overflow:ellipsis;	/* 溢出部分...表示 */white-space: nowrap;	/* 确保文本在一行内显示 */
}

问题:display:flex 和 ellipsis 冲突
解决:把flex布局和ellipsis分别放在两个容器内

<div class="flex-content"><div class="overflow-ellipsis"><div>要展示的内容文本/数组(遍历此div)</div></div>
</div>.flex-content{display:flex;justify-content: space-between;align-items: center;
}
.overflow-ellipsis{max-width: 600px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

1.2 多行文本溢出

.content{/*! autoprefixer: off */-webkit-box-orient: vertical;	/* 文本垂直排列 *//* autoprefixer: on */-webkit-line-clamp: 2;	/* 指定显示行数 */	display: -webkit-box;	/* 兼容性 盒模型 */overflow: hidden;	/* 多余部分隐藏 */
}

① /*! autoprefixer: off /和/ autoprefixer: on *是为了解决 -webkit-box-orient: vertical丢失问题
② display: -webkit-box;与overflow: hidden;一起使用来创建多行文本溢出的省略号

1.3 y轴滚动条溢出隐藏,可查看所有内容但不显示滚动条

.content{min-height: calc(73vh);		max-height: calc(80vh); /* 超过这个高度的内容会被隐藏 *//* 隐藏对应浏览器滚动条:firefox 及IE 10+ */scrollbar-width: none;-ms-overflow-style: none;overflow-y: auto; /* 自由滑动查看全部内容 */  
}.content::-webkit-scrollbar {/* Chrome Safari */display: none;	
}

二. 居中对齐

2.1 水平居中

2.1.1 width 固定,height不设
<div class="content">水平居中
</div>.content{width: 1200px; /* 百分比宽度也行,例 50% */margin: 0 auto;background-color: aqua; /*为了显示该盒子而设置的背景颜色*/
}

在这里插入图片描述

2.1.2 width不固定,height不设
<div class="content">水平居中
</div>.content{text-align:center;background-color: aqua; /*为了显示该盒子而设置的背景颜色*/
}

三. 设置图片

1.1 template中设置

<img :src="require('@/assets/award/activity-1.png')" />

1.2 style中设置

background-image: url("~@/assets/award/activity-1.png");

1.3 背景图渐变(一半白一半图)

1.1.1 单个渲染
  1. css
.backImg{background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 50%),url(~@/assets/award/activity-1.png);
}
  1. 渲染结果
    在这里插入图片描述
1.1.2 动态渲染
  1. 实现
 <div v-for="(item, index) in  AwardYearList " :key="index" :style="{background: `linear-gradient(to left, rgba(255, 255, 255, 0), #fff 40%),url(${require('@/assets/award/' + item.img)})`}">
</div>
  1. 数据
    在这里插入图片描述 3. 渲染结果
    在这里插入图片描述

相关文章:

【CSS】常见

一. 溢出隐藏 1.1 单行文本溢出 .content{max-width:200px; /* 定义容器最大宽度 */overflow:hidden; /* 隐藏溢出的内容 */text-overflow:ellipsis; /* 溢出部分...表示 */white-space: nowrap; /* 确保文本在一行内显示 */ }问题&#xff1a;display:flex 和 ellipsis 冲…...

Django实战

一、开发登录表单 def login_form(request):html <html><body><form method"post">用户名:<input name "username" type"text"></input></br>密码&#xff1a;<input name "password" type…...

redis(1)

文章目录 一、redis基础redis简介redis 特性单线程redis 对比 memcachedredis 典型应用场景 二、redis安装及连接yum安装redis查看yum仓库redis版本yum安装 redis 编译安装 redis编译安装前台启动redis启动多实例解决启动时的三个警告提示创建 redis 用户编辑 redis 服务器启动…...

【RTP】webrtc 学习2: webrtc对h264的rtp打包

切片只是拷贝帧的split的各个部分到新的rtp 包的封装中。并没有在rtp包本身标记是否为关键帧FU-A 切片 输入的H.264 数据进行split :SplitNalu SplitNalu : 按照最大1200字节进行切分 切分后会返回一个数组 对于FU-A :split的数据总大小是 去掉一个字节的nalu header size …...

【搜索术】代码阅读理解学习笔记

学习资料 《理解源代码》 1 静态阅读 1.1 目标结构 常见目录名含义docs项目文档examples示例代码...

vue 打包下载多层zip文件

npm install jszip npm install file-saverimport JSZip from "jszip"; import FileSaver from "file-saver"; import {Message} from "view-design";/*** 下载文件 传数组* fileList* [* {* type:file,* name:17034953113790548.png,…...

Flink实战五_状态机制

接上文&#xff1a;Flink实战四_TableAPI&SQL 在学习Flink的状态机制之前&#xff0c;我们需要理解什么是状态。回顾我们之前介绍的很多流计算的计算过程&#xff0c;有些计算方法&#xff0c;比如说我们之前多次使用的将stock.txt中的一行文本数据转换成Stock股票对象的ma…...

SQL中having与where的区别 简单明了

having子句与where都是设定条件筛选的语句&#xff0c;有相似之处也有区别。 having与where的区别: having是在分组后对数据进行过滤 where是在分组前对数据进行过滤 having后面可以使用聚合函数 where后面不可以使用聚合 在查询过程中执行顺序&#xff1a;from>where>g…...

Transformer 自然语言处理(二)

原文&#xff1a;Natural Language Processing with Transformers 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第五章&#xff1a;文本生成 基于 Transformer 的语言模型最令人不安的特点之一是它们生成的文本几乎无法与人类写的文本区分开。一个著名的例子是 Ope…...

软件测试之软件缺陷管理

什么是软件缺陷 标准的定义&#xff1a;从产品内部看&#xff0c;缺陷是软件产品开发或维护过程中存在的错误、毛病等各种问题&#xff1b;从产品外部看&#xff0c;缺陷是系统所需要实现的某种功能的失效或违背 软件缺陷的生命周期 一个缺陷的正常生命周期是 新建&#xff…...

分布式锁(Distributed Lock)介绍(基于数据库(mysql);基于缓存(redis);基于ZooKeeper等分布式协调服务)

文章目录 分布式锁介绍1. 分布式锁的工作原理1.1 锁的基本概念1.2 工作机制 2. 分布式锁的实现方式2.1 基于数据库的分布式锁2.2 基于Redis的分布式锁2.3 基于ZooKeeper的分布式锁 3. 分布式锁的挑战3.1 死锁问题3.2 锁粒度问题粗粒度锁细粒度锁锁粒度的选择 3.3 锁的公平性问题…...

10 ISIS 基础 报文 状态

10 ISIS 基础 报文 状态 09 ISIS 大纲-CSDN博客 •看完本篇博客,您将能知道以下内容: ▫描述IS-IS的基本概念 ▫描述IS-IS的工作原理 ▫描述IS-IS与OSPF的差异 ▫实现IS-IS的常用配置 ▫实现 ISIS 的常用到的认证...

Python第三方扩展库Matplotlib

Python第三方扩展库Matplotlib Matplotlib 是第三方库&#xff0c;不是Python安装程序自带的库&#xff0c;需要额外安装&#xff0c;它是Python的一个综合性的绘图库&#xff0c;提供了大量的绘图函数用于创建静态、动态、交互式的图形和数据可视化&#xff0c;可以帮助用户创…...

单例模式有几种写法?请谈谈你的理解?

为什么有单例模式&#xff1f; 单例模式&#xff08;Singleton&#xff09;&#xff0c;也叫单子模式&#xff0c;是一种常用的软件设计模式。在应用这个模式时&#xff0c;单例对象的类必须保证只有一个实例存在。许多时候整个系统只需要拥有一个全局对象&#xff0c;这样有利…...

帕鲁幻兽 一键开服 简单到爆 教你10秒实现 帕鲁幻兽私服联机服务器搭建

幻兽帕鲁是一款非常受欢迎的游戏&#xff0c;最近在社区中呈现了爆火的趋势&#xff0c;在线人数已经突破了百万级别。由于社区的热度不断上升&#xff0c;官方服务器开始出现了不稳定和卡人闪退的情况。搭建一个私人服务器可能是一个最稳定而舒适的解决方案。通过搭建私人服务…...

自动化报告pptx-python|如何将pandas的表格写入PPTX(二)

本篇延续:自动化报告的前奏|使用python-pptx操作PPT(一) 因为在pptx-python中使用table,需要单个cell逐一输入,于是在想有没有pandas可以直接读入的方式, 有两个开源项目有类似的功能: PandasToPowerpointmspandas其中mspandas写的比较复杂,PandasToPowerpoint比较易懂…...

Ruby详解及安装流程

文章目录 一、Ruby详解二、Ruby安装流程三、Ruby案例四、Ruby常见问题五、Ruby优缺点六、热门文章 一、Ruby详解 Ruby是一种高级编程语言&#xff0c;具有简单易学、灵活多变、优雅美丽的语法特点。它是一种面向对象的编程语言&#xff0c;具有动态类型和解释型语言的特性。在…...

免费的ChatGPT网站 ( 7个 )

ChatGPT的核心功能是基于用户在输入时的语言或文本生成相应的回复或继续内容。此外&#xff0c;它还能够完成多种任务&#xff0c;如撰写邮件、视频脚本、文案、翻译、代码编写以及撰写论文等。 博主归纳总结了7个国内非常好用&#xff0c;而且免费的chatGPT网站&#xff0c;AI…...

python异步编程(1)——理论篇

1.理解多线程 当启动一个Python程序时&#xff0c;它会作为一个单独的进程运行在操作系统中。进程是操作系统分配资源&#xff08;如内存和处理器时间&#xff09;的基本单位。每个Python程序启动时&#xff0c;都会创建一个主线程。如果没有在代码中明确创建其他线程&#xf…...

PyTorch复现网络模型VGG

VGG 原论文地址&#xff1a;https://arxiv.org/abs/1409.1556VGG是Visual Geometry Group&#xff08;视觉几何组&#xff09;的缩写&#xff0c;它是一个在计算机视觉领域中非常有影响力的研究团队&#xff0c;主要隶属于牛津大学的工程系和科学系。VGG以其对卷积神经网络&am…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...