CSS学习笔记之高级教程（五）

文阿花2024-06-06 21:24

23、CSS 媒体查询 - 实例

html 复制代码 
/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
html 复制代码 
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
html 复制代码 
/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

23.1 下面演示一个简单的例子，让我们来更改不同设备的背景色：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body{
      background-color: lightblue;
    }
    

    /* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
    @media screen and (max-width: 900px) {
      body {
        background-color: yellow;
      }
    }

    @media screen and (min-width: 600px) {
      body {
        background-color: pink;
      }
    }
  </style>
</head>

<body>



</body>

</html>

23.2 菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .container {
      background-color: #333;
      overflow: hidden;
    }

    .container a {
      color: white;
      text-decoration: none;
      padding: 15px 20px;
      display: block;
      float: left;
      font-size: 20px;
    }

    /* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
    @media screen and (min-width: 500px) {
      .container a {
        float: left;
      }

      .container {
        background-color: pink;
      }
    }
     /* 在宽度为 900 像素或更大的屏幕上，使菜单链接彼此并排 */
     @media screen and (max-width: 900px) {
     
      .container a {
        float: none;
        /* width: 100%; */
      }

      .container {
        background-color: #333;
      }
    }
  </style>
</head>

<body>

  <div class="container">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>



</body>

</html>

23.3 列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    /* 清除列后的浮动 */
    .container:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 25%;
      /* padding: 20px; */
    }




    /* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 4</h2>
      <p>Some text..</p>
    </div>



  </div>



</body>

</html>

或使用flex(响应布局)

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .container{
      display: flex;
      flex-wrap: wrap;
    }

    /* 清除列后的浮动 */
    .container:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      flex: 25%;
      padding: 20px;
    }




    /* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
    @media screen and (max-width: 600px) {
      .column {
        flex: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 4</h2>
      <p>Some text..</p>
    </div>



  </div>



</body>

</html>

24、CSS 网格布局模块

24.1 设置网格布局

  • 当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。
html 复制代码 
.container{
	display:grid;
}
html 复制代码 
.container{
	display:inline-grid;
}

这两者的区别是：

一个是块级；一个是行内块级

24.2 网格布局介绍

24.2.1 网格列（Grid Columns）

  • 网格项的垂直线被称为列。

24.2.2网隔行（Grid Rows）

  • 网格项的水平线被称为行。

24.2.3 网格间隙（Grid Gaps）

  • 每列/行之间的间隔称为间隙。

您可以通过使用以下属性之一来调整间隙大小：

  • grid-column-gap // 竖直间隙
  • grid-row-gap// 水平间隙
  • grid-gap // 是 row-gap 和column-gap 属性的简写属性，或者携程grid-gap;

24.2.4 网格行（Grid Lines）

列线与竖线

  • 列之间的线称为列线（column lines）。
  • 行之间的线称为行线（row lines）。

24.3 网格容器

24.3.1 grid-template-columns属性：定义网格布局中的列数，并可定义每列的宽度。

后面几个数值就默认为几列

  • grid-template-columns: 100px 100px 100px 100px; （设置网格列数 这里设置为4列，每一列宽度为100px）
  • grid-template-columns: auto auto auto auto;（设置网格列数 这里设置为4列，每一列自动分配宽度来填满表格容器。
    ）
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为100px */
      /* grid-template-columns: 100px 100px 100px 100px; */
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
    }


    .grid-item{
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      border: 1px solid white;
    }
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
  </div>

</body>

</html>

运行效果：

24.3.1.2 通过使用repeat(重复次数，重复值)函数，可以简写重复的值。
  • 数值：直接设置重复次数，即列数
html 复制代码 
  /* 相当于：grid-template-columns: 100px 100px 100px 100px; */
      grid-template-columns: repeat(4,100px);
  • auto-fill：表示自动填充，让一行或一列中尽可能地容纳更多的单元格。
html 复制代码 
 /* 表示自动填充，让一行或一列中尽可能地容纳更多的单元格。 */
      grid-template-columns: repeat(auto-fill,200px);

运行效果：

24.3.1.3 比例fr：表示片段，为了方比那表示比例关系
html 复制代码 
   /* 使用比例，表示第一个列宽度设置为200px，后面剩余的宽度被按照比例划分，分别为剩余宽度的1/3和2/3 */
      grid-template-columns: 200px 1fr 2fr;

运行效果：

24.3.1.4 范围minmax
  • minmax：产生一个长度范围，表示长度就在这个范围值中都可以应用到网格项目中。第一个参数就是最小值，第二个参数时最大值。
html 复制代码 
/* 使用比例 */
      grid-template-columns: minmax(100px,300px);

24.3.2 grid-template-rows 属性：定义每列的高度

  • 其拥有和grid-template-columns差不多的属性值可选，例如：repeat()函数，fr比例关系，auto-fill自动填充，minmax长度范围。
html 复制代码 
    .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      grid-template-rows: 100px 200px;
    }

运行效果：

24.3.3 justify-content 属性

  • justify-content 属性用于在容器内对齐整个网格。网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。
  • justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。
24.3.3.1 justify-content: flex-start;（ 默认值。项目位于容器的开头。）
html 复制代码 
 .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
     justify-content: flex-start;
    }
24.3.3.2 justify-content: flex-end;（ 项目位于容器的结尾。）
html 复制代码 
  .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      justify-content: flex-end;
    }
24.3.3.3 justify-content: center;（项目位于容器中央。）
html 复制代码 
.gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      justify-content:center;
    }
24.3.3.4 justify-content: space-between;（项目在行与行之间留有间隔）
24.3.3.5 justify-content: space-around;（ 项目在行之前、行之间和行之后留有空间。）

24.3.4 justify-items属性：（规定全部单元格在自身内部行内方向的对齐方式）

24.3.4.1 justify-items: start;
html 复制代码 
  .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      /* justify-content:space-around; */
   /* 单元格内部对齐方式 */
      justify-items: start;
    }
24.3.4.2 justify-items: center;

24.3.5 align-content 属性:用于垂直方向上对齐容器内的整个网格

24.3.5.1 align-content: end;
24.3.5.2 align-content: start;
24.3.5.3 align-content: center;
24.3.5.4 align-content: space-between;
24.3.5.4 align-content: space-around;
24.3.5.6 align-content: stretch;(默认值。行拉伸以占据剩余空间。)

24.3.6 align-items 属性:(用于设置网格内部全部单元格的垂直位置)

24.3.6.1 align-items: flex-start;
24.3.6.1 align-items: flex-end;

24.3.7 grid-auto-flow 属性

  • 默认情况下，网格中子元素的排列顺序都是"先行后列"，填充完第一行之后，再开始放入第二行。
24.3.7.1 grid-auto-flow: column;
html 复制代码 
   .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 网格中子元素的排列顺序 */
      grid-auto-flow: column;
    }
24.3.7.2 grid-auto-flow: row;

24.4 网格项目

  • 容器中的子元素也叫做项目。
  • 通常容器在每一行的每一列都有一个网格项目，但是可以通过设置网格项目的样式，让它们跨越多个列或多个行。
  • 使用grid-column-start、grid-column-end、grid-column属性

示例：把网格项目放在列线 1，并在列线 3 结束它：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
      grid-column-start: 1;
      grid-column-end: 3;
      /*可简写为grid-column：1 / 3; */
    }
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
 
  </div>




</body>

</html>

示例：把网格项目放在行线 1，并在行线 3 结束它：

html 复制代码 
 .grid-item1{
      /* grid-column-start: 1;
      grid-column-end: 3; */
      grid-row-start: 1;
      grid-row-end: 3;
            /*可简写为grid-row：1 / 3; */
    }

24.4.1grid-area 属性

该属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
注意顺序

html 复制代码 
/* 简写 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end */
         grid-area: 1 / 1 / 3 / 3;

表示使 "item1" 从 row-line 1 和 column-line 1 开始，在 row-line 3 和 column line 3 结束（包前不包后）即，横向和纵向各占位2个。

html 复制代码 
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

表示使 "item8" 从 row-line 2 和 column-line 1开始，并跨越 2 行和 3 列

24.4.2 justify-self 属性:(单个网格项在行内方向的对齐方式。在网格项上设置。优先级比justify-items高。)

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 单元格位置（水平） */
      justify-items: start;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
      justify-self:flex-end;
    }
   
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.4.3 align-self 属性:(该属性用于设置某个单元格内容的垂直位置,优先级比align-items高)

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 单元格位置（水平） */
      justify-items: start;
    /* 单元格位置（垂直） */
    align-items: flex-end;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
        /* 单元格位置（水平）  优先级高于justify-items*/
      justify-self:flex-end;
      /*  单元格位置（垂直）  优先级高于 align-items */
      align-self: flex-start;
    }
   
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.5 实践

思路：参考24.2.4 网格行（Grid Lines）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局，并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列，每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto ;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
      text-align: center;
    }

    @media screen and (max-width: 600px) {
      /* .grid-item1{
        grid-area: 1 / 1 / span 1 / span 3;
      }
      .grid-item2{
        grid-area: 3 / 3 / 4 / 4;
      }

      .grid-item3{
        grid-area: 2 / 1 / 3 / 2;
      }

      .grid-item4{
        grid-area: 2 / 2 / 4 / 3;
      }

      .grid-item5{
        grid-area: 3 / 1 / 4 / 2;
      }
      
      .grid-item6{
        grid-area: 2 / 3 / 3 / 4;
      } */
      .grid-item1{
        grid-area: 1 / 1 / span 1 / span 3;
      }
      .grid-item2{
        grid-area: 3 / 3 / span 1 / span 1;
      }

      .grid-item3{
        grid-area: 2 / 1 / span 1 / span 1;
      }

      .grid-item4{
        grid-area: 2 / 2 / span 2 / span 1;
      }

      .grid-item5{
        grid-area: 3 / 1 / span 1 / span 1;
      }
      
      .grid-item6{
        grid-area: 2 / 3 / span 1 / span 1;
      }
    }
 
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.6 对比flex

1、和flex布局相比之下的区别
Grid网格布局和flexbox的主要区别：flexbox是一维布局（沿横向或者纵向），Grid是二维布局（同时沿着横向和纵向）

举例：当使用flexbox布局，设置了flex-wrap :

nowrap;之后，换行后的元素并不会与上一行的元素对齐，当使用了nowrap之后，每个新行都变成了一个新的弹性容器，空间分布只在行内进行。

2、什么情况下选择grid布局还是flexbox布局？

可参考以下三点：

（1）换行需要与上一行元素对齐？选择Grid

（2）需要同时按行和列控制布局？选择Grid

（3）只需要按行或者列控制布局？选择flexbox

相关推荐
机智的叉烧39 分钟前
前沿重器[57] | sigir24：大模型推荐系统的文本ID对齐学习
人工智能·学习·机器学习
量子-Alex2 小时前
【多模态聚类】用于无标记视频自监督学习的多模态聚类网络
学习·音视频·聚类
吉大一菜鸡2 小时前
FPGA学习（基于小梅哥Xilinx FPGA）学习笔记
笔记·学习·fpga开发
娃哈哈哈哈呀3 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
CCSBRIDGE4 小时前
Magento2项目部署笔记
笔记
爱吃西瓜的小菜鸡4 小时前
【C语言】判断回文
c语言·学习·算法
小A1595 小时前
STM32完全学习——SPI接口的FLASH（DMA模式）
stm32·嵌入式硬件·学习
亦枫Leonlew5 小时前
微积分复习笔记 Calculus Volume 2 - 5.1 Sequences
笔记·数学·微积分
岁岁岁平安5 小时前
spring学习(spring-DI(字符串或对象引用注入、集合注入)(XML配置))
java·学习·spring·依赖注入·集合注入·基本数据类型注入·引用数据类型注入
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍