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

css三角，鼠标样式，溢出文字

news 2025/7/22 15:31:22

                 目录

css三角

鼠标样式

例子：页码模块

溢出文字表示方式

margin负值运用

css三角强化

css三角

css三角中：line-height：0和font-size：0是防止兼容性的问题

jd {position: relative;width: 120px;height: 249px;background-color:pink;
}.jd span {position:absolute;right:15px;top:-10px;width:0;height:0;line-height:0;font-size:0;
}

鼠标样式

1 更改用户鼠标样式:

<ul>
<li style="cursor:default;"></li>
<li style="cursor:pointer;"></li>
<li style="cursor:move;"></li>
<li style="cursor:text;"></li>
</ul>

2 去除输入框表格蓝色边框outline
 

input,textarea {outline: none;
}
<input type="text">

3 让textarea无法修改大小

textarea {resize:none;
}
<textarea name="" id=""></textarea>

4 vertical-align 设置图片或者表单和文字垂直对齐

vertical-align:baseline默认父元素基线对齐；

top,middle,bottom

5 vertical-align: bottom

vertical-align只针对行内或者行内块元素有效
文本域属于行内块元素

textarea {vertical-align: middle;默认是基线对齐}

这样能使得当左边是图片右边是文字时候，文字在左边图片中间的位置

bug：图片底侧会有空白缝隙，由于行内块元素和文字基线对齐
解决： 1 给图片添加vertical-align：middle，top，bottom
2 display: block

例子：页码模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box a {/* 必然有大小但是只有行内块才有大小 */display: inline-block;width: 36px;height: 36px;background: color #f7f7f7;/* 里面文字水平居中垂直居中去掉下划线 */border: 1px solid #ccc;text-decoration: none;line-height: 36px;text-align: center;color: black;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current {border: none;background-color: #fff;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {height: 40px;width: 45px;border: 1px solid #ccc;}</style>
</head><body><div class="box"><a href="#" class="prev">&lt;&lt;上一页</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">7</a><a href="#" class="next">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div></body></html>

溢出文字表示方式

溢出的文字省略号显示：
1 单行文本溢出显示省略号

white-space: nowrap;
强制一行内显示文本
overflow：hidden
超出部分隐藏
文字用省略号替代超出的部分
text-overflow:ellipsis;
 

<style>.ti {width: 40px;height: 40px;background-color: pink;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style><div class="ti">abcddddddddddddddd</div>


2 多行文本溢出显示省略号

display: -webkit-box;
弹性伸缩盒子模型显示
-webkit-line-clamp: 2;这表示省略号出现在第二行
设置或检索伸缩盒对象的子元素排列方式
-webkit-box-orient: vertival;

overflow:hidden;
text-oveflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

margin负值运用

后面盒子压住前面盒子

ul>li{$}*5<style>ul li {float: left;list-style: none;width: 200px;height: 200px;border: 2px solid red;margin-left: -2px;/* 这里是-2，因为边框是2px */}</style>

鼠标经过某个盒子后提高当前盒子的层级：

没有定位加相对定位，只能相对定位，其他定位不占位置，有定位，加z-index
position: relative;
border: 1px solid blue;
z-index:1;压住别的盒子

<style>ul li {position: relative;float: left;list-style: none;width: 200px;height: 200px;border: 2px solid red;margin-left: -2px;/* 这里是-2，因为边框是2px */}ul li:hover {border: 2px solid blue;z-index: 1;}</style>

 水平居中：行内块的父亲添加text-align:center

那么这个盒子里所有行内元素和行内块元素都会水平居中

css三角强化

.box {把上边框宽度调大border-top: 100px solid transparent;border-right: 50px solid blue;border-bottom: 0 solid blue;border-left:0 solid green;左边和下边边框宽度为0
}
简写：
width:0
height:0
border-color: transparent red transparent transparent
上右下左
border-style: solid;
border-width: 22px 8px 0 0;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .box {border-top: 100px solid transparent;border-right: 50px solid blue;border-bottom: 0 solid blue;border-left: 0 solid green;/* margin: 0 auto; *//* } */.price {width: 160px;height: 24px;border: 1px solid red;margin: 0 auto;line-height: 24px;text-align: center;}.miaosha {position: relative;float: left;width: 80px;height: 100%;background-color: palevioletred;text-align: center;}.miaosha i {position: absolute;right: 0;/* top: 0; */bottom: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;/* 上右下左 */border-style: solid;border-width: 24px 12px 0 0;}.origin {text-decoration: line-through;font-size: 12px;color: gray;}</style>
</head><body><div class="box"></div><div class="price"><span class="miaosha">$100<i></i></span><!--这个三角差点因为没放span里所以无法显示，而且想让三角贴着父容器即span显示，需要span加上relative而i加上absolute--><span class="origin">$200</span><!-- line-height继承的，两个span都要垂直居中，直接给他们父元素添加line-height --></div>


 

相关文章：

css三角，鼠标样式，溢出文字

目录 css三角 鼠标样式 例子&#xff1a;页码模块 溢出文字表示方式 margin负值运用 css三角强化 css三角 css三角中&#xff1a;line-height&#xff1a;0和font-size&#xff1a;0是防止兼容性的问题 jd {position: relative;width: 120px;height: 249px;background-…...

编程日记 2023/11/30 3:58:20

远程桌面访问MATLAB 2018B，提示License Manger Error -103，终极解决方案

通过远程桌面方位Windows Server系统下的MATLAB2018B&#xff0c;报错License Manger Error -103&#xff0c;Crack文件夹下的dll文件已经替换&#xff0c;同时也已经输出了lic文件&#xff0c;但是仍然无法打开。但是在本地桌面安装就没有问题。初步怀疑MATLAB的License使用机…...

编程日记 2023/11/30 3:57:19

Jmeter基础和概念

JMeter 介绍&#xff1a; 一个非常优秀的开源的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1a; …...

编程日记 2023/11/30 3:56:18

【Linux 带宽限速】trickle，限制docker 上传速度

限制docker 上传速度 然而&#xff0c;你可以使用第三方工具来实现这个目的。一个常用的工具是 trickle&#xff0c;它可以模拟网络带宽。 首先&#xff0c;你需要安装 trickle。在 Ubuntu 上&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-get install trickle然后…...

编程日记 2023/11/30 3:55:17

MindStudio学习记录三：推理应用开发 acl mindx sdk

1.推理应用流程 1.1.创建工程 1.2.模型转换 1.3代码开发 1.3.1ACL代码 1.3.2MindX SDK开发 可视化模块化设计 中间的图片与处理 是基于AIPP的可视化处理 1.5.编译 交叉编译 1.6.运行与调试 1.7 调优工具 profiling性能分析 2.开发举例 resnet-50 2.1 准备工程 2.2.准备模型…...

编程日记 2023/11/30 3:54:17

【RT-DETR改进】SIoU、GIoU、CIoU、DIoU、AlphaIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了RT-DETR的重大改进&#xff0c;特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体&#xff0c;如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU&#xff0c;还融合了“Alpha”思想&#xff0c;创造了一系列新的损失函数。这些组合形式的…...

编程日记 2023/11/30 3:53:16

【Linux】EVIOCGBIT

EVIOCGBIT(ev, len) 该怎么理解&#xff1f; 我们可以推断出&#xff0c;它是一个宏&#xff0c;它的前两个参数已经确定了&#xff0c;具体的功能由后两个参数(ev,len)来决定。Linux-4.9.88\include\uapi\linux\input.h #define EVIOCGBIT(ev,len) _IOC(_IOC_READ, E, 0x20 …...

编程日记 2023/11/30 3:52:14

鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式（十一）

一、Extend扩展组件样式 1、作用 前文提到可以使用Styles用于样式的扩展&#xff0c;在Styles的基础上&#xff0c;ArkTS语法还提供了Extend&#xff0c;⽤于扩展原生组件样式&#xff0c;包括Text、Button等等。 2、定义语法 Extend(UIComponentName) function functionNam…...

编程日记 2023/11/30 3:51:14

5V摄像机镜头驱动IC GC6208，可用于摄像机，机器人等产品中可替代AN41908

GC6208是一个镜头电机驱动IC摄像机和安全摄像机。该设备集成了一个直流电机驱动器的Iris的PID控制系统&#xff0c;也有两个通道的STM电机驱动器的变焦和对焦控制。 芯片的特点: 内置用于Iris控制器的直流电机驱动器 内置2个STM驱动程序&#xff0c;用于缩放和…...

编程日记 2023/11/30 3:50:13

PHP echo和print 语句

PHP 是通过 print 和 echo 语句来动态输出 HTML 内容&#xff0c;虽然 print 和 echo 语句两者的功能几乎是完全一样&#xff0c;但是还是有一点差别的。 在 PHP 中有两个基本的输出方式&#xff1a; echo 和 print。 本章节中我们会详细讨论两个语句的用法&#xff0c;并在实…...

编程日记 2023/11/30 3:49:12

ThinkPHP6.1 多应用模式的一些事儿

TP安装就不说了&#xff0c;直接从安装完成开始了。 安装多应用模式扩展 think-multi-app composer require topthink/think-multi-app删除 app 目录下的 controller 文件夹&#xff08;TP 是根据是否有这个文件夹来判断单应用模式还是多应用模式的&#xff09;。 创建应用 …...

编程日记 2023/11/30 3:48:11

redis-cluster集群模式

Redis-cluster集群 1 Redis3.0引入的分布式存储方案 2集群由多个node节点组成,redis数据分布在节点之中,在集群之中分为主节点和从节点3集群模式当中,主从一一对应,数据写入和读取与主从模式一样&#xff0c;主负责写&#xff0c;从只能读4集群模式自带哨兵模式&#xff0c;可…...

编程日记 2023/11/30 3:47:10

带你用uniapp从零开发一个仿小米商场_10. 首页开发

图标菜单栏开发 轮播图开发完成后,就是图标菜单栏了 可以看出这些图标都是一样的样式,所以可以勇哥flex布局让他们每个占百分之20 代码如下,既然都是一样的那就直接用个循环嵌套一下 data数据如下 同样,为了能让这段代码能在别的地方也用到,我直接把它封装成组件 <templ…...

编程日记 2023/11/30 3:45:07

常使用的定时任务

常使用的定时任务 一、 linux自带的定时任务 1、crontab 有这样一个需求&#xff1a;我们使用Java写一个工具jar包在系统空闲的时候去采集已经部署在Linux系统上的项目的一 些数据&#xff0c;可以使用 linux 系统的 crontab。 运行crontab -e&#xff0c;可以编辑定时器&…...

编程日记 2023/11/30 3:44:06

【人工智能Ⅰ】实验2：遗传算法

实验2 遗传算法实验 一、实验目的 熟悉和掌握遗传算法的原理、流程和编码策略&#xff0c;理解求解TSP问题的流程并测试主要参数对结果的影响&#xff0c;掌握遗传算法的基本实现方法。 二、实验原理 旅行商问题&#xff0c;即TSP问题&#xff08;Traveling Salesman Proble…...

编程日记 2023/11/30 3:43:06

Hadoop集群升级（3.1.3 -＞ 3.2.4）

升级前确认 旧版本&#xff1a;3.1.3 升级版本&#xff1a;3.2.4 旧版本安装路径&#xff1a;/ddhome/bin/hadoop/ 新版本安装路径&#xff1a;/ddhome/bin/hadoop-3.2.4 安装新版本hadoop 解压安装 # 解压安装包到相应目录下 tar -zxvf /ddhome/tools/hadoop-3.2.4.tar.gz…...

编程日记 2023/11/30 3:42:05

（一）基于高尔夫优化算法GOA求解无人机三维路径规划研究（MATLAB）

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…...

编程日记 2023/11/30 3:41:04

ESP32-Web-Server编程-建立第一个网页

ESP32-Web-Server编程-建立第一个网页 HTTP 简述 可能你每天都要刷几个短视频&#xff0c;打开几个网页来娱乐一番。当你打开一个网络上的视频或者图片时&#xff0c;其实际发生了下面的流程&#xff1a; 其中客户端就是你的浏览器啦&#xff0c;服务器就是远程一个存放视频或…...

编程日记 2023/11/30 3:40:03

csgo/steam游戏搬砖项目的五大认知误区

CSGO/steam游戏搬砖项目的5大认知误区 1、卡价越高越难选品&#xff1f;越没利润&#xff1f; 2、明明buff卖价《 steam求购价&#xff0c;为什么还能赚钱&#xff1f; 3、实名资料少就没法批量操作账号&#xff1f; 4、本金少就没法玩&#xff1f; 5、这个项目的风险是不是很大…...

编程日记 2023/11/30 3:39:02

ASCII sorting

描述 输入一个字符串&#xff0c;对其字符进行排序&#xff0c;输出其字符按ASCII码升序排列。 输入 无空格字符串 输出 按ASCII码升序输出其字符。 样例输入 and 样例输出 adn code&#xff08;c版本&#xff09; #include<stdio.h> #include<stdlib.h> // qs…...

编程日记 2023/11/30 3:38:01

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/7/17 10:58:17

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/15 9:11:45

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/16 15:20:29

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/7/22 8:21:19

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/7/16 3:21:13

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/7/18 19:58:47

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50