Web CSS笔记3

news2024/12/25 13:59:44

一、边框弧度

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

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.coloradmin.cn/o/1564809.html

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

相关文章

Mac下Docker Desktop starting的解决方法

Mac下Docker Desktop starting的解决方法

记录下自己在新增了一个新的容器后&#xff0c;Disk Size过大导致启动Docker Desktop会一直卡在Docker Desktop starting&#xff0c;并且重启无效的解决方法。该方法无需重新卸载&#xff0c;并且能保留原有的镜像和容器。 一、确认问题 首先确认Docker.raw大小以确认是否和笔…
阅读更多...
异地文件如何共享访问？

异地文件如何共享访问？

异地文件共享访问是一种让不同地区的用户能够快速、安全地共享文件的解决方案。人们越来越需要在不同地点之间共享文件和数据。由于复杂的网络环境和安全性的问题&#xff0c;实现异地文件共享一直是一个挑战。 为了解决这个问题&#xff0c;许多公司和组织研发了各种异地文件共…
阅读更多...
xilinx fpga程序固化

xilinx fpga程序固化

一、前言 xilinx 旗下的产品主要有包含有处理器的SOC系列&#xff0c;也有只有纯逻辑的fpga&#xff0c;两者的程序固化的方法并不相同&#xff0c;本文介绍只包含纯逻辑而不涉及处理器的fpga的代码固化。 二、固化流程 将工程综合&#xff0c;实现&#xff0c;并得到比特流…
阅读更多...
【蓝桥杯第十三届省赛B组】（部分详解）

【蓝桥杯第十三届省赛B组】（部分详解）

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…
阅读更多...
数据如何才能供得出、流得动、用得好、还安全

数据如何才能供得出、流得动、用得好、还安全

众所周知&#xff0c;数据要素已经列入基本生产要素&#xff0c;同时成立国家数据局进行工作统筹。目前数据要素如何发挥其价值&#xff0c;全国掀起了一浪一浪的热潮。 随着国外大语言模型的袭来&#xff0c;国内在大语言模型领域的应用也大放异彩&#xff0c;与此同时&#x…
阅读更多...
更高效、更简洁的 SQL 语句编写丨DolphinDB 基于宏变量的元编程模式详解

更高效、更简洁的 SQL 语句编写丨DolphinDB 基于宏变量的元编程模式详解

元编程&#xff08;Metaprogramming&#xff09;指在程序运行时操作或者创建程序的一种编程技术&#xff0c;简而言之就是使用代码编写代码。通过元编程将原本静态的代码通过动态的脚本生成&#xff0c;使程序员可以创建更加灵活的代码以提升编程效率。 在 DolphinDB 中&#…
阅读更多...
Android14之BpBinder构造函数Handle拆解(二百零四)

Android14之BpBinder构造函数Handle拆解(二百零四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
python文件处理：解析docx/word文件文字、图片、复选框

python文件处理：解析docx/word文件文字、图片、复选框

前言 因为一些项目原因&#xff0c;我需要提供解析docx内容功能。本来以为这是一件比较简单的工作&#xff0c;没想到在解析复选框选项上吃了亏&#xff0c;并且较长一段时间内通过各种渠道都没有真正解决这一问题&#xff0c;反而绕了远路。 终于&#xff0c;我在github pytho…
阅读更多...
Kafka架构概述

Kafka架构概述

Kafka的体系结构 Kafka是由Apache软件基金会管理的一个开源的分布式数据流处理平台。Kafka具有支持消息的发布/订阅模式、高吞吐量与低延迟、持久化、支持水平扩展、高可用性等特点。可以将Kafka应用于大数据实时处理、高性能数据管道、流分析、数据集成和关键任务应用等场景。…
阅读更多...
测开——基础理论面试题整理

测开——基础理论面试题整理

1. 测试流程 需求了解分析需求评审制定测试计划【包括测试人员、时间、每人负责的模块、测试的风险项以及预防】编写自动化测试用例 —— 测试评审【尽量丰富测试点】编写测试框架和脚本&#xff08;若是功能测试 可省去这步骤&#xff09;执行测试提交缺陷报告测试分析与评审…
阅读更多...
BIM转Power BI数据集

BIM转Power BI数据集

在本博客中&#xff0c;我们将了解如何使用从 SSAS 表格、Power BI Desktop 或 Power BI 服务数据集中提取的 Model.bim 文件在本地或 PBI 服务上生成新数据集。 1、设置&#xff08;SSAS 表格和 PBI 服务通用&#xff09; 我建议你创建一个专门用于此任务的新 Python 环境&a…
阅读更多...
docker部署DOS游戏

docker部署DOS游戏

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…
阅读更多...
微软云学习环境

微软云学习环境

微软公有云 - Microsoft Azure 本文介绍通过微软学习中心Microsoft Learn来免费试用Azure上的服务&#xff0c;也不需要绑定信用卡。不过每天只有几个小时的时间。 官网 https://docs.microsoft.com/zh-cn/learn/ 实践 比如创建虚拟机&#xff0c;看到自己的账号下多了Learn的…
阅读更多...
常量分类、常量优化

常量分类、常量优化

常量分类 常量&#xff0c;程序运行期间&#xff0c;不发生改变的量 整型常量&#xff1a;100&#xff0c;200&#xff0c;-300等浮点型常量&#xff1a;100.0&#xff0c;-3.14&#xff0c;0.0等布尔常量&#xff1a;只有true、false两个取值字符常量&#xff1a;英文单引号…
阅读更多...
linux设置Nacos自启动

linux设置Nacos自启动

前提&#xff1a;已经安装好nacos应用 可参考&#xff1a;Nacos单机版安装-CSDN博客 1. 创建nacos.service 1.1 在 /lib/systemd/system 目录底下&#xff0c;新建nacos.service文件 [Unit] Descriptionnacos Afternetwork.target[Service]Typeforking# 单机启动方式&#…
阅读更多...
javascript常见的事件属性

javascript常见的事件属性

焦点事件 focus/blur <input type"text" /><script>const input document.querySelector("input")// 绑定焦点事件input.addEventListener("focus" ,function(){console.log("有焦点触发")})// 失去焦点事件input.addEve…
阅读更多...
RIP协议(路由信息协议)

RIP协议(路由信息协议)

一、RIP协议概述 RIP协议&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;是一种基于距离矢量的内部网关协议&#xff0c;即根据跳数来度量路由开销&#xff0c;进行路由选择。 相比于其它路由协议&#xff08;如OSPF、ISIS等&#xff09;&#…
阅读更多...
SpringBoot（48）-使用 SkyWalking 进行分布式链路追踪

SpringBoot（48）-使用 SkyWalking 进行分布式链路追踪

Spring Boot&#xff08;48&#xff09;- 使用 SkyWalking 进行分布式链路追踪 介绍 在分布式系统中&#xff0c;了解各个服务之间的调用关系和性能表现是非常重要的。SkyWalking 是一款开源的分布式系统监控与分析平台&#xff0c;能够帮助我们实现分布式系统的链路追踪、性…
阅读更多...
24/04/02总结

24/04/02总结

API: bigdecima: 方法名 说明 public static BigDecimal valueof( double val) 静态获取对象 public BigDecimal add(BigDecimal val) 加法 public BigDecimal subtract(BigDecimal val…
阅读更多...
从C到C++过渡知识 下（深入理解引用与指针的关系）

从C到C++过渡知识 下（深入理解引用与指针的关系）

引用 引用时C引入的一个新的概念&#xff0c;他和指针有着千丝万缕的关系。 首先我们要了解的是引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量共用同一块内存空间。语法格式如下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023