想要成为CSS大师?这些技巧是你必须知道的!

前言

CSS 是网页设计中不可或缺的一部分,掌握一些实用的 CSS 技巧,可以让你在设计中展现出更多的创意和个性。本文将介绍一些 CSS 技巧,帮助你提升自己的技能,成为一个真正的 CSS 大师。


1. 改变 input 自动填充的背景颜色

这段 CSS 代码是用来控制浏览器自动填充表单时的样式。当浏览器自动填充表单时,会出现一个预览框,这个预览框的样式可以通过 CSS 来控制。其中 input:-internal-autofill-previewedinput:-internal-autofill-selectedCSS 选择器,用来选择浏览器自动填充表单时的预览框和已选中的表单项。-webkit-text-fill-color 是一个 CSS 属性,用来设置文本颜色。在这里,它被设置为黑色,以覆盖浏览器自动填充表单时默认的文本颜色。另外,transitionCSS 属性,用来设置 CSS 属性的过渡效果。在这里,它被用来设置背景颜色的过渡效果,当背景颜色发生变化时,过渡效果会在 0.5 秒内完成,这样可以使过渡效果更加平滑。

input:-internal-autofill-previewed,
input:-internal-autofill-selected {-webkit-text-fill-color: black;transition: background-color 1000s ease-out 0.5s;
}

实现效果

在这里插入图片描述


2. 首字母操作

:first-letter 伪元素用于选择元素的第一个字母,并对其应用样式。它允许你对文本的首字母进行特殊的样式处理,比如改变字体大小、颜色、行高等。使用 :first-letter 伪元素时,你可以为选中的首字母应用各种样式属性,例如 font-sizecolorline-heighttext-transform 等。这些样式属性将只应用于首字母,而不会影响其他文本。

<!DOCTYPE html>
<html><head><style>p:first-letter {font-size: 200%;color: rgb(37, 109, 243);}</style>
</head><body><p>Stop thinking too much, it's alright not to know all the answers.</p>
</body></html>

实现效果

在这里插入图片描述


3. 控制文本大小写转换

text-transform 是一个 CSS 属性,用于控制文本的大小写转换。它可以改变文本的大小写形式,包括转换为大写、小写、首字母大写或不进行任何转换。

属性描述
none默认值,文本不进行任何转换,保持原样。
uppercase将文本转换为大写形式。
capitalize将每个单词的首字母转换为大写形式。
lowercase将文本转换为小写形式。
<!DOCTYPE html>
<html><head><style>p {font-size: 30px;color: rgb(37, 109, 243);}p:nth-child(1) {text-transform: uppercase;}p:nth-child(2) {text-transform: capitalize;}p:nth-child(3) {text-transform: lowercase;}</style>
</head><body><p>Stop thinking too much, it's alright not to know all the answers.</p><p>Stop thinking too much, it's alright not to know all the answers.</p><p>Stop thinking too much, it's alright not to know all the answers.</p>
</body></html>

实现效果

在这里插入图片描述


4. :where() 简化代码

where() 是一个 CSS 伪类函数,用于选择匹配指定条件的元素。它可以在选择器中使用,以便更精确地选择元素。where() 函数接受一个条件表达式作为参数,该表达式描述了要选择的元素的条件。如果元素满足条件,则将应用选择器的规则。where() 函数是一个比较新的 CSS 功能,目前还没有得到广泛支持。因此,在使用时需要谨慎考虑浏览器的兼容性。

<!DOCTYPE html>
<html><head><style>.box :where(div, .title, #only) {color: cadetblue;}</style>
</head><body><div class="box"><div>Some text</div> <!-- 这个div元素将应用样式 --><h1 class="title">Title</h1> <!-- 这个具有.title类的元素将应用样式 --><p id="only">Article content</p> <!-- 这个具有#only ID的元素将应用样式 --><span>Other text</span> <!-- 这个span元素不满足选择器的条件,不会应用样式 --></div></body></html>

实现效果

在这里插入图片描述


5. 透明图片阴影

box-shadowfilter: drop-shadow 属性都可以用于为元素添加阴影和投影效果,但有一些区别:

  • box-shadow 属性是一个独立的属性,可以直接应用于元素,而 filter: drop-shadow 属性是 CSS 滤镜的一部分,需要使用 filter 属性来应用;
  • box-shadow 属性可以同时指定水平和垂直偏移量,模糊半径和扩展半径,而 filter: drop-shadow 属性只能指定水平和垂直偏移量以及模糊半径;
  • box-shadow 属性可以在元素的边界之外创建阴影,而 filter: drop-shadow 属性只会在元素内部创建投影。
<!DOCTYPE html>
<html><head><style>.boxShadow {box-shadow: 2px 4px 8px #3723a1;}.dropShadow {filter: drop-shadow(2px 4px 8px #3723a1);}</style>
</head><body><div><img class="boxShadow" src="./assets/z.png" alt=""><img class="dropShadow" src="./assets/z.png" alt=""></div>
</body></html>

实现效果

在这里插入图片描述


6. 自定义光标

cursor 属性用于指定鼠标指针在元素上的样式。通过设置 cursor 属性,可以改变鼠标指针的外观,以提供更好的用户体验。

属性描述
auto浏览器自动选择合适的鼠标指针样式。
default默认的鼠标指针样式,通常是一个箭头。
pointer表示链接的鼠标指针样式,通常是一个手指。
text表示可编辑文本的鼠标指针样式,通常是一个竖线。
move表示可移动的鼠标指针样式,通常是一个十字箭头。
wait表示等待的鼠标指针样式,通常是一个钟表或旋转的圆圈。
help表示帮助的鼠标指针样式,通常是一个问号。
not-allowed表示禁止操作的鼠标指针样式,通常是一个圆圈内有一个斜线。
<!DOCTYPE html>
<html><head><style>html {cursor: url('./assets/gb.png'), auto;}</style>
</head><body><div class="box">Stop thinking too much, it's alright not to know all the answers.</div>
</body></html>

实现效果

在这里插入图片描述


7. 文字描边

-webkit-text-stroke 是一个 CSS 属性,用于在 Webkit 浏览器(如 ChromeSafari)中设置文字的描边效果。它可以让文字具有边框样式,类似于文字的描边效果

<!DOCTYPE html>
<html><head><style>.box {color: transparent;-webkit-text-stroke: 1px cadetblue;}</style>
</head><body><div class="box">Stop thinking too much, it's alright not to know all the answers.</div>
</body></html>

实现效果

在这里插入图片描述


8. 渐变阴影

代码中使用了 CSS 变量 --gradual 来定义渐变背景,颜色从 chartreusecornflowerblue。通过 .box 类选择器,将渐变背景应用于盒子。使用 .box::after 伪元素选择器,创建了一个与盒子相同大小的伪元素,并为其应用了相同的渐变背景和边框半径。通过模糊滤镜和位移缩放,给伪元素添加了模糊效果。最后,将伪元素的 z-index 设置为 -1,使其位于盒子内容的下方。

<!DOCTYPE html>
<html><head><style>:root {--gradual: linear-gradient(to bottom right, chartreuse, cornflowerblue);}.box {height: 180px;width: 180px;background-image: var(--gradual);border-radius: 10px;position: relative;}.box::after {content: "";position: absolute;inset: 0;background-image: var(--gradual);border-radius: inherit;filter: blur(25px) brightness(1.5);transform: translateY(15%) scale(0.95);z-index: -1;}</style>
</head><body><div class="box"></div>
</body></html>

实现效果

在这里插入图片描述


9. 控制单词间距

word-spacing 是一个 CSS 属性,用于控制文本中单词之间的间距。它可以应用于任何具有文本内容的 HTML 元素。具体来说,word-spacing 属性定义了单词之间的额外间距,可以通过指定一个长度值或百分比值来设置。默认情况下,单词之间没有额外的间距。

<!DOCTYPE html>
<html><head><style>p {word-spacing: 20px;}</style>
</head><body><p>This is a sample paragraph with word-spacing applied.</p>
</body></html>

实现效果

在这里插入图片描述


10. 图像填充文本

background-size 属性用于设置背景图像的大小。将值设置为 cover 表示图像将被缩放以填充整个文本区域,保持其纵横比。background-repeat 属性用于设置图像的重复方式。将值设置为 repeat 表示图像将在文本区域内重复平铺,以填充整个区域。通过将这两个属性添加到包含文本的元素的 CSS 样式中,你可以实现图像内容的均匀填充效果。

<!DOCTYPE html>
<html><head><style>.text-image {font-size: 50px;font-weight: bold;background-image: url('./assets/fgh.png');-webkit-background-clip: text;background-clip: text;color: transparent;}</style>
</head><body><h1 class="text-image">Hello, World!</h1>
</body></html>

实现效果

在这里插入图片描述


11. :paused 伪类

CSS 中,:paused 伪类用于选择处于暂停状态的动画或过渡效果。它可以与 animationtransition 属性一起使用。当动画或过渡效果被暂停时,元素会被匹配到 :paused 伪类。这使得你可以为暂停状态下的元素应用特定的样式。

<!DOCTYPE html>
<html><head><style>.box {width: 200px;height: 200px;background-color: darkcyan;animation: myAnimation 3s infinite;}.box:paused {background-color: blue;}@keyframes myAnimation {0% {transform: scale(0.5);}50% {transform: scale(1);}100% {transform: scale(0.5);}}</style>
</head><body><div class="box"></div><button onclick="pauseAnimation()">暂停</button><button onclick="resumeAnimation()">恢复</button><script>function pauseAnimation() {var box = document.querySelector('.box');box.style.animationPlayState = 'paused';}function resumeAnimation() {var box = document.querySelector('.box');box.style.animationPlayState = 'running';}</script>
</body></html>

实现效果

在这里插入图片描述


12. 强调文本

text-emphasis 属性是 CSS3 中新增的一个文本强调效果属性,用于为文本添加各种强调效果,包括点、圆圈、双线、波浪线等。

<!DOCTYPE html>
<html><head><style>p {width: 100px;text-align: center;border-radius: 4px;padding: 10px;background: rgb(239, 240, 224);text-emphasis: "⏰";}</style>
</head><body><p>文本强调</p>
</body></html>

实现效果

在这里插入图片描述


13. 指定文本的书写模式

writing-mode 是一个 CSS 属性,用于指定文本的书写模式。它决定了文本是水平书写还是垂直书写,以及文本的方向。

属性描述
horizontal-tb默认值,表示水平书写模式,从左到右,从上到下。
vertical-rl表示垂直书写模式,从右到左,从上到下。
vertical-lr表示垂直书写模式,从左到右,从上到下。
sideways-rl表示垂直书写模式,从上到下,从右到左。
sideways-lr表示垂直书写模式,从上到下,从左到右。

通过设置不同的 writing-mode 值,可以实现不同的文本布局效果。例如,如果将 writing-mode 设置为 vertical-rl,则文本会以垂直方向从右到左书写。

<!DOCTYPE html>
<html><head><style>p {writing-mode: vertical-rl;}</style>
</head><body><p>这是一个使用垂直书写模式的段落。</p>
</body></html>

实现效果

在这里插入图片描述


14. 悬停效果

:hoverCSS 中的一个伪类,用于选择元素在鼠标悬停时的状态。当鼠标悬停在一个元素上时,你可以通过应用 :hover 伪类来改变该元素的样式。

<!DOCTYPE html>
<html><head><style>.box {width: 200px;height: 200px;background-color: coral;transition: transform 0.3s ease;}.box:hover {transform: scale(1.2);}</style>
</head><body><div class="box"></div>
</body></html>

实现效果

在这里插入图片描述


15. 剪切元素

clip-path 是一个 CSS 属性,用于剪切元素的可见区域,以实现各种形状的裁剪效果。它可以通过不同的值来定义剪切路径,包括基本形状、SVG 路径和 CSS 函数。

<!DOCTYPE html>
<html><head><style>.clipped {width: 300px;height: 200px;background-color: cadetblue;clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);}</style>
</head><body><div class="clipped"></div>
</body></html>

实现效果

在这里插入图片描述


16. 检测属性是否支持

CSS3 引入了 @supports 规则,它允许我们在样式表中根据属性的支持情况来应用不同的样式。

<style>/* 应用于支持 flexbox 布局的浏览器 */@supports (display: flex) {.container {display: flex;}}/* 应用于不支持 flexbox 布局的浏览器 */@supports not (display: flex) {.container {display: block;}}
</style>

在上面的示例中,如果浏览器支持 display: flex,则 .container 元素将使用 flex 布局;如果不支持,将使用 block 布局。@supports 规则还支持逻辑运算符,例如 andornot,以及多个属性和属性值的组合。这使得我们可以更精确地检测多个属性的支持情况。需要注意的是,@supports 规则在某些旧版本的浏览器中可能不被支持。因此,在使用 @supports 规则时,建议提供备用样式以确保在不支持规则的浏览器中也能正常显示。


17. CSS 嵌套

CSS 中,嵌套是一种组织和编写样式的技术,它允许我们在选择器中嵌套其他选择器,以便更清晰地描述 HTML 结构的层次关系。通过嵌套,我们可以减少重复的代码,并更方便地管理样式。

<!DOCTYPE html>
<html><head><style>.navbar {background-color: darkcyan;padding: 10px;border-radius: 4px;width: 100px;text-align: center;.navList {list-style: none;margin: 0;padding: 0;li {display: inline-block;margin-right: 10px;a {color: #fff;text-decoration: none;&:hover {text-decoration: underline;}}}}}</style>
</head><body><nav class="navbar"><ul class="navList"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>
</body></html>

实现效果

在这里插入图片描述


18. clamp() 函数

clamp() 函数是 CSS 中的一个函数,用于限制一个值在指定的范围内。它接受三个参数:一个要限制的值,一个最小值和一个最大值。函数的返回值是在最小值和最大值之间的值。

clamp(<min>, <value>, <max>)

各属性值含义:

  • <min>:表示允许的最小值;
  • <value>:表示要限制的值;
  • <max>:表示允许的最大值。

clamp() 函数的工作原理如下:

  • 如果 <value> 小于 <min>,则返回 <min>
  • 如果 <value> 大于 ,则返回 <max>
  • 否则,返回 <value>
<!DOCTYPE html>
<html><head><style>.box {width: clamp(100px, 50px, 400px);height: clamp(100px, 20px, 400px);background-color: gold;}</style>
</head><body><div class="box"></div>
</body></html>

实现效果

在这里插入图片描述


19. 图文环绕

shape-outside 是一个 CSS 属性,用于定义一个元素的形状,以便其他元素可以环绕它。这个属性通常与 float 属性一起使用,以实现图片或其他元素的文字环绕效果。

<!DOCTYPE html>
<html><head><style>.container {width: 100%;overflow: hidden;}.floatLeft {float: left;margin-right: 20px;margin-bottom: 20px;shape-outside: circle(50%);}</style>
</head><body><div class="container"><img src="./assets/yhn.png" alt="Your Image" class="floatLeft"><p>When you are young, you may want several love experiences. But as timegoes on, you will realize that ifyou really love someone, the wholelife will not be enough. You need time to know, to forgive and to love.All thisneeds a very big mind.</p></div></body></html>

实现效果

在这里插入图片描述


20. 背景混合模式

当使用 CSS 实现背景混合模式时,你可以使用 background-blend-mode 属性来控制背景图像和背景颜色之间的混合效果。

<!DOCTYPE html>
<html><head><style>.element {display: inline-block;width: 300px;height: 300px;background-image: url('./assets/img.jpg');}.mixture {background-color: #ff0000;background-blend-mode: multiply;}</style>
</head><body><div class="element"></div><div class="element mixture"></div>
</body></html>

实现效果

在这里插入图片描述


21. 调整滚动条默认样式

当需要调整滚动条样式时,可以使用 CSS 来实现。

首先,选择要调整样式的滚动条。可以使用以下 CSS 选择器来选择不同类型的滚动条:

  • 滚动条:::-webkit-scrollbar
  • 滚动条轨道:::-webkit-scrollbar-track
  • 滚动条滑块:::-webkit-scrollbar-thumb
  • 滚动条角落:::-webkit-scrollbar-corner
  • 滚动条按钮:::-webkit-scrollbar-button

接下来,使用 CSS 属性来调整滚动条的样式。以下是一些常用的属性:

  • width:滚动条的宽度
  • height:滚动条的高度
  • background-color:滚动条的背景颜色
  • border:滚动条的边框样式
  • border-radius:滚动条的边框圆角
  • box-shadow:滚动条的阴影效果
  • color:滚动条上文本的颜色
  • cursor:鼠标悬停在滚动条上时的光标样式
<!DOCTYPE html>
<html><head><style>.scroll {width: 500px;height: 150px;border: 1px solid #ddd;padding: 10px;overflow: auto;}/* 滚动条 */::-webkit-scrollbar {width: 10px;background-color: #f1f1f1;}/* 滚动条轨道 */::-webkit-scrollbar-track {background-color: #f1f1f1;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {background-color: #888;border-radius: 5px;}/* 滚动条角落 */::-webkit-scrollbar-corner {background-color: #f1f1f1;}/* 滚动条按钮 */::-webkit-scrollbar-button {display: none;}</style>
</head><body><div class="scroll">内容......</div>
</body></html>

实现效果

在这里插入图片描述


22. 卡券效果

要实现卡券效果,可以使用 CSS 来创建一个具有特殊样式的卡片。

<!DOCTYPE html>
<html><head><style>.coupon {width: 300px;height: 100px;margin: 50px auto;text-align: center;position: relative;background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}</style>
</head><body><p class="coupon"></p>
</body></html>

实现效果

在这里插入图片描述


23. 表格边框合并

border-collapseCSS 中用于控制表格边框合并方式的属性。它有两个值:

  • separate(默认值):这是 border-collapse 的初始值。在此模式下,相邻单元格的边框会分开显示,不会合并。每个单元格都有自己的边框;
  • collapse:在这种模式下,相邻单元格的边框会合并为一个单一的边框。这样可以创建更紧凑和一致的表格外观。
<!DOCTYPE html>
<html><head><style>table {width: 400px;height: 80px;border: 1px solid #ccc;}td {border: 1px solid #ccc;}table:nth-child(2) {border-collapse: collapse;}</style>
</head><body><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table>
</body></html>

实现效果

在这里插入图片描述


24. 隐藏文本

通过一些 CSS 方法可以实现将一些文本隐藏。

<!DOCTYPE html>
<html><head><style>/* 完全隐藏元素,包括其文本内容和占用的空间。元素在页面上不可见,也不会占据布局空间。 */.displayMed {display: none;}/* 隐藏元素的内容,但仍然保留其占用的空间。元素在页面上不可见,但仍然占据布局空间。 */.visibilityMed {visibility: hidden;}/* 将元素的位置设置为绝对定位,并将其左侧移出屏幕,可以隐藏元素的文本内容。但是,这种方法可能会影响元素的布局,因为元素的位置可能会发生变化。 */.positionMed {position: absolute;left: -9999px;}/* 将元素的字体大小设置为0,可以隐藏元素的文本内容。但是,这种方法可能会影响元素的子元素,因为子元素的字体大小也会被设置为0。 */.fontMed {font-size: 0;}/* 将元素的透明度设置为0,可以隐藏元素的文本内容。但是,这种方法会使整个元素变为透明,包括其背景和其他样式。 */.opacityMed {opacity: 0;}</style>
</head><body><div><span>标题1:</span><span class="displayMed">内容1</span></div><div><span>标题2:</span><span class="visibilityMed">内容2</span></div><div><span>标题3:</span><span class="positionMed">内容3</span></div><div><span>标题4:</span><span class="fontMed">内容4</span></div><div><span>标题5:</span><span class="opacityMed">内容5</span></div>
</body></html>

实现效果

在这里插入图片描述


25. 文字溢出显示省略号

要在文本溢出时显示省略号,可以使用 CSStext-overflow 属性和 overflow 属性的配合。

<!DOCTYPE html>
<html><head><style>.overflow {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>
</head><body><div class="overflow">This is a long text that will be truncated with an ellipsis when it overflows.</div>
</body></html>

实现效果

在这里插入图片描述


26. 设置 placeholder 样式

当我们在 HTML 中使用 placeholder 属性时,可以通过 CSS 来自定义其样式。

<!DOCTYPE html>
<html><head><style>input::placeholder {color: red;font-size: 22px;}</style>
</head><body><input type="text" placeholder="请输入文字">
</body></html>

实现效果

在这里插入图片描述


27. 立体字效果

实现立体字的效果,可以使用 CSS 的文本阴影和透明度属性

<!DOCTYPE html>
<html><head><style>h1 {text-shadow: 2px 2px 4px rgba(212, 15, 15, 0.7);color: white;opacity: 0.8;}</style>
</head><body><h1>立体字效果</h1>
</body></html>

实现效果

在这里插入图片描述


28. 更改 input 光标颜色

caret-color 是一个 CSS 属性,用于设置文本输入框(如 inputtextarea 等)中光标的颜色。

<!DOCTYPE html>
<html><head><style>input {caret-color: red;}</style>
</head><body><input type="text">
</body></html>

实现效果

在这里插入图片描述


29. 鼠标事件失效

pointer-events: nonecursor: default 都是 CSS 属性,用于控制元素的交互行为和鼠标指针的样式。

pointer-events: none 用于禁用元素的鼠标事件,使其无法响应鼠标的交互操作。具体来说,当一个元素的 pointer-events 属性设置为 none 时,该元素及其子元素将不会接收到鼠标事件,包括鼠标点击、鼠标移动等。这个属性通常用于创建可穿透的元素,使其下方的元素能够接收到鼠标事件。

cursor: default 用于设置鼠标指针在元素上的样式为默认样式。默认样式通常是一个箭头指针,表示元素没有特定的交互行为。当鼠标悬停在一个元素上时,如果该元素的 cursor 属性设置为 default,鼠标指针将显示为箭头。

<!DOCTYPE html>
<html><head><style>.disabled-button {pointer-events: none;cursor: default;background-color: gray;color: white;padding: 10px 20px;border: none;border-radius: 4px;}</style><script>function handleClick() {console.log('按钮被点击了!')}</script>
</head><body><button class="disabled-button" onclick="handleClick()">禁用按钮</button>
</body></html>

实现效果

在这里插入图片描述


30. 图片自适应

当使用 object-fit: cover 属性时,可以实现图片的自适应效果,使其填充其容器,并保持其原始比例。

<!DOCTYPE html>
<html><head><style>.image {width: 300px;height: 200px;overflow: hidden;}.image img {width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="image"><img src="./assets/img.jpg" alt="Your Image"></div>
</body></html>

实现效果

在这里插入图片描述

持续更新...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ansible的dict的key里包含圆点.

环境 管理节点&#xff1a;CentOS Stream release 9控制节点&#xff1a;同上Ansible&#xff1a;2.15.4 从文件读取yaml数据 假设目标机器上有文件 data.yml 内容如下&#xff1a; a:b: 111c: 222d.e: 333现在要读取该文件内容&#xff0c;并转成yaml数据。 创建文件 tes…

高精度算法【Java】(待更新中~)

高进度加法 在Java中可以使用BigInteger进行高精度计算&#xff0c;除此也可以仿照竖式相加的计算原理进行计算。 BigInteger 提供所有 Java 的基本整数操作符的对应物&#xff0c;并提供 java.lang.Math 的所有相关方法。另外&#xff0c;BigInteger 还提供以下运算&#xff1…

UE5像素流送详细教程,以及解决黑边和鼠标消失问题

说明 本文是阅读UE5官方文档并且实践之后写的读书笔记,更多详细内容读者可以参考官方文档,本文只是因为在follow官方文档时发现有些操作界面不一样,有些细节遗漏了,所以才自己整理一篇笔记,以备后续使用。 读者按该文件指引操作后,可完成本地发布一个游戏,使用像素流网…

ts 联合react 实现ajax的封装,refreshtoken的功能

react ts混合双打&#xff0c;实现ajax的封装&#xff0c;以及401的特殊处理 import axios from axios import {AMDIN_EXPIRES_KEY,AMDIN_KEY,AMDIN_REFRESH_EXPIRES_KEY,AMDIN_REFRESH_KEY,COMMID_KEY,getToken,removeToken } from ../utils/user-token import { showMessage…

C#入门(7):接口详细介绍与代码演示

在C#中&#xff0c;接口是一种定义行为的契约。接口可以定义方法、属性、索引器和事件的签名&#xff0c;但它们都没有实现&#xff08;即&#xff0c;接口包含的都是抽象成员&#xff09;。任何实现了特定接口的类都需要提供接口定义的所有成员的具体实现。 C#接口的一些主要…

vscode运行dlv报错超时

描述 点击F5运行dlv调试go代码时报错&#xff1a;couldnt start dlv dap: connection timeout 解决方式 在网上搜索这个报错&#xff0c;据说是dlv的配置问题&#xff0c;修改配置后还是不行。有人说是dlv和go的版本不匹配&#xff0c;就朝这个方向试试 go版本改为1.19之后…

网上被吹爆的Spring Event事件订阅有缺陷,不要用

Spring Event事件订阅框架&#xff0c;被网上一些人快吹上天了&#xff0c;然而我们在新项目中引入后发现&#xff0c;这个框架缺陷很多&#xff0c;玩玩可以&#xff0c;千万不要再公司项目中使用。还不如自己手写一个监听者设计模式&#xff0c;那样更稳定、可靠。 之前我已…

C# params关键字

在C#中&#xff0c;params关键字用于指定一个方法参数&#xff0c;它可以接受任意数量的参数&#xff0c;或者说是一个参数数组。当使用params关键字时&#xff0c;你可以向方法传递逗号分隔的参数列表&#xff0c;或者是一个数组。在方法内部&#xff0c;这些参数被处理为一个…

ARM CoreLink CCN 互连总线介绍

NIC NOC CCI CMN CNN NI cmn-700 nic-700 ni-700 MLGB这都是啥玩意? 后期博文或视频将会更新这一系列。今天先温习一下CNN的概念,这是来自2014年的文章,然后稍微整理总结一番。 以下是正文… 现代主流和优质 ARM 片上系统 (SoC) 产品使用 CoreLink 缓存一致性网络 (CCN) 504…

SpringBoot-过滤器Filter+JWT令牌实现登录验证

登录校验-Filter 分析 过滤器Filter的快速入门以及使用细节我们已经介绍完了&#xff0c;接下来最后一步&#xff0c;我们需要使用过滤器Filter来完成案例当中的登录校验功能。 我们先来回顾下前面分析过的登录校验的基本流程&#xff1a; 要进入到后台管理系统&#xff0c;我…

java 位运算 表示状态小记

单一状态码var i2 1 << 2; //4 左移var i3 1 << 3; //8 左移var i4 1 << 4; //16 左移var i5 1 << 5; //32 左移数据状态值var huo i3 | i4 | i2; //28 或//判断状态System.out.println("yu1" (huo & i2)); // 4 & 与System.o…

CentOS 安装etcd集群 —— 筑梦之路

环境说明 192.168.1.11 192.168.1.12 192.168.1.13 yum在线安装 yum install etcd -y #etcd01 cat > /etc/etcd/etcd.conf <<EOF ETCD_NAMEetcd01 ETCD_LISTEN_PEER_URLS"http://0.0.0.0:2380" ETCD_LISTEN_CLIENT_URLS"http://0.0.0.0:2379&quo…

IDEA运行thymeleaf的html文件打开端口为63342且连不上数据库

这边贴apple.html代码 <!DOCTYPE html> <html xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><title>User List</title> </head> <body> <h1>User List</h1> <table&…

elementui表格自定义指令控制显示哪些列可以拖动

Vue.directive(tableBorder, function (el, {value}) {// value允许传字符串数字和数组el.classList.add(z_table_hasBorder)let hasStyle el.querySelector(style)if(hasStyle){hasStyle.remove()}let style document.createElement(style)let str .z_table_hasBorder .el…

线上AB实验的日志分析

1&#xff0c;如果策略只影响部分商家/商品&#xff0c;则统计分析出受影响这部分的效果指标。 具体操作&#xff1a;在实验组圈选出 受策略影响的商家/商品&#xff0c;对这部分商家/商品&#xff0c;统计实验组VS对照组的效果指标。 分析出了 受影响这部分商家/商品的正向或…

【数据结构与算法】Kadane‘s算法(动态规划、最大子数组和)

文章目录 一、算法原理二、例题2.1 最大子数组和2.2 环形子数组的最大和 一、算法原理 Kadanes算法是一种用于解决最大子数组和问题的动态规划算法。这类问题的目标是在给定整数数组中找到一个连续的子数组&#xff0c;使其元素之和最大&#xff08;数组含有负数&#xff09;。…

【Linux 内核分析课程作业 1】mmap 实现一个 key-valueMap

作业一 功能要求利用 mmap(虚拟内存映射文件) 机制实现一个带持久化能力的 key-valueMap 系统&#xff0c;至少支持单机单进程访问。(可能用到的 linux API: mmap、msync、mremap、munmap、ftruncate、fallocate 等) 电子版提交方式&#xff1a; 2023 年 11 月 20 日 18:00 前通…

IObit Unlocker丨解除占用程序软件

更多内容请收藏&#xff1a;https://rwx.tza-3.xyz 官网&#xff1a;IObit Unlocker “永远不用担心电脑上无法删除的文件。” 界面简单&#xff0c;支持简体中文&#xff0c;一看就会&#xff0c;只需要把无法删除/移动的文件或整个U盘拖到框里就行。 解锁率很高&#xff0c;…

Unity热更新资源和代码-(学前必读)

系列文章目录 在学习完整的热更新流程之前&#xff0c;需要对lua、xlua、AssetBundle有一定的了解&#xff0c;没有基础的同学&#xff0c;可以看之前的博客&#xff0c;有一定的了解后再学习就会事半功倍了 Lua入门课程 AssetBundle入门 xLua入门 前言 在对热更新有初步了解…

Java爬虫的使用案例及简单总结

通过三个简单的案例,来实现的,都是不加验证的情况下. 如果有拼图验证网上也有对应的实现方法自行查找即可. 这里仅仅是一个简单的Demo, 练习使用 0. 爬取网站的配置: article:config:#中央新闻网-三农头条数据部分ntvUrl: https://www.ntv.cn/# 全国农技推广网- 农技动态部分n…