想要成为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,一经查实,立即删除!

相关文章

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

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

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

Spring Event事件订阅框架&#xff0c;被网上一些人快吹上天了&#xff0c;然而我们在新项目中引入后发现&#xff0c;这个框架缺陷很多&#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;我…

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…

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

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

IObit Unlocker丨解除占用程序软件

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

elasticsearch 概述

初识elasticsearch 了解ES elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在GitHub搜索代码 在电商网站搜索商品 ELK技术栈 elasticsearc…

我叫:插入排序【JAVA】

1.自我介绍 插入式排序属于内部排序法,是对于欲排序的元素以插入的方式找寻该元素的适当位置&#xff0c;以达到排序的目的。 2.继承我的思想 插入排序(Insertion Sorting)的基本思想是:把n个待排序的元素看成为一个有序表和一个无序表,开始时有序表中只包含一个元素,无序表中包…

设计模式—结构型模式之外观模式(门面模式)

设计模式—结构型模式之外观模式&#xff08;门面模式&#xff09; 外观&#xff08;Facade&#xff09;模式又叫作门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。 例子 我们的电脑会有很多 组件&am…

动态页面调研及设计方案

文章目录 vue2 动态表单、动态页面调研一、form-generator二、ng-form-element三、Variant Form四、form-create vue2 动态表单、动态页面调研 一、form-generator 预览&#xff1a;https://mrhj.gitee.io/form-generator/#/ Vue2 Element UI支持拖拽生成表单不支持其他组件…

pytorch的backward()的底层实现逻辑

自动微分是一种计算张量&#xff08;tensors&#xff09;的梯度&#xff08;gradients&#xff09;的技术&#xff0c;它在深度学习中非常有用。自动微分的基本思想是&#xff1a; 自动微分会记录数据&#xff08;张量&#xff09;和所有执行的操作&#xff08;以及产生的新张…

基于梯度算法优化概率神经网络PNN的分类预测 - 附代码

基于梯度算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于梯度算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于梯度优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

细说MySQL数据类型

TOC 目录 MySQL数据类型 数据类型分类 数值类型 tinyint类型 有符号tinyint范围测试 无符号tinyint范围测试 bit类型 bit类型的显示方式 bit类型的范围测试 float类型 有符号float范围测试 无符号float范围测试 decimal类型 字符串类型 char类型 char类型测试 …

Jmeter 如何监控目标服务的系统资源

下载Jmeter插件管理下载 perfmon 将这个插件管理放到Jmeter的\lib\ext目录下 然后重启Jmeter jmeter-plugins-manager-1.10.jar 下载 perfmon插件 添加 io 内存 磁盘的监听 并且添加监听 在宿主机中安装代理监听程序 并启动 ServerAgent.tar.gz

数据结构-插入排序

插入排序 插入排序的三种常见方法&#xff1a; 直接插入排序、折半插入排序、希尔排序。 数据存储结构 因为我们是用的是C语言来实现算法&#xff0c;因此我们需要创建一个结构体&#xff0c;用来存放初始数据。 结构体定义如下&#xff1a; #define MAX 100 typedef int…

012 C++ AVL_tree

前言 本文将会向你介绍AVL平衡二叉搜索树的实现 引入AVL树 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序普通的二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M…

学习模拟简明教程【Learning to simulate】

深度神经网络是一项令人惊叹的技术。 有了足够的标记数据&#xff0c;他们可以学习为图像和声音等高维输入生成非常准确的分类器。 近年来&#xff0c;机器学习社区已经能够成功解决诸如对象分类、图像中对象检测和图像分割等问题。 上述声明中的加黑字体警告是有足够的标记数…

OpenHarmony源码下载

OpenHarmony源码下载 现在的 OpenHarmony 4.0 源码已经有了&#xff0c;在 https://gitee.com/openharmony 地址中&#xff0c;描述了源码获取的方式&#xff0c;但那是基于 ubuntu 或者说是 Linux 的下载方式。在 windows 平台下的下载方式没有做出介绍。 我自己尝试了 wind…