CSS3 知识点

一、【圆角效果】
border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑

二、【阴影效果】
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow: 0 0 15px blue inset; 内阴影

三、【颜色之RGBA】
color:rgba(R,G,B,A) 或 background-color:rgba(100,120,60,0.5);

四、【渐变色彩】
background-image:linear-gradient([to 设置方向],[开始颜色],[多种过度颜色],[结束颜色])red(红)orange(橙)yellow(黄)green(绿)blue(蓝)black(黑)white(白)
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
★渐变透明 background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);}

五、【文字与字体】
1、设置溢出显示省略号:
white-space: nowrap;(强制文本在一行内显示)
overflow: hidden; (溢出内容为隐藏)
text-overflow: ellipsis;(三段配合使用尾段才显示省略号…,clip表示溢出剪切)

2、嵌入字体
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;}3、文本阴影
text-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影颜色] 

六、【背景设置】
1、设置元素背景图片的原始起始位置 】
background-origin :border-box(边框)| padding-box(内边距)| content-box(内容区域);

2、设置元素背景图片裁剪
配合background-origin使用,图片会根据它作为开始展示
background-clip : border-box(边框)| padding-box(内填充)| content-box(内容区域)| no-clip3、设置背景图片大小
background-size: auto | <长宽度值> | <百分比> | cover | contain4、多重背景background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);background-position: left top, 100px 0, 200px 0;background-repeat: no-repeat, no-repeat, no-repeat;七、【伪类选择器】
【伪类】伪类是对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。1、 CSS3选择器 
属性选择器  元素[属性^="属性值"] 如:a[title*=more]{ background: orange;}
^是选择开头位置包含的
$是选择结尾位置包含的
*是选择任意位置包含的 
作用:通过各种各样的属性给元素增加信息2、:root
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
:root {background:orange;} 改变背景颜色3、 :not
结构性伪类选择器—not :not选择器称为否定选择器,可以选择除某个元素之外的所有元素。input:not([type="submit"]){border:1px solid red;}<input type="text" /><input type="file" /><input type="submit" />4、:empty
选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格也是字符。
p:empty{display: none;}5、:target
选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。(用记锚点的方式好记)
#bank:target{ color:blue;} <a href="#bank">显示蓝色</a> <div class="show" id="bank">爱你</div>6、:first-child
选择器表示的是选择父元素的第一个子元素的元素E。简单理解就是选择父元素后面所有元素中的第一个元素,包含这个子元素的所有后代元素  如:将无序列表的第一个项目符号设置为红色 ul > li:first-child7、:last-child
选择器表示的是选择父元素的最后一个子元素的元素E。简单理解就是选择父元素后面所有元素中的最后一个元素,包含这个子元素的所有后代元素  如:将无序列表的第一个项目符号设置为红色 ul > li:last-child8、:nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。
ol > li:nth-child(2n-1){ background-color:#CCC;}9、正方向范围
li:nth-child(n+6)  
选中从第6个开始的子元素10、负方向范围
:nth-child(-n+9)
选中从第1个到第9个子元素。使用 :nth-child(-n+9) ,就相当让你选中第9个和其之前的所有子元素11、前后限制范围
:nth-child(n+4):nth-child(-n+8)
选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素,上面的例子里是从第4个到第8个子元素12、奇数(单数)、偶数位(双数):nth-child(odd):nth-child(even)13、隔选择子元素
:nth-child(3n+1),
选择1,4,7,1014、范围高级用法
nth-child(n+2):nth-child(odd):nth-child(-n+9)
使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。15、:nth-last-child(n)
选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。16、:first-of-type
选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
如:定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
<div class="wrapper"><p>我是第一个段落</p><p>我是第二个段落</p><p>我是第三个段落</p><div>我是第一个Div元素</div><div>我是第二个Div元素</div><div>我是第三个Div元素</div>
</div>
.wrapper > p:first-of-type { background: orange;}(第一个)
.wrapper > p:last-of-type { background: orange;}(最后一个)
多种类型的元素用frist-of-type,同一种元素用frist-child,如有序列表17、:nth-of-type(n)
选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。
.wrapper > p:nth-of-type(2n){ background: orange;}    (从第一个开始计起)
.wrapper > p:nth-last-of-type(2n){ background: orange;} (从最后一个开始计起)18、:only-child
独生子选择器,选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
.post p:only-child { background: orange;}
<div class="post">  <p>我是一个段落</p>  <p>我是一个段落</p></div>
<div class="post">  <p>我是一个段落</p>  </div>

19、:only-of-type
选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。选择父元素下面子元素中单一的一种类型的子元素时就可以适应

我是一个段落

我是一个段落


我是一个段落


.post > p:only-of-type { background: orange;}
:only-child 小明的爸爸只有小明一个孩子
:only-of-type 小明的爸爸有龙凤胎,小明是唯一的儿子

20、enabled
Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在多个相同表单中(如文本框),若使用类标记会很烦锁,使用enabled会相当的方便,具体用法如下:input[type="text"]:enabled   //CSS定义文本框样式<input type="text" />  样式被添加<input type="text" disabled="disabled" /> 样式被取消 21、disabled 设置不要用的输入框样式input[type="text"]:disabled<input type="text" disabled/>22、checked 覆盖单选按钮和复选按钮的选中和未选中的状态 http://www.imooc.com/code/86523、::selection “::selection”伪元素是修改用鼠标选择文本时的文本样式。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的
::selection{background: orange;color: white;
}::-moz-selection{background: orange;color: white;
}  //兼容其他浏览器要求24、read-only    用来指定处于只读状态元素的样式。
input[type="text"]:-moz-read-only{  border-color: #ccc;}  //兼容其他浏览器要求
input[type="text"]:read-only  border-color: #ccc;}<input type="text" name="name" id="name" placeholder="大漠" />
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />25、:read-write 
:read-write选择器刚好与:read-only选择器相反,主要用来指定当元素处于非只读状态时的样式。
input[type="text"]:-moz-read-only{  border-color: #ccc;}   //兼容其他浏览器要求
input[type="text"]:read-only{  border-color: #ccc;}<input type="text" name="name" id="name" placeholder="大漠" />
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />26、::before和::afterp::before{ content:"我爱你; ";}<p>我也爱你</p>输出结果:我爱你;我也爱你a::after{ content:attr(title);} //还支持url插入哦<a href="##" title="我是被插入的内容">我是元素</a>输出结果:我是元素我是被插入的内容八、【图形变换】1、旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。正值,元素则相对原点中心顺时针旋转;负值,元素则相对原点中心逆时针旋转
transform: rotate(45deg);2、skew(x,y)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
transform:skew(10deg,10deg);3、scale(X,Y)
让元素根据中心原点对对象进行缩放,单位是“倍”scale()的取值默认的值为1,小于1(0.01~0.99)使一个元素缩小;大于1是让元素放大。transform: scale(0.9); 缩小transform: scale(1.2); 放大4、translate()
可以将元素向指定的方向移动,类似于position中的relative。使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。translate(x,y)水平方向和垂直方向同时移动translateX(x)仅水平方向移动(X轴移动)translateY(y)仅垂直方向移动(Y轴移动)transform:translate(50%,50%);5、matrix(a,b,c,d,e,f)
是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。a为元素的水平伸缩量,1为原始大小;b为纵向扭曲,0为不变;c为横向扭曲,0不变;d为垂直伸缩量,1为原始大小;e为水平偏移量,0是初始位置;f为垂直偏移量,0是初始位置6、原点 transform-origintransform-origin 可以更改起始位置transform-origin: left top; 起始位置是左上角注意:同时使用多种方法:transform: translateX(90px) rotate(360deg) 移动和旋转九、【绘制图形】
右三角形:    
border-style: solid;
border-width: .146667rem 0 .146667rem .173333rem;
border-color: transparent transparent transparent rgba(0,0,0,.67);
position: absolute;十、【动画】第一段:div { width:2px; transition:all .5s ease-in .18s; }or 第一段:div{transition-property: height; //指定过渡或动态模拟的CSS属性transition-duration:3s; //动画持续时间transition-timing-function: ease-in; //过渡函数transition-delay:0.1s;} //指定动画开始执行时间第二段:div:hover {height: 300px;
} //这个是最终效果,或换成border-radius: 20px;也可以ease    速度由快到慢ease-in    逐渐加速ease-out    逐渐变慢ease-in-out    先加速再减速,渐显渐隐linear   恒速transition-property 指定过渡或动态模拟的CSS属性【关键帧动画】
第一段:@keyframes changecolor{
0%{background: red;
}
20%{background:blue;
}
40%{background:orange;
}
60%{background:green;
}
80%{background:yellow;
}
100%{background: red;
}
}第二段:div:hover {animation: changecolor 5s ease-out .2s;
}
根据时段用动画完成不同的任务【关键帧动画--不间断运动】
第一段:@keyframes around{  
0% {transform: translateY(0);
}
25%{transform: translateX(180px);
}
50%{transform: translate(180px, 180px); 
}
75%{transform:translate(0,180px);
}
100%{transform: translateY(0);
}
}第二段:div span{{animation-name:around;
animation-duration: 10s;
//过程为10秒
animation-timing-function: ease;
//播放方式
animation-delay: 1s;
//开始播放时间 
animation-iteration-count:infinite;
//播放次数,infinite为无数次
animation-direction:alternate; } //动画播放方向
animation-fill-mode: both; forwards 完成后到最后帧  backwards 完成后到初始帧
div:hover span {animation-play-state:running;//播放状态
} // 当鼠标经过时自动播放,
or 第二段::div span{ animation:around 10s ease-in 0.5s infinite;  }//注意:这行需另外写播放方式:ease    速度由快到慢ease-in    逐渐加速ease-out    逐渐变慢ease-in-out    先加速再减速,渐显渐隐linear   恒速十一、【Columns 多列布局】columns: 200px 2;   //显示2栏,每栏宽度为200pxcolumn-gap:6px;   //列间距为6pxcolumn-rule: 3px solid green;  //列间竖条/边框为3px绿色column-span:all;;  //当文件每段都有个P时可以根据需要跨列设置是否需要分列十二、【box-sizing 盒子模型】
按W3C的盒子模型计算,padding后会把元素撑出来,想要解决问题只需加box-sizing:border-box后,padding不会被影响十三、【Flex 伸缩布局】1、采用Flex布局的元素,它的所有子元素自动成为容器成员,称为Flex项目(flex item)2、容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)3、主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;4、交叉轴的开始位置叫做cross start,结束位置叫做cross end。5、以下6个属性设置在容器上。■ flex-direction  属性决定主轴的方向(即项目的排列方向):row  主轴为水平方向,起点在左端:row-reverse  主轴为水平方向,起点在右端:column  主轴为垂直方向,起点在上沿:column-reverse  主轴为垂直方向,起点在下沿。■ flex-wrap  nowrap不换行  wrap换行,第一行在上方 wrap-reverse换行,第一行在下方■ flex-flow  是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。■ justify-content  定义了项目在主轴上的对齐方式:flex-start(默认值)  左对齐:flex-end  右对齐:center  居中:space-between  两端对齐,项目之间的间隔都相等。:space-around  每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。■ align-items 定义项目在交叉轴上如何对齐:flex-start  交叉轴的起点对齐。:flex-end  交叉轴的终点对齐。:center  交叉轴的中点对齐。:baseline  项目的第一行文字的基线对齐。:stretch(默认值)  如果项目未设置高度或设为auto,将占满整个容器的高度。■ align-content  定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。:flex-start  与交叉轴的起点对齐。:flex-end  与交叉轴的终点对齐。:center  与交叉轴的中点对齐。:space-between  与交叉轴两端对齐,轴线之间的间隔平均分布。:space-around  每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。:stretch(默认值)  轴线占满整个交叉轴。6、项目的属性■ order  定义项目的排列顺序。数值越小,排列越靠前,默认为0■ flex-grow  定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大■ flex-shrink  属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小■ flex-basis  定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。■ flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,个快捷值:auto (1 1 auto) 和 none (0 0 auto)。■ align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,该属性可能取6个值,除了auto,其他都与align-items属性完全一致。 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。十四、【Media Queries 媒体控制】1. 最大宽度max-width@media screen and (max-width:480px){.ads {display:none;}}上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。2.最小宽度min-width@media screen and (min-width:900px){.wrapper{width: 980px;}}上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。3、最小和最大区间@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}}当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”4、设备屏幕的输出宽度Device Width<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。5、not关键词@media not print and (max-width: 1200px){样式代码}面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。6.only关键词<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。十五、【Responsive 不同设备的分辨率设置相应样式】1.1024px显屏@media screen and (max-width : 1024px) { /* 样式写在这里 */ }     2.800px显屏@media screen and (max-width : 800px) { /* 样式写在这里 */   }     3.640px显屏@media screen and (max-width : 640px) {  /* 样式写在这*/   }     4.iPad横板显屏@media screen and (max-device-width: 1024px) and (orientation: landscape) {  /* 样式写在这 */   }  5.iPad竖板显屏@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */    } 6.iPhone 和 Smartphones@media screen and (min-device-width: 320px) and (min-device-width: 480px) {  /* 样式写在这 */   }    十六、【resize 自由绽放】textarea {  resize: both;}none 不能绽放   both 可改变宽高度   horizontal 仅可改变宽度 vertical 仅可以改变高度   inherit 继承父元素resize属性值想要在div用上这效果必须加一个overflow:hidden十七、【outline 外轮廓边框】
1、与border相似,但outline边线不会占用空间
2、outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。
3、outline-offset: 2px; 设置边框与元素边缘的距离
3D菜单:http://www.imooc.com/code/1963十八、box-sizing: border-box 用法
当加入padding时,边框的宽高就会发生变化,如果想加入padding后,又不想宽高发生变化,就用box-sizing: border-box 【一些实例】
1、平行四边型
width: 200px;
height: 200px;
background: blue;
transform: skewX(-20deg);2、梯形
width:50px;
height:50px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid blue;3、直角三角形(上三角型,将四条边都填充100px就知道怎么弄了)
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid blue; 

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

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

相关文章

线上问诊:数仓开发(三)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 线上问诊&#xff1a;数仓开发(三) 文章目录 系列文章目录前言一、ADS1.交易主题1.交易综合统计2.各医院交易统计3.各性…

Golang的类型断言的使用

1.把接口转为结构体&#xff0c;再塞给一个结构体的变量 package main//把接口转为结构体&#xff0c;再塞给一个结构体的变量 // 结构体接口.(结构体) import "fmt"type Point struct {x inty int }func main() {var a interface{}var point Point Point{1, 2}a …

js+html实现打字游戏v2

实现逻辑&#xff0c;看jshtml实现打字游戏v1&#xff0c;在此基础之上增加了从文件读取到的单词&#xff0c;随机选取10个单词。 效果演示 上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&l…

window系统 bat脚本开启和关闭防火墙

前言 手动去关闭和开启防火墙太麻烦 命令 开始防火墙 netsh advfirewall set allprofiles state on关闭防火墙 netsh advfirewall set allprofiles state off

Maven高级

目录 1.分模块设计与开发 2.继承与聚合 ​编辑 3.私服 资源上传和下载 1.分模块设计与开发 将项目按照功能拆分成若干个子模块&#xff0c;方便项目的管理维护、扩展&#xff0c;也方便模块间的相互调用&#xff0c;资源共享。 分模块设计需要先针对模块功能进行设计&…

Python+Requests+Pytest+Excel+Allure 接口自动化测试项目实战【框架之间的对比】

--------UnitTest框架和PyTest框架的简单认识对比与项目实战-------- 定义&#xff1a; Unittest是Python标准库中自带的单元测试框架&#xff0c;Unittest有时候也被称为PyUnit&#xff0c;就像JUnit是Java语言的标准单元测试框架一样&#xff0c;Unittest则是Python语言的标…

MySQL——连接查询与子查询

一、连接查询 单表查询&#xff1a;在一张表当中查询数据&#xff0c;叫做单表查询。 连接查询&#xff0c;结合俩&#xff08;多&#xff09;张表&#xff0c;在俩张&#xff08;多&#xff09;表当中查询数据&#xff0c;在一张表当中查询一部分&#xff0c;在另一张表当中…

5个强大的Java分布式缓存框架推荐

在开发中大型Java软件项目时&#xff0c;很多Java架构师都会遇到数据库读写瓶颈&#xff0c;如果你在系统架构时并没有将缓存策略考虑进去&#xff0c;或者并没有选择更优的缓存策略&#xff0c;那么到时候重构起来将会是一个噩梦。 在开发中大型Java软件项目时&#xff0c;很…

C语言之练习题

欢迎来到我的&#xff1a;世界 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言填空题&#xff1a;第一题第二题第三题 编程题&#xff1a;第一题&#xff1a;不用加减乘除做加法第二题&#xff1a;完全数计算第三题&am…

字节9.3秋招研发笔试 【后端方向】第三题

题目 小红拿到了一个无向图&#xff0c;初始每人节点是白色&#xff0c;其中有若干个节点被染成了红色。小红想知道&#xff0c;若将 i 号节点染成红色&#xff0c;当前的红色连块的数量是多少? 你需要回答i∈[1,n] 的答案。 定义&#xff0c;若干节点组成一个红色连通块&am…

lintcode 1827 · 停在原地的方案数2 【动态规划 中等 vip】

题目 https://www.lintcode.com/problem/1827/ 有一个长度为 arrLen 的数组&#xff0c;开始有一个指针在索引 0 处。 每一步操作中&#xff0c;你可以将指针向左或向右移动 1 步&#xff0c;或者停在原地&#xff08;指针不能被移动到数组范围外&#xff09;。 给你两个整数…

Redis快速入门

文章目录 1. Centos下Redis安装2. redis.conf配置文件介绍3. redis相关命令4. redis封装系统服务5. 问题与解决 1. Centos下Redis安装 Linux_Study 目录&#xff1a;5.2 https://blog.csdn.net/meini32/article/details/128562114 2. redis.conf配置文件介绍 https://blog.c…

【GPT引领前沿】GPT4技术与AI绘图

推荐阅读&#xff1a; 1、遥感云大数据在灾害、水体与湿地领域典型案例实践及GPT模型应用 2、GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术 GPT对于每个科研人员已经成为不可或缺的辅助工具&#xff0c;不同的研究领域和项目具有不同的需求。例如在科研编程…

Union类型和集合的union()方法-set.union()

Union类型和集合的Union 方法 一、Union类型1.Union类型由来2.Union类型的语法3.Union类型的使用4.一些等价写法 二、Set.union()union() 语法示例代码 一、Union类型 1.Union类型由来 Python中的Union类型是 3.10版本引入的新功能之一。它是一种特殊的类型注释&#xff0c;用…

ChatGPT AIGC 完成动态堆积面积图实例

先使用ChatGPT AIGC描述一下堆积面积图的功能与作用。 接下来一起看一下ChatGPT做出的动态可视化效果图: 这样的动态图案例代码使用ChatGPT AIGC完成。 将完整代码复制如下: <!DOCTYPE html> <html> <head><meta charset="utf-8"><tit…

Ansible_自动化运维实战(一)

1.DELL的一款服务器的价格、型号、配置&#xff08;CPU&#xff0c;内存、硬盘、支持的RAID功能&#xff09; DELL 服务器的定价、型号和配置因型号而异&#xff0c;可以通过访问 DELL 官方网站或联系 DELL 客户服务获取具体信息。一种示例是 DELL PowerEdge R740&#xff0c;其…

使用kubasz快速搭建Kubernetes集群

Kubernetes安装 Kubernetes 也称为 K8s,是用于自动部署、扩缩和管理容器化应用程序的开源系统。ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet、chef、func、fabric)的优点,实现了批量系统配置、批量程序部署、批量运行命令等功能。使用ans…

Python Flask Web开发二:数据库创建和使用

前言 数据库在 Web 开发中起着至关重要的作用。它不仅提供了数据的持久化存储和管理功能&#xff0c;还支持数据的关联和连接&#xff0c;保证数据的一致性和安全性。通过合理地设计和使用数据库&#xff0c;开发人员可以构建强大、可靠的 Web 应用程序&#xff0c;满足用户的…

Ubuntu系统下使用宝塔面板实现一键搭建Z-Blog个人博客的方法和流程

文章目录 1.前言2.网站搭建2.1. 网页下载和安装2.2.网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测试5.结语 1.前言 Ubuntu系统作…

Ansible之playbook剧本

一、playbook概述1.1 playbook 介绍1.2 playbook 组成部分 二、playbook 示例2.1 playbook 启动及检测2.2 实例一2.3 vars 定义、引用变量2.4 指定远程主机sudo切换用户2.5 when条件判断2.6 迭代2.7 Templates 模块1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设…