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

CSS-浮动文字环绕布局、隐藏属性display、overflow、三角形制作、鼠标样式

news 2026/5/11 14:56:07

文字环绕布局

CSS文字环绕布局是指在网页中让文字环绕在图片或其他元素周围的布局方式。这通常通过CSS中的float属性来实现。你可以将图片设置为float: left;或float: right;，然后在文本元素中使用clear属性来清除浮动，以确保文字不会覆盖图片。另外，你也可以使用CSS中的shape-outside属性来定义文字环绕的形状，使文字围绕着指定的形状排列。这样可以实现更加灵活和复杂的文字环绕效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字环绕</title><style>#img {float: left;}</style></head><body>我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我<img id="img" width="300px"height="200px" src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png">我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我 我我我我我我我我我我我我我我我我我我我我我我我我我我我</body></html>

在这里插入图片描述

隐藏属性display

CSS中的display属性用于控制元素的显示方式。通过display属性，可以隐藏元素或者改变元素的显示方式。常见的取值包括：

  • none：隐藏元素，元素不会在页面上占据空间。
  • block：将元素显示为块级元素，类似于<div>元素。
  • inline：将元素显示为内联元素，类似于<span>元素。
  • inline-block：将元素显示为内联块级元素，可以设置宽高等属性。
  • flex：将元素显示为弹性布局容器。
  • grid：将元素显示为网格布局容器。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>隐藏属性</title><style>.a {display: none;width: 100px;height: 100px;background-color: pink;}.b {width: 100px;height: 100px;background-color: bisque;}.c {float: right;background-color: aqua;}.c:hover .a {display: block;}</style>
</head>
<body><div class="b"></div><div class="c">出现了<div class="a"></div></div>
</body>
</html>

在这里插入图片描述

overflow

CSS样式overflow用于控制元素内容溢出时的处理方式。overflow属性有以下常见取值：

  • visible：默认值，内容会溢出到元素框之外。
  • hidden：内容会被裁剪，并且不可见。
  • scroll：如果内容溢出，会显示滚动条。
  • auto：如果内容溢出，会显示滚动条，只有在需要时才显示。
  • inherit：继承父元素的overflow属性。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>overflow学习</title><!-- overflow内容溢出隐藏处理关键字 --><style>.a {/* atuo参数需要的时候加滚动条 */overflow: auto;width: 200px;height: 200px;}.b {/* 溢出部分隐藏 */overflow: hidden;width: 200px;height: 200px;}.c {/* scroll参数无论什么情况都加滚动条 */overflow: scroll;width: 200px;height: 200px;}</style></head><body><div class="a">玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩</div><div class="b">玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩</div><div class="c">玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩</div></body></html>

在这里插入图片描述

三角形制作

在CSS中制作三角形通常可以通过利用元素的边框和宽高为0的技巧来实现。以下是一个简单的示例，展示如何使用CSS制作一个向下的三角形：

.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 50px solid #f00; /* 可以设置为透明，根据需要调整颜色 */
}

元素的宽度和高度都设置为0，然后通过设置三条边框的样式和颜色，利用边框的特性形成一个三角形。你可以根据需要调整边框的宽度和颜色，以及元素的大小来制作不同样式和方向的三角形。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三角形</title><style>.a {border-style: solid;width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}.d {width: 0;left: 70px;height: 0;position: absolute;bottom: 100px;border: 10px solid transparent;border-bottom-color: black;}.box {top: 100px;left: 100px;position: relative;width: 100px;height: 100px;border-radius: 10px;  /*圆角*/background-color: black;}</style></head><body><div class="a"></div><div class="box"><div class="d"></div></div></body></html>

在这里插入图片描述

鼠标样式

在CSS中，可以使用cursor属性来定义鼠标悬停在元素上时的样式。cursor属性有多种取值，常见的包括：

  • auto：浏览器自动选择合适的光标。
  • pointer：指示链接的光标，通常是一个手形。
  • crosshair：十字线光标，用于表示选择某个区域。
  • move：移动光标，表示可移动的对象。
  • text：文本光标，表示文本可编辑。
  • not-allowed：禁止符号光标，表示不允许操作。
  • alias：链接样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标样式</title>
</head><body><span style="cursor: alias;">我</span><span style="cursor: auto;">我</span><span style="cursor: not-allowed;">我</span><span style="cursor: context-menu;">我</span><span style="cursor: pointer;">我</span></body></html>

相关文章：

CSS-浮动文字环绕布局、隐藏属性display、overflow、三角形制作、鼠标样式

文字环绕布局 CSS文字环绕布局是指在网页中让文字环绕在图片或其他元素周围的布局方式。这通常通过CSS中的float属性来实现。你可以将图片设置为float: left;或float: right;&#xff0c;然后在文本元素中使用clear属性来清除浮动&#xff0c;以确保文字不会覆盖图片。另外&am…...

编程日记 2024/4/13 14:33:33

创建个人百度百科需要什么条件？

互联网时代&#xff0c;创建百度百科词条可以给个人带来更多的曝光和展现&#xff0c;相当于一个镀金的网络名片&#xff0c;人人都想上百度百科&#xff0c;但并不是人人都能创建上去的。 个人百度百科词条的创建需要满足一定的条件&#xff0c;今天伯乐网络传媒就来给大家聊聊…...

编程日记 2024/4/13 14:29:30

VR紧急情况模拟|V R体验中心加盟|元宇宙文旅

通过VR技术实现紧急情况模拟&#xff0c;提升安全应急能力&#xff01; 简介&#xff1a;面对突发紧急情况&#xff0c;如火灾、地震、交通事故等&#xff0c;正确的反应和应对能够有效减少伤害和损失。为了提高人们在紧急情况下的应急能力&#xff0c;我们借助先进的虚拟现实…...

编程日记 2024/4/13 14:28:29

【Django】必须登陆才能访问功能实现

一、直接使用session传递登录状态(不推荐&#xff0c;但能用) 这是最简单、最直接的方法。 1.登录视图添加标识 添加登录状态标识 request.session[is_logged_in] False def user_login(request):# 这是一个登录状态标识request.session[is_logged_in] Falseif request.…...

编程日记 2024/4/13 14:26:26

wps使用Latex编辑公式没有Latex formula

wps使用Latex编辑公式没有Latex formula 1. 下载CTEX2. 下载LaTeXEE3. 配置Miktex4. 配置latexee5. 用管理员权限运行latexeqedit.exe6. wps插入latex公式 1. 下载CTEX 下载CTEX网址&#xff0c;我下载的下图这个&#xff0c;下载完了之后运行exe文件安装ctex。 2. 下载LaTe…...

编程日记 2024/4/13 14:24:24

动态指定easyui的datagrid的url

动态指定easyui的datagrid的url 重新指定datagrid url的请求方法&#xff1a; $("#dg").datagrid("options").url"xxx"注意&#xff0c;如果直接使用 $(#btnq).bind(click, function(){ $(#dg).datagrid({ url: xxx });//重新指定url$(#dg)…...

编程日记 2024/4/13 14:20:18

数据可视化的3D问题

三维对象非常流行&#xff0c;但在大多数情况下会对解释图形的准确性和速度产生负面影响。 以下是对涉及 3d 的主要图形类型的回顾&#xff0c;并讨论了它们是否被认为是不好的做法。 1、3D 条形图&#xff1a;不要 这是一个 3d 条形图。 你可能很熟悉这种图形&#xff0c;因为…...

编程日记 2024/4/13 14:18:15

使用yolov8实现自动车牌识别（教程+代码）

该项目利用了一个被标记为“YOLOv8”的目标检测模型&#xff0c;专门针对车牌识别任务进行训练和优化。整个系统通常分为以下几个核心步骤&#xff1a; 数据准备&#xff1a; 收集包含车牌的大量图片&#xff0c;并精确地标记车牌的位置和文本信息。数据集可能包含各种环境下的…...

编程日记 2024/4/13 14:17:14

RabbitMQ的介绍

为什么使用 MQ&#xff1f; 流量削峰和缓冲 如果订单系统最多能处理一万次订单&#xff0c;这个处理能力在足够应付正常时段的下单&#xff0c;但是在高峰期&#xff0c;可能会有两万次下单操作&#xff0c;订单系统只能处理一万次下单操作&#xff0c;剩下的一万次被阻塞。我们…...

编程日记 2024/4/13 14:16:13

算法-快速幂

算法-快速幂 时间复杂度 O(logk) //求 m^k mod p int qmul(int m,int k,int p) {int res1%p;while(k){if(k&1){res*m;res%p;}m*m;m%p;k>>1;}return res; }...

编程日记 2024/4/13 14:15:12

Flutter中工厂方法的多种实现方法与使用场景分析

在Flutter应用程序的开发中&#xff0c;使用工厂方法是一种常见的设计模式&#xff0c;它可以帮助我们更好地组织和管理代码&#xff0c;提高代码的可读性和可维护性。本文将介绍Flutter中工厂方法的多种实现方法&#xff0c;并分析其在不同场景下的使用情况。 什么是工厂方法…...

编程日记 2024/4/13 14:14:11

kafka（六）——存储策略

存储机制 kafka通过topic作为主题缓存数据&#xff0c;一个topic主题可以包括多个partition&#xff0c;每个partition是一个有序的队列&#xff0c;同一个topic的不同partiton可以分配在不同的broker&#xff08;kafka服务器&#xff09;。 关系图 partition分布图 名称为t…...

编程日记 2024/4/13 14:10:07

Linux 内核：线程的实现

在linux中的线程是轻量级线程&#xff08;Light-Weight-process&#xff0c;LWP&#xff09; 文章目录 线程概念线程实现线程拓展 线程概念 线程分类 用户级线程内核级线程&#xff0c;没有用户空间&#xff0c;完全工作在内核中&#xff08;下图中没有[]的就是用户级线程&am…...

编程日记 2024/4/13 14:09:06

SonarQube 9.9.4 LTS社区版安装

目标 安装个SonarQube社区版. 安装SonarQube9.9.4 LTS社区版 https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube-9.9.4.87374.zip # 切换到安装目录 cd /opt # 下载安装包 sudo wget https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube…...

编程日记 2024/4/13 14:06:02

Laravel 11入门：使用ServBay打造高效开发环境

Laravel 11发布&#xff0c;改进了不少功能。 它引入了更加流畅的应用结构、每秒限速、健康路由等特性。 此外&#xff0c;Laravel还推出了第一方可扩展的WebSocket服务器Laravel Reverb&#xff0c;为你的应用提供强大的实时功能。 在今天的指南中&#xff0c;我将设置一个…...

编程日记 2024/4/13 14:05:00

Flink WordCount实践

目录 前提条件 基本准备 批处理API实现WordCount 流处理API实现WordCount 数据源是文件 数据源是socket文本流 打包 提交到集群运行 命令行提交作业 Web UI提交作业 上传代码到gitee 前提条件 Windows安装好jdk8、Maven3、IDEA Linux安装好Flink集群&#xff0c;可…...

编程日记 2024/4/13 14:02:53

时间序列分析 # 平稳性检验和ARMA模型的识别与定阶 #R语言

掌握单位根检验的原理并能解读结果&#xff1b;掌握利用序列的自相关图和偏自相关图识别模型并进行初步定阶。 原始数据在文末&#xff01;&#xff01;&#xff01; 练习1、根据某1971年9月-1993年6月澳大利亚季度常住人口变动&#xff08;单位&#xff1a;千人&#xff09;的…...

编程日记 2024/4/13 13:58:49

算法-日期问题

算法-日期问题 1.判断是否闰年 int is_leap(int y) {if((y%4000)||(y%40&&y%100!0)){return 1;}return 0; }2.每个月的天数 const int months[]{0,31,28,31,30,31,30,31,31,30,31,30,31};3.计算当前年当前月的天数 int get_month_days(int year,int month) {int re…...

编程日记 2024/4/13 13:53:42

《由浅入深学习SAP财务》：第2章 总账模块 - 2.6 定期处理 - 2.6.5 年末操作：维护新财政年度会计凭证编号范围

2.6.5 年末操作&#xff1a;维护新财政年度会计凭证编号范围 财务系统的维护者要在每年年末预先设置好下一年度的会计凭证编号范围&#xff08;number range&#xff09;&#xff0c;以便下一年度会计凭证能够顺利生成。这一操作一定要在下一年度1月1日以前预先完成。 …...

编程日记 2024/4/13 13:52:41

2024年第十七届“认证杯”数学中国数学建模网络挑战赛A题思路

A题 保暖纤维的保暖能力 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花，羽绒到近年来各种各样的人造纤维。不同的保暖纤维具有不同的保暖性能，比如人们以往的经验表明，高品质的羽绒具有…...

编程日记 2024/4/13 13:51:40

如何快速解锁中兴光猫：zteOnu工具的完整指南

如何快速解锁中兴光猫&#xff1a;zteOnu工具的完整指南 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 中兴光猫工厂模式解锁神器zteOnu是一款专为网络爱好者设计的开源工具&#xff…...

编程新知 2026/5/11 14:31:41

PID控温实战：从STM32的PWM输出到加热棒，手把手教你调出稳定曲线

PID控温实战&#xff1a;从STM32的PWM输出到加热棒的温度控制艺术 在工业自动化、智能家居和实验室设备中&#xff0c;精确的温度控制一直是开发者面临的经典挑战。想象一下&#xff0c;当你需要将一块金属加热到200C并保持稳定&#xff0c;或者让培养箱维持在37C0.1C的精度时&…...

编程新知 2026/5/11 13:59:52

别再被POI内存溢出坑了！手把手教你用EasyExcel 2.1.6搞定百万级数据导入导出

百万级Excel处理实战&#xff1a;从POI到EasyExcel的无痛迁移指南 当业务数据量从几千条膨胀到百万级时&#xff0c;许多Java开发者会发现原本运行良好的POI导出功能突然变成了系统性能的"阿喀琉斯之踵"。我曾亲眼见证一个生产系统在月度报表生成时因OOM崩溃&#xf…...

编程新知 2026/5/11 13:31:57

深入解析XXD2212电调：从PWM信号到三相驱动的实战指南

1. XXD2212电调初探&#xff1a;你的无刷电机控制中枢 第一次拿到XXD2212电调时&#xff0c;我差点把它当成了普通的舵机控制器——它们的外形实在太像了。这块巴掌大的电路板实际上是一个精密的能量转换中枢&#xff0c;负责将微控制器的PWM信号转化为三相无刷电机能理解的语言…...

编程新知 2026/5/11 13:10:13

英雄联盟智能工具箱：5个核心功能如何彻底改变你的游戏体验

英雄联盟智能工具箱&#xff1a;5个核心功能如何彻底改变你的游戏体验 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为繁琐的游戏操作而…...

编程新知 2026/5/11 12:38:53

JPEXS Flash反编译器技术架构解析：遗留Flash资产现代化迁移方案

JPEXS Flash反编译器技术架构解析&#xff1a;遗留Flash资产现代化迁移方案 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler 在数字化转型进程中&#xff0c;大量遗留的Flash应用程序成为…...

编程新知 2026/5/11 11:16:46

Taotoken为Claude Code用户提供稳定替代方案解决封号与Token不足痛点

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken为Claude Code用户提供稳定替代方案解决封号与Token不足痛点 1. 场景与需求 许多使用Claude Code进行开发的工程师会遇到…...

编程新知 2026/5/11 10:52:20

GTA5线上小助手：解锁洛圣都无限可能的游戏增强神器

GTA5线上小助手&#xff1a;解锁洛圣都无限可能的游戏增强神器 【免费下载链接】GTA5OnlineTools GTA5线上小助手 项目地址: https://gitcode.com/gh_mirrors/gt/GTA5OnlineTools 你是否曾在《侠盗猎车手5》线上模式中感到力不从心&#xff1f;面对繁琐的任务、漫长的通…...

编程新知 2026/5/11 9:47:13

Hotkey Detective：Windows热键冲突终极解决方案与实战指南

Hotkey Detective&#xff1a;Windows热键冲突终极解决方案与实战指南 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是…...

编程新知 2026/5/11 9:17:25

CANN/ops-nn二元交叉熵损失算子

aclnnBinaryCrossEntropyWithLogits 【免费下载链接】ops-nn 本项目是CANN提供的神经网络类计算算子库&#xff0c;实现网络在NPU上加速计算。 项目地址: https://gitcode.com/cann/ops-nn &#x1f4c4; 查看源码 产品支持情况 产品是否支持Ascend 950PR/Ascend 950D…...

编程新知 2026/5/11 8:02:28