Web

css在悬停时显示附加内容

步骤 创建一个在悬停时显示附加内容的卡片,步骤: 使用 overflow:hidden 在卡片上隐藏垂直溢出的元素。 如果元素悬停(hovered)、聚焦(focused)或其任何后代都聚焦,则使用 :hover 和 :focus-within ...

PHPExcel导入表格(带图片)

PHPExcel 最后一个版本是1.8.1,于2015年发布。该项目于2017年正式弃用,并于2019年永久存档。该项目已多年未维护,不建议使用于新项目上。 所有用户都必须迁移到其直接继承者 PhpSpreadsheet 或其他替代方案。...

css鼠标悬停时文字覆盖图片

下面实现悬停时的图像叠加文字的效果。 步骤 分别对叠加层的顶部和底部条使用 :before 和 :after 伪元素。 设置它们的不透明度 opacity 、缩放变换 transform 和 过渡动画 transition 以产生所需的效果。 ...

css实现带有浮动标题的列表

下面来实现为每个部分创建一个带有浮动标题的列表。 步骤 使用 overflow-y: auto 允许列表容器垂直溢出。 使用内部容器 ( <dl> ) 上的 display: grid 创建包含两列的布局。 将标题 ( <dt> ) ...

CSS中完美的嵌套border radius(圆角)

如果处理不当,带圆角边框(border radius)的嵌套元素可能看起来非常错误。 幸运的是,有一个简单的数学技巧可以让它看起来正确。 您所需要做的就是计算其中一个元素的边界半径以及它们之间的距离。 ...

纯css展示tooltip

效果 .xsx-h4 { margin-bottom: 20px } .xsx-tooltip { position: relative; border-bottom: 1px dotted black; } .xsx-tooltip:before { content: attr(tooltip-data); position: absolute; ...

用css实现透明图片阴影效果

效果 .transparent-shadow { height: 160px; display: flex; align-items: center; justify-content: center; } .margin-right { margin-right: 30px; } .margin-bottom { margin-bottom: 1em...

用css实现打字效果

打字效果(不循环) .typing { height: 14vh; display: flex; align-items: center; justify-content: center; } .typing-effect { width: 22ch; white-space: nowrap; overflow: hidden; b...

人机验证reCAPTCHA v3使用完备说明

v2简介 相信大家都碰到过下面的展示的人机验证界面: reCaptcha 是 Google 公司的验证码服务,方便快捷,改变了传统验证码需要输入n位失真字符的特点。reCaptcha 在使用的时候是这样的: 谷歌...

Nginx服务器怎么开启文件压缩

nginx 通过 ngx_http_gzip_module、ngx_http_gzip_static_module 等模块进行解析和处理,实现对响应数据和文件缓存的压缩。 # ngx_http_gzip_module模块处理的指令 1.gzip on | off # 开启或关闭压...