Web CSS笔记3

一、边框弧度

使用它你就可以制作盒子边框圆角

border-radius：
1个值四个圆角值相同
2个值 第一个值为左上角与右下角，第二个值为右上角与左下角
3个值第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
4个值 左上角，右上角，右下角，左下角。
属性描述
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 50px;background-color: aqua;border-radius: 25px;border-top-right-radius: 70px;}</style>
</head>
<body><div></div>
</body>
</html>

 border-radius: 0.5*h;       ---》变成一个胶囊

 border-radius: 50%;        ---》变成一个圆

斜杠'/'前设置水平半径，斜杠'/'后设置垂直半径，参数之间以空格隔开。

border-radius：参数释义
 border-radius: 100px/50px; 四角的水平半径为100px，垂直半径为50px
 border-radius: 50px 20px/30px 60px;①左上与右下圆角 ②左下与右上圆角
 border-radius: 50px 20px 20px/30px 60px 40px; ①左上 ②左下与右上圆角 ③右下
 border-radius: 10px 20px 20px  10px/10px 10px 20px 10px;①左上②右上③右下④左下      
图片来自​​​​​​http://segmentfault.com/a/1190000041261333

 

二、盒子阴影

box-shadow:  x轴的偏移量  y轴的偏移量  模糊的半径  扩散的半径  阴影颜色  内/外阴影

/* x轴的偏移量 y轴的偏移量必须写 */

值描述
x-shadowx轴的偏移量，必需，可以为负值
y-shadowx轴的偏移量，必需，可以为负值
blur模糊的半径，不可以为负值
spread扩散的半径，不可以为负值
color 阴影颜色
insert内阴影（inset）/外阴影（outset）默认
<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;box-shadow: 5px 2px 10px 10px black inset;}</style>
</head>
<body><div></div></body>
</html>

 

三、文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

值描述
x-shadowx轴的偏移量，必需，可以为负值
y-shadowx轴的偏移量，必需，可以为负值
blur模糊的半径，不可以为负值
color 阴影颜色
<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-shadow: 5px 5px 3px pink;}</style>
</head><body><p>ncjdncjdc</p>
</body>
</html>

 

四、列表属性

list-style 属性是一个简写对属性集合，

  • 包括 list-style-type 和 list-style-image与list-style-position。

list-style-image：指定一个能用来作为列表元素标记的图片。

  • list-style-image: url("图片路径");
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul{margin: 0 200px;display: block;list-style-image: url("../img/鲁迅.jfif");list-style-position: inherit;
}</style>
</head><body><ul>List 3<li>List Item 3-1</li><li>List Item 3-2</li><li>List Item 3-3</li></ul>
</body>
</html>

 

list-style-position：指定标记框在主体块框中的位置

  • list-style-position：inside       标记框位于主体块框外部。
  • list-style-position：outside     标记框是主体块框中的第一个内联框，之后是元素的内容。
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.one {list-style: square inside;
}.two {list-style-position: outside;list-style-type: circle;
}</style>
</head>
<body><ul class="one">List 1<li>List Item 1-1</li><li>List Item 1-2</li><li>List Item 1-3</li><li>List Item 1-4</li></ul><ul class="two">List 2<li>List Item 2-1</li><li>List Item 2-2</li><li>List Item 2-3</li><li>List Item 2-4</li></ul>
</body>
</html>

 

 

list-style-type：列表样式类型 

list-style-type：列表样式类型描述
list-style-type: none;不显示列表项的标记。
list-style-type: disc; 实心圆点 (默认值)
list-style-type: circle;  空心圆点
list-style-type: square; 实心方块
list-style-type: decimal; 十进制阿拉伯数字
list-style-type: cjk-decimal；汉十进制数，例如一，二，三，...，九八，九九
list-style-type：upper/lower-roman；大小写罗马数字编号
list-style-type：upper/lower-greek；大小写希腊数字编号
list-style-type: "-";字符编号
list-style-type: simp-chinese-informal；简体中文非正式编号。 一万一千一百一十一
list-style-type: simp-chinese-formal ；简体中文正式编号，例如壹万壹仟壹佰壹拾壹
list-style-type: trad-chinese-informal;繁体中文非正式编号， 例如一萬一千一百一十一
<!DOCTYPE html>
<html lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {width: 200px;height: 200px;background-color: aqua;list-style: none;list-style-type: none;}</style>
</head><body><ul><li></li></ul>
</body>
</html>

 

五、resize

resize 用于设置元素是否可调整尺寸，以及可调整的方向,常见的textarea尺寸就是会变的

resize 不适用于下列元素：

  • 内联元素
  • overflow 属性设置为 visible 的块元素

参数描述
none元素不提供用户可控的调整其尺寸的方法。
both元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。
vertical元素显示可让用户沿竖直方向调整其尺寸的机制。
horizontal元素显示可让用户沿水平方向调整其尺寸的机制。
<textarea  style="resize: none;"></textarea>

 

 

六、浮动

  • 浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
  • 之后发现浮动有个特性：就是让任何盒子可以一行排列,因此用浮动的特性来布局了

① “环绕”图片的效果

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.dad{width: 400px;height: 400px;background-color: aqua;}img{display: block;width: 100px;height:100px;float: right;}</style>
</head>
<body><div class="dad"><img src="../img/鲁迅.jfif" alt="">《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，收录鲁迅于1926年创作的10篇回忆性散文， [1]1928年由北京未名社出版，现编入《鲁迅全集》第2卷。此文集作为“回忆的记事”，多侧面地反映了作者鲁迅青少年时期的生活，形象地反映了他的性格和志趣的形成经过。前七篇反映他童年时代在绍兴的家庭和私塾中的生活情景，后三篇叙述他从家乡到南京，又到日本留学，然后回国教书的经历；揭露了半殖民地半封建社会种种丑恶的不合理现象，同时反映了有抱负的青年知识分子在旧中国茫茫黑夜中，不畏艰险，寻找光明的困难历程，以及抒发了作者对往日亲友、师长的怀念之情 [2]。文集以记事为主，饱含着浓烈的抒情气息，往往又夹以议论，做到了抒情、叙事和议论融为一体，优美和谐，朴实感人。作品富有诗情画意，又不时穿插着幽默和讽喻；形象生动，格调明朗，有强烈的感染力</div>
</body>
</html>
标准流父盒子 有文字，会包围浮动盒子

②盒子可以一行排列

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: aqua;}.box2{width: 200px;height: 200px;background-color: brown;}.box3{width: 200px;height: 200px;background-color: yellow;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>
全部盒子加了float: left; 之前全部盒子加了float: left; 之后

 

浮动设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

选择器{float:属性值;}
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）
  •  浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
  •  浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 
  • 浮动的元素会具有行内块元素的特性
  • 首先浮动的盒子需要和标准流的父级搭配使用
  • 若浮动盒子下有一个标准流盒子，盒中有文字，会尽量显示出来
  • 若标准流父盒子有文字，会包围浮动盒子
  • 浮动的元素排列位置：

        跟上一个元素（块级）有关系。

  1. 如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
  2. 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

③哥哥浮动盒子飘在弟弟标准流盒子的上面不占位置

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.box2{width: 90px;height: 90px;background-color: brown;float: left;}.box3{width: 150px;height: 120px;background-color: yellow;}</style>
</head>
<body><div class="box2">2222</div><div class="box3">3333</div>
</body>
</html>

 

④弟弟浮动盒子在哥哥标准流盒子下面飘不上去，哥哥占了位置

     .box2{width: 90px;height: 90px;background-color: brown;}.box3{width: 150px;height: 120px;background-color: yellow;float: left; }

 

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: aqua;float: left;}.out {width: 800px;height: 400px;background-color: brown;}.box2 {width: 300px;height: 300px;background-color: pink;float: right;}</style>
</head><body><div class="out"><div class="box1">1111111</div><div class="box2">2222</div></div>
</body></html>

 

七、浮动的问题

问题1、

解决方法 1

  1. 给父盒子设置高度
  2. 让父盒子浮动
  3. 保证父盒子是块元素的前提下，在父盒子后面加上伪元素选择器，其次写上clear:both clear:both----》 消除浮动的影响
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.father {width: 700px;background-color: aqua;}.left {width: 300px;height: 300px;background-color: blue;float: left;}.father::after {content: "";display: block;clear: both;}</style>
</head><body><div class="father"><div class="left"></div></div>
</body></html>
解决问题前解决问题后

 问题2、

 浮动盒子遮挡住标准流盒子

  

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.f{width: 500px;height:500px;background-color: blue;float: left;}p {background-color: aqua;clear: both; }/* p::before {display: block;content: "";clear: both;} */</style>
</head>
<body><div class="f"></div><p>mckdmckdmckdcmddkcmdkcmdkdfghjk</p>
</body>
</html>

解决方法2 

1、  p {

         clear: both;

        }

2、p::before {

            display: block;

            clear: both;

        } 

解决问题前
解决问题后

八、flex布局

弹性盒子的特点就是

  • 默认父盒子成为弹性容器的时候，中的子盒子会会变成弹性盒子，在一行排列
  • 若子盒子没有给高度，会自动延伸成父元素高度


            主轴：默认在水平方向
            测轴：默认在垂直方向
            子元素可以自动挤压和延伸

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}ul {display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;}li {list-style: none;width: 100px;height: 200px;background-color: aquamarine;}</style>
</head><body><ul><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul></body>
</html>
******子元素设高度******
有高度时前提下，li 盒子在有设宽度的情况下，自动挤压和延伸

有高度时前提下，li 盒子在有设宽度的情况下，增加了一堆 li 盒子，发现，对子元素设宽度作用不大

******子元素不设高度，会自动延申到父盒子宽度******
没有高度时前提下，li 盒子在有设宽度的情况下，没有自动挤满父盒子宽度

没有高度时前提下，li 盒子在没有设宽度的情况下，增加了一堆 li 盒子，没有自动挤满父盒子宽度

 

八.1、主轴上的对齐方式

主轴：默认在水平方向

​<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}ul {display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;}li {width: 100px;height: 180px;list-style: none;background-color: blue;}</style>
</head><body><ul><li>111</li><li>111</li><li>111</li><li>111</li></ul></body>
</html></ul>
</body>
</html>

对齐方式在父盒子里面写

主轴对齐方式默认从左开始 ：

justify-content: flex-start;

从后面开始：justify-content: flex-end;

两边贴边中间平分

justify-content: space-between;

弹性盒子与弹性盒子之间的距离相等，

justify-content: space-around

弹性盒子与弹性盒子之间的距离相等，

弹性盒子与弹性容器之间的距离相等

justify-content: space-evenly

居中

justify-content: center

八.2、侧轴上的对齐方式

测轴：默认在垂直方向

还是上面的初始盒子 

初始默认在上面：align-items: start;从末尾排起：align-items: end;
 在中间：align-items: center;

挑选其中一个子盒子单独设置

 ul li:nth-child(3) {  align-self: center;  }

八.3、修改主轴方向

还是上面的初始盒子 ，只不过高度改长

主轴方向默认水平从左到右

主轴方向改为水平方向，从右到左

flex-direction: row-reverse

主轴方向改为垂直方向，从上到下

flex-direction: column;

主轴方向改为垂直方向，从下到上

flex-direction: column-reverse

八.4、弹性伸缩比

在我们不确定宽度时，可以利用比例来让弹性盒子宽度自由变换

 /* 整数：占用父级剩余尺寸的分数 */

子盒子写 flex：数字

<<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {margin: 0 auto;display: flex;width: 700px;height: 400px;background-color: rgb(51, 59, 59);}li {list-style: none;height: 40px;background-color: aqua;}ul li:first-child {flex: 1;}ul li:nth-child(2) {flex: 2;background-color: royalblue;}ul li:last-child {flex: 1;}</style>
</head>
<body><ul><li>111</li><li>222</li><li>333</li></ul>
</body>
</html>

 

八.5、换行、

不够挤就换行        父盒子写：flex-wrap: wrap;

简直是布局好帮手佳人们！！

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {display: flex;width: 500px;height: 400px;background-color: aqua;flex-wrap: wrap;justify-content: space-between;align-content: space-evenly;}li {list-style: none;width: 150px;height: 150px;background-color: pink;}</style>
</head><body><ul><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul>
</body></html></html>

九、grid布局(浅谈)

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.box {display: grid;width: 500px;height: 900px;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: repeat(4, 100px);/* 单元格之间的间距 */grid-gap: 20px;}.box div {border: 1px solid pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>6</div><div>8</div><div>9</div></div>
</body>
</html>

grid-template-columns: 1fr 2fr 1fr：（水平方向）一行里按照1：2：1 的比例划分格子
grid-template-rows: repeat(4, 100px)：（垂直方向）一列的高都是100px，重复4行
grid-gap: 20px;          /* 单元格之间的间距 */         

 

 

 .box {display: grid;width: 500px;height: 900px;grid-template-columns: 1fr 1fr 1fr ;grid-template-rows: repeat(4, 100px);grid-gap: 20px;}.test {/* grid-column-start: 1;grid-column-end: 3; */grid-column: 1/3;}
<div class="test">4</div>

水平跨行

更改了盒子水平比例为 1：1：1

grid-column-start: 1;+ grid-column-end: 3; ===== grid-column: 1/3;

可以理解为3-1=2，所以只横跨了两格，从第一个格子开始，不包括第三个格子

垂直跨列也相同道理

 

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

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

相关文章

springboot之MybatisPlus

springboot之MybatisPlus

文章目录 一、ORM二、mybatis实际操作三、mybatis-plus 一、ORM 简单来说ORM就是一个能够帮我们把java中Bean类映射到数据库中。 使用mybatis-plus。 配置架包 <!-- MyBatisPlus依赖 --><dependency><groupId>com.baomidou</groupId><art…
阅读更多...
垄断与商品化背景下的网络安全三大整合策略

垄断与商品化背景下的网络安全三大整合策略

我国的网络安全产业已经发展了20余年&#xff0c;大大小小的企业几乎覆盖了网络安全的所有领域。随着安全需求的逐渐递增&#xff0c;安全产品也朝着平台化、规模化发展&#xff0c;这就倒逼着安全厂商需要整合越来越多的安全能力&#xff0c;并与其产品相融合。这个过程&#…
阅读更多...
【VSCode+Keil5+STM32CubeMX】开发环境配置

【VSCode+Keil5+STM32CubeMX】开发环境配置

一、软件下载 二、软件安装 三、配置环境 四、验证开发环境 五、Keil与VS Code的同步 从0到1搭建VS Code Keil5 STM32CubeMX开发环境 优点 支持标准库HAL库LL库代码编辑更“现代化”&#xff1a;代码提示、函数跳转、更高自由度的定制主题等优点多端同步&#xff0c;VS Code和…
阅读更多...
【LAMMPS学习】七、加速性能(3)通用技巧

【LAMMPS学习】七、加速性能(3)通用技巧

7. 加速性能 7.1.基准测试 7.2.测试性能 7.3.通用技巧 以下是提高模拟性能的通用技巧。它们中的大多数只适用于当前性能中的某些模型和某些瓶颈&#xff0c;因此让您生成的计时数据作为指导。要预测这些选项会产生多大的差异&#xff0c;即使不是不可能&#xff0c;也是很难…
阅读更多...
Jmeter02-1：参数化组件CVS

Jmeter02-1：参数化组件CVS

目录 1、Jmeter组件&#xff1a;参数化概述 1.1 是什么&#xff1f; 1.2 为什么&#xff1f; 1.3 怎么用&#xff1f; 2、Jmeter组件&#xff1a;参数化实现之CSV Data Set Config(重点中重点) 2.1 是什么&#xff1f; 2.2 为什么&#xff1f; 2.3 怎么用&#xff1f; …
阅读更多...
Golang | Leetcode Golang题解之第5题最长回文子串

Golang | Leetcode Golang题解之第5题最长回文子串

题目&#xff1a; 题解&#xff1a; func longestPalindrome(s string) string {if s "" {return ""}start, end : 0, 0for i : 0; i < len(s); i {left1, right1 : expandAroundCenter(s, i, i)left2, right2 : expandAroundCenter(s, i, i 1)if ri…
阅读更多...
Mysql数据库getshell方法

Mysql数据库getshell方法

今天摸鱼时候&#xff0c;突然有人问我不同的数据库getshell的方式&#xff0c;一时间我想到了mysql还有redis未授权访问到getshell的方式&#xff0c;但是仅仅第一时间只想到了这两种&#xff0c;我有查了查资料&#xff0c;找到了上面两种数据库getshell的补充&#xff0c;以…
阅读更多...
【面试八股总结】传输控制协议TCP（三）

【面试八股总结】传输控制协议TCP（三）

参考资料 &#xff1a;小林Coding、阿秀、代码随想录 一、TCP拥塞控制⭐ 1. 慢启动 – Slow Start 慢启动是指TCP连接刚建立&#xff0c;一点一点地提速&#xff0c;试探一下网络的承受能力&#xff0c;以免直接扰乱了网络通道的秩序。 慢启动算法&#xff1a; 初始拥塞窗口…
阅读更多...
电商技术揭秘五：电商平台的个性化营销与数据分析

电商技术揭秘五：电商平台的个性化营销与数据分析

文章目录 引言1. 个性化营销的概念与价值1.1 个性化营销的定义1.1.1 个性化营销的基本概念1.1.2 个性化营销在电商领域的重要性 1.2 个性化营销的核心价值1.2.1 提升用户体验1.2.2 增加转化率和客户忠诚度1.2.3 优化营销资源配置 2. 用户画像与行为分析2.1 用户画像的构建2.1.1…
阅读更多...
SpringBoot+thymeleaf完成视频记忆播放功能

SpringBoot+thymeleaf完成视频记忆播放功能

一、背景 1）客户要做一个视频播放功能，要求是系统能够记录观看人员在看视频时能够记录看到了哪个位置，在下次观看视频的时候能够从该位置进行播放。 2）同时，也要能够记录是谁看了视频，看了百分之多少。 说明：由于时间关系和篇幅原因，我们这里只先讨论第一个要求，第…
阅读更多...
智能小车测速（3.26）

智能小车测速（3.26）

模块介绍&#xff1a; 接线&#xff1a; VCC -- 3.3V 不能接5V&#xff0c;否则遮挡一次会触发3次中断 OUT -- PB14 测速原理&#xff1a; cubeMX设置&#xff1a; PB14设置为gpio中断 打开定时器2&#xff0c;时钟来源设置为内部时钟&#xff0c;设置溢出时间1s&#xff0c…
阅读更多...
视频监控/云存储/AI智能分析平台EasyCVR集成时调用接口报跨域错误的原因

视频监控/云存储/AI智能分析平台EasyCVR集成时调用接口报跨域错误的原因

EasyCVR视频融合平台基于云边端架构&#xff0c;可支持海量视频汇聚管理&#xff0c;能提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、智能分析等视频服务。平台兼容性强&#xff0c;支持多协议、多类型设备接入&#xff0c;包括&#xff1a;国标G…
阅读更多...
【已解决】Error: error:0308010C:digital envelope routines::unsupported

【已解决】Error: error:0308010C:digital envelope routines::unsupported

前言 场景&#x1f3ac; 使用 Ant Design &#xff0c; 执行 npm run dev 出现异常。 文章目录 前言场景&#x1f3ac; 异常信息解决方案方案一(推荐)MAC | Linux 电脑成功⬇️ Windows 电脑 方案2&#xff1a; 不懂留言 JavaPub 异常信息 我直接异常信息&#xff0c;你可以…
阅读更多...
Tomcat部署flowable出现consider increasing the maximum size of the cache

Tomcat部署flowable出现consider increasing the maximum size of the cache

使用Apache Tomcat/8.5.32部署运行flowable-6.5.0时发现控制台有警告 问题原因&#xff1a;解决方法: 使用Apache Tomcat/8.5.32部署运行flowable-6.5.0时发现控制台有警告 01-Apr-2024 20:55:08.877 警告 [localhost-startStop-1] org.apache.catalina.webresources.Cache.ge…
阅读更多...
拥塞控制算法系列之：Swift-谷歌2020年SIGCOM-包级别端到端TIMELY拥塞控制算法

拥塞控制算法系列之：Swift-谷歌2020年SIGCOM-包级别端到端TIMELY拥塞控制算法

核心要点&#xff1a; 谷歌 2020 SIGCOM基于delay的AIMD拥塞拆分EC和FC&#xff0c;时延敏感场景优势分别计算EC和FC的wnd&#xff08;最核心&#xff09;保障吞吐和低延迟。Swift 因利用延迟的简单性和有效性而闻名包级别的论文&#xff1a;https://dl.acm.org/doi/pdf/10.11…
阅读更多...
C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 C刊级 | Matlab实现GWO-BiTCN-BiGRU-Attention灰狼算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测效果一览基本介绍程序设计参考…
阅读更多...
stream使用

stream使用

stream流式计算 在Java1.8之前还没有stream流式算法的时候&#xff0c;我们要是在一个放有多个User对象的list集合中&#xff0c;将每个User对象的主键ID取出&#xff0c;组合成一个新的集合&#xff0c;首先想到的肯定是遍历&#xff0c;如下&#xff1a; List<Long> u…
阅读更多...
xss【2】

xss【2】

1.xss钓鱼 钓鱼攻击利用页面&#xff0c;fish.php黑客钓鱼获取到账号密码存储的位置 xss进行键盘记录 2.xss常规防范 3.xss验证payload XSS&#xff08;跨站攻击&#xff09;_details/open/ontoggle-CSDN博客
阅读更多...
C++ 哈希思想应用:位图,布隆过滤器,哈希切分

C++ 哈希思想应用:位图,布隆过滤器,哈希切分

C 哈希思想应用:位图,布隆过滤器,哈希切分 一.位图1.位图的概念1.问题2.分析3.位图的概念4.演示 2.位图的操作3.位图的实现1.char类型的数组2.int类型的数组3.解决一开始的问题位图开多大呢?小小补充验证 4.位图的应用1.给定100亿个整数&#xff0c;设计算法找到只出现一次的整…
阅读更多...
C#开发中一些常用的工具类分享

C#开发中一些常用的工具类分享

一、配置文件读写类 用于在开发时候C#操作配置文件读写信息 1、工具类 ReadIni 代码 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Tasks;namesp…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023