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

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

news 2026/5/26 20:23:19

                 目录

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

Android 11开发避坑：为什么你的App获取的Wifi MAC地址总是变？手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

编程新知 2026/5/26 3:11:57

Unity主题系统设计：状态驱动的主题抽象与自动注入方案

1. 这不是换个颜色那么简单&#xff1a;为什么Unity项目里“换肤”总在发布前夜崩盘&#xff1f;你有没有经历过这样的场景&#xff1a;美术同学凌晨两点发来一套新主题资源包&#xff0c;UI设计师说“这次配色更符合品牌调性”&#xff0c;产品说“上线前必须支持深色模式”&a…...

编程新知 2026/5/26 1:27:06

Unity发行版DLL调试实战：DnSpy无源码IL级断点指南

1. 这不是“反编译”&#xff0c;而是Unity游戏开发者的日常调试手段你有没有遇到过这样的情况&#xff1a;接手一个Unity发行版游戏&#xff0c;想快速验证某个功能逻辑是否按预期执行&#xff0c;或者排查一个偶发的崩溃&#xff0c;但手头只有打包后的Assembly-CSharp.dll&a…...

编程新知 2026/5/26 0:10:05

基于ESP32的智能电池充电器设计：多化学体系支持与模块化架构

1. 项目概述&#xff1a;打造一台全能的“电池医生”手头攒了一堆不同化学体系的电池&#xff0c;从航模用的4S锂聚合物电池&#xff0c;到应急灯里的12V铅酸电池&#xff0c;再到各种工具里的镍氢、锂离子电池&#xff0c;每次充电都得翻出好几个不同的充电器&#xff0c;桌面…...

编程新知 2026/5/26 0:01:57

基于MAX78000的医疗紧急呼叫系统：边缘AI与低功耗设计实战

1. 项目概述与核心价值大家好&#xff0c;我是Victor Hugo&#xff0c;一名电子工程师。今天我想和大家分享一个我最近完成并参与设计竞赛的项目&#xff1a;一个基于MAX78000 FTHR开发板的医疗紧急呼叫辅助系统。这个项目的核心&#xff0c;不是从零开始造一个新轮子&#xff…...

编程新知 2026/5/25 23:00:46

告别硬编码！在UE5.1里用蓝图动态配置MySQL连接参数（控件蓝图实战）

动态配置MySQL连接&#xff1a;UE5.1控件蓝图的工程化实践在游戏开发中&#xff0c;数据库连接往往是项目架构中不可或缺的一环。传统硬编码方式虽然简单直接&#xff0c;却带来了维护困难、安全性差、灵活性低等一系列问题。本文将深入探讨如何在UE5.1中构建一个完全动态化的M…...

编程新知 2026/5/25 22:26:31

16个分片+2副本：pg_shard的master_create_worker_shards最佳实践

16个分片2副本&#xff1a;pg_shard的master_create_worker_shards最佳实践 【免费下载链接】pg_shard ATTENTION: pg_shard is superseded by Citus, its more powerful replacement 项目地址: https://gitcode.com/gh_mirrors/pg/pg_shard pg_shard作为PostgreSQL的分…...

编程新知 2026/5/25 21:31:51

企业云盘签章技术方案：从数字签名原理到工程落地

背景 电子签章在企业云盘中的落地&#xff0c;不只是一个"上传盖章图片"的功能实现。本质上&#xff0c;它是一套涉及数字签名、PKI基础设施、文档完整性校验的综合性技术方案。本文从技术选型角度&#xff0c;说清楚企业云盘内置签章需要解决哪些问题、主流实现方案…...

编程新知 2026/5/25 20:49:11

UE5 Cesium项目里，如何把默认的飞行Pawn换成建筑漫游Pawn？保姆级迁移教程

UE5 Cesium项目建筑漫游Pawn迁移实战&#xff1a;从飞行模式到精细化浏览的完整指南当你在UE5中结合Cesium插件构建数字孪生场景时&#xff0c;DynamicPawn提供的全球飞行体验令人印象深刻。但当视角聚焦到单体建筑或室内空间时&#xff0c;那种仿佛操控无人机般的操作方式就显…...

编程新知 2026/5/25 17:06:20

Arduino土壤湿度监测仪制作：从传感器原理到自动灌溉实现

1. 项目概述&#xff1a;用Arduino Uno和LCD屏打造你的土壤湿度监测仪作为一个喜欢在阳台种点番茄、辣椒的业余园丁&#xff0c;我经常为浇水这事儿头疼。浇多了怕烂根&#xff0c;浇少了又怕旱着&#xff0c;光靠手指插土里感觉&#xff0c;实在是不准。后来玩上了Arduino&…...

编程新知 2026/5/25 17:04:13