0基础学前端系列 -- 深入理解 HTML 布局

在现代网页设计中,布局是至关重要的一环。良好的布局不仅能提升用户体验,还能使内容更具可读性和美观性。HTML(超文本标记语言)结合 CSS(层叠样式表)为我们提供了多种布局方式。本文将详细介绍流式布局、Flex 布局与 Grid 布局,并结合图表和丰富的代码实例,以便读者更好地理解这些布局方式。


文章目录
        • 一、流式布局
          • 优点:
          • 缺点:
          • 示例代码:
          • 图示:
        • 二、Flex 布局
          • 优点:
          • 缺点:
          • flex属性
          • justify-content属性
          • 示例代码:
          • 图示:
    • Flex 布局的 key 属性包括 `justify-content` 和 `align-items`,它们可以轻松让我们在主轴和交叉轴上对齐和分配空间。例如,上述代码中的 `justify-content: space-between;` 使得每个项之间有平分的空间。
        • 三、Grid 布局
          • 优点:
          • 缺点:
          • Grid 属性的详细介绍
          • 实际应用示例
        • 四、总结
一、流式布局

流式布局(Fluid Layout)是一种自适应布局,通常使用百分比单位来定义元素的宽度和高度。这种布局方式确保页面在不同的屏幕尺寸上都能保留良好的可读性。

优点:
  • 响应式设计:能在各种屏幕上良好显示,适应不同的设备。
  • 内容为王:元素的大小依据内容而变化,增强可读性。
缺点:
  • 控制较差:在某些情况下,元素由于窗口大小过小可能会变形或重叠。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式布局示例</title>
    <style>
        .container {
            width: 100%;
            background-color: lightgray;
            text-align: center;
        }
        .item {
            width: 50%;
            background-color: lightblue;
            margin: 10px auto;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">这是一个流式布局的示例。</div>
    </div>
</body>
</html>
图示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

流式布局通过设置元素的宽度为百分比值,使其能够随着父容器的宽度变化而变化,保持内容访问的清晰性和可读性。


二、Flex 布局

Flex 布局(Flexible Box Layout)是一种一维布局模型,它提供了更加灵活且高效的方式来排列、对齐和分配空间。Flex 布局可用于水平或垂直方向的布局,简单易用。

优点:
  • 简单易用:通过设置 display: flex; 很容易启用。
  • 灵活性高:子元素能够自动伸缩,适应父容器的尺寸。
  • 适应性强:Flex 布局对于响应式设计非常友好,能够根据浏览器窗口的大小自动调整元素的大小和位置。
  • 对齐能力:通过属性如 align-itemsjustify-content,开发者可以轻松实现复杂的对齐需求,而无需使用分页符或其他布局技巧。
  • 性能优化:Flex 布局是现代浏览器的标准,性能上与其他布局相比通常会有更好的表现,尤其是当涉及到大量元素进行排列时。
缺点:
  • 不适合复杂的多维布局:对于需要同时处理行和列的复杂布局,Grid 布局可能更适合;Flex 布局主要设计为一维布局。
flex属性

在 CSS Flexbox 中,flex 属性是一个综合性属性,用于控制可伸缩(flexible)元素的大小和布局。flex: 1; 是一个简写形式,它实际上是 flex-grow, flex-shrinkflex-basis 三个属性的组合。让我们逐个了解这三个属性的含义:
1. flex-grow

  • 定义:表示该元素相对于同一容器中其他 flex 元素的可伸缩比例。
  • :如果是 1,表示该元素在父容器中有均等的空间分配权,可以扩展以填充可用的空间;如果是 0,则表示不扩展。
  • 示例:如果容器有多个子元素,它们的 flex-grow 属性为 1,那么它们会平分剩余的空间。
  • 详细说明flex-grow 的默认值为 0。如果所有子元素都有 flex-grow: 1,则它们在父容器中平分剩余空间。
  • 使用实例:设定某个元素的 flex-grow2,而其他元素为 1,那么当父容器中有剩余空间时,flex-grow: 2 的元素将占用两倍于其他元素的空间。

2. flex-shrink

  • 定义:表示该元素在空间不足的情况下的收缩能力。
  • 1 表示该元素可以根据需要收缩;0 则表示不允许收缩。
  • 示例:如果多个子元素的 flex-shrink 都是 1,那么在空间不足时,它们会按比例收缩。
  • 详细说明flex-shrink 的默认值也是 1,表示容器空间不足时会正常收缩。收缩的比例根据元素的 flex-shrink 值进行分配。
  • 使用实例:若第一个元素的 flex-shrink 值为 0,即使空间不足也不会收缩,其他元素将根据它们的 flex-shrink 值进行收缩。

3. flex-basis

  • 定义:定义了在分配空间之前,子元素的初始主尺寸(即宽度或高度,取决于主轴方向)。
  • :可以是一个具体的大小值(比如 100px 或者 20%),也可以是 auto,表示使用内容的大小。
  • 示例:如果 flex-basis0,则元素会根据 flex-grow 的比例来确定大小。
  • 详细说明flex-basis 的默认值为 auto,表示元素的初始大小将根据其内容的大小自动调整。如果设置为具体值,例如 100px,则在空间分配时会从这个大小出发进行扩展或收缩。
  • 使用实例:将 flex-basis 设置为 0,可使元素的大小完全依赖于 flex-grow,适用于均分空间的场景。

在这里插入图片描述

flex: 1; 的完整含义

如前所述,flex: 1; 实际上是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的缩写形式。这是 Flex 布局中非常常见的用法,用于创建均匀分布的元素。相当于:

flex: 1 1 0;
  • flex-grow: 1; - 该元素会占据可用空间的一部分,平分空间。
  • flex-shrink: 1; - 该元素可以收缩,以适应父容器的空间。
  • flex-basis: 0; - 初始大小为 0,表示在计算空间时,不会占用额外的空间。
justify-content属性

justify-content 是 CSS Flexbox 和 CSS Grid 布局中的一个属性,用于定义沿主轴(Main Axis)对齐项目的方式。它控制了子元素在容器中如何分配剩余空间,适用于水平(默认主轴)或垂直(当主轴是垂直时)对齐。

justify-content 可以使用多个不同的值,每个值将影响子元素在容器中的排列方式。以下是常用的 justify-content 的值及其含义:

  1. flex-start

    • 含义:将所有子元素靠近主轴的起始位置(左侧或顶部)。
    • 效果:子元素在容器的一侧对齐。
    • 示例:如果容器是水平的,子元素会靠左对齐。
    • 典型用途:用于左对齐或顶部对齐。适合需要固定起始位置时的布局。
  2. flex-end

    • 含义:将所有子元素对齐到主轴的结束位置(右侧或底部)。
    • 效果:子元素在容器的另一侧对齐。
    • 示例:如果容器是水平的,子元素会靠右对齐。
    • 典型用途:用于右对齐或底部对齐。适合布局中需要聚焦右侧或底部元素的情景。
  3. center

    • 含义:将所有子元素居中对齐。
    • 效果:子元素将在主轴的中间位置。
    • 示例:所有子元素都会在容器的中心位置同等分布。
    • 典型用途:适合需要在容器中均匀分布所有元素的情况,如导航条或按钮组。
  4. space-between

    • 含义:在子元素之间平均分配空间。第一个元素靠近主轴的起始位置,最后一个元素靠近主轴的结束位置。
    • 效果:子元素之间会有等量的空间,但是两端不会有额外的空间。
    • 示例:如果有 3 个元素,它们会在整个容器宽度内平均分配空间,之间有间距,但两端没有。
    • 典型用途:用于需要在多个元素之间均匀分空间的布局,例如产品展示或列表项。
  5. space-around

    • 含义:在每个子元素周围平均分配空间。
    • 效果:每个子元素前后都有间距,两端会有一半的空间等于各个子元素之间的空间。
    • 示例:如果有 3 个元素,元素之间的间距相等,并且两端也有相等的空间。
    • 典型用途:适用于需要在每个元素之间留出间隔,同时保留两端也有空间的情况,例如在视觉上希望更为紧凑的内容展示。
  6. space-evenly

    • 含义:在子元素之间和两端平均分配相同的空间。
    • 效果:每个子元素之间的间距是相同的,包括两端的空间。
    • 示例:若容器宽度为 600px,3 个元素之间的间距和两边的间距总是相同。
    • 典型用途:在需要确保两端和元素之间的间隔完全一致的布局中可以使用,如等距离摆放的按钮或图标。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局示例</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
            background-color: lightgray;
            padding: 10px;
        }
        .flex-item {
            flex: 1;
            margin: 10px;
            background-color: lightcoral;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">项1</div>
        <div class="flex-item">项2</div>
        <div class="flex-item">项3</div>
    </div>
</body>
</html>
图示:

在这里插入图片描述
在这里插入图片描述

Flex 布局的 key 属性包括 justify-contentalign-items,它们可以轻松让我们在主轴和交叉轴上对齐和分配空间。例如,上述代码中的 justify-content: space-between; 使得每个项之间有平分的空间。

三、Grid 布局

Grid 布局(Grid Layout)是一个二维布局系统,能够在行和列中排列元素。Grid 布局适合需要复杂结构的网页设计。

优点:
  1. 灵活的布局控制

    • Grid 布局允许开发者同时操控行和列,使得设计更为灵活。与传统布局方式相比,Grid 布局能够提供更精确的网格控制。
  2. 清晰的布局结构

    • 通过定义网格的行和列,可以轻松理解和维护布局。元素在网格中的位置通过简单的行和列编号表示,便于后期的修改和调整。
  3. 自适应设计

    • Grid 布局允许使用相对单位,如百分比(%)和 fr 单位(分数单位),从而实现响应式设计。这使得布局可以自适应不同的屏幕尺寸和分辨率。
  4. 对齐和间距的简单处理

    • Grid 提供了丰富的对齐选项,开发者可以轻松控制元素的对齐方式(例如,水平中心、垂直顶部等)以及元素之间的间距。
缺点:
  1. 学习曲线

    • 对于初学者,Grid 布局的概念可能会比较复杂,尤其是在定义较大网格时。理解和运用 Grid 的高级功能需要更深入的学习。
  2. 浏览器兼容性

    • 尽管主流浏览器大多支持 Grid 布局,但在某些老旧版本的浏览器中可能存在不完全支持的情况,因此在使用时需要考虑兼容性。
Grid 属性的详细介绍
  1. grid-template-rowsgrid-template-columns

grid-template-rowsgrid-template-columns 属性分别用于设置 CSS Grid 布局中网格的行高和列宽。这两个属性的灵活性与相似性使得开发者可以根据具体设计需求创建多样的布局。以下将详细探讨这两个属性的使用。

1.1. 固定的列宽和行高

通过直接指定具体数值,可以创建具有固定宽度和高度的网格。这样的方式简单明了,尤其适用于对尺寸要求严格的场景。

.container {
  display: grid;
  /* 定义三列,具体宽度为 250px、150px 和 250px */
  grid-template-columns: 250px 150px 250px;
  grid-gap: 10px; /* 行列间隙 */
  /* 定义两行,行高均为 60px */
  grid-template-rows: 60px 60px;
}

在上述代码中,grid-template-columns 设置为 250px 150px 250px,第一列和第三列宽度为 250px,第二列宽度为 150px。grid-template-rows 表示两行的高度均为 60px。

1.2. 使用 repeat() 函数简化设置

当存在重复值的情况时,可以利用 repeat() 函数来简化样式代码。此函数接收两个参数:重复的次数和所需的值。

.container-1 {
  display: grid;
  grid-template-columns: 250px 150px 250px;
  grid-gap: 10px;
  /* 创建两行,每行高度均为 60px */
  grid-template-rows: repeat(2, 60px);
}

此代码依旧定义了两行的行高为 60px,但使用 repeat(2, 60px) 使得代码结构更为简洁。

1.3. auto-fill 关键字的应用

auto-fill 关键字用于自动填充元素,使得列或行在空间允许的情况下尽可能地增加数量。

.container-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-gap: 10px;
  grid-auto-rows: 60px;
}

在这个示例中,定义的列宽为 250px,具体的列数量则由浏览器决定,会根据容器的宽度自动填充更多列。

1.4. fr 单位助力灵活布局

fr 是 Grid 布局的新单位,表示在容器中可用空间的比例。这种单位允许创建灵活的响应式设计。

.container-3 {
  display: grid;
  grid-template-columns: 250px 1fr 3fr;
  grid-gap: 10px;
  grid-auto-rows: 60px;
}

此代码中,第一列宽度为 250px,第二列将占用剩余空间的 1fr,第三列占用 3fr。这样,第二列与第三列的宽度会根据容器内剩余空间的比例进行分配。

1.5. minmax() 函数用以设定边界

minmax() 函数允许为网格元素设置最小和最大尺寸,从而实现更好的布局控制。

.container-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(350px, 3fr);
  grid-gap: 10px;
  grid-auto-rows: 60px;
}

在这个示例中,第三列宽度的最小值为 350px,最大值为剩余空间的三倍。这样做提高了在各种屏幕尺寸下的灵活性。

1.6. auto 关键字的使用

使用 auto 关键字可以让浏览器根据内容自动调整列的宽度,这种方式适合不确定的内容尺寸。

.container-5 {
  display: grid;
  grid-template-columns: 120px auto 120px;
  grid-gap: 10px;
  grid-auto-rows: 60px;
}

在该代码中,第一和第三列的宽度为 120px,而中间列的宽度则由内容决定,自动适应。

  1. grid-gapgap

    • 用于设置网格项之间的间距。通过设置该属性可以定义行和列之间的间距。 grid-row-gap 属性、 grid-column-gap 属性分别设置行间距和列间距。 grid-gap 属性是两者的简写形式
  2. grid-area

    • 用于在网格中确定某个元素所占的区域。可以指定元素在网格中的开始和结束行与列。

    示例:

    .grid-item {
        grid-area: 1 / 1 / 3 / 3; /* 占据第一行到第二行,第一列到第二列的区域 */
    }
    
  3. justify-itemsalign-items

    • 这两个属性用于定义网格中每个子元素在定义的单元格内的对齐方式。
    • justify-items:控制元素在水平方向上的对齐方式。
    • align-items:控制元素在垂直方向上的对齐方式。
  4. grid-template-areas

    • 允许你通过命名区域创建更明确的布局。通过给特定的区域命名,提供了非常直观的视觉方式去理解和维护布局。

    示例:

    .grid-container {
        grid-template-areas:
            'header header header'
            'main aside aside'
            'footer footer footer';
    }
    
实际应用示例

以下是一个更复杂的应用示例,展示如何结合上述属性创建一个简单的网页布局:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr; /* 第一列宽度为第二列的一半 */
            grid-template-rows: 100px auto 100px; /* 三行,高度不同 */
            grid-gap: 10px; /* 行列间距 */
            height: 100vh; /* 视口高度 */
            background-color: lightgray;
        }
        .header {
            grid-column: 1 / 3; /* 跨越两列 */
            grid-row: 1; /* 第一行 */
            background-color: lightblue;
        }
        .main {
            grid-column: 1; /* 第一列 */
            grid-row: 2; /* 第二行 */
            background-color: lightcoral;
        }
        .aside {
            grid-column: 2; /* 第二列 */
            grid-row: 2; /* 第二行 */
            background-color: lightgreen;
        }
        .footer {
            grid-column: 1 / 3; /* 跨越两列 */
            grid-row: 3; /* 第三行 */
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">头部</div>
        <div class="main">主要内容</div>
        <div class="aside">侧边栏</div>
        <div class="footer">底部</div>
    </div>
</body>
</html>

在这个示例中,网格布局定义了一个包含头部、主要内容、侧边栏和底部的网页结构。grid-template-columnsgrid-template-rows 允许开发者灵活地为每部分指定大小和位置。
在这里插入图片描述


四、总结

在网页设计中,选择合适的布局方式可以极大提升网页的用户体验。流式布局适合于自适应内容的场景,Flex 布局适用于一维排列,而 Grid 布局则是处理复杂二维布局的理想选择。了解这些布局特点后,我们可以根据需求选择最合适的布局方式,从而构建出更加美观且功能丰富的网页。

希望这篇博文能帮助您更好地理解 HTML 中的布局方式,如有更多问题,欢迎交流讨论!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows开启IIS后依然出现http error 503.the service is unavailable

问题背景 已启用IIS服务&#xff0c;配置步骤可以参考Windows10 IIS Web服务器安装配置 问题描述 在这一步浏览网站时&#xff0c;并没有出现默认首页&#xff0c;而是 http error 503 the service is unavailable 问题解决 参考 成功解决http error 503.the service is un…

BuildCTF 公开赛web部分wp

文章目录 LovePopChainRedFlagWhy_so_serials?babyuploadeazyl0ginez!httpez_md5find-the-idsubtflock刮刮乐我写的网站被rce了&#xff1f; LovePopChain payload: <?php class MyObject{public $NoLove"Do_You_Want_Fl4g?";public $Forgzy;public functi…

diff 算法实现的几种方法和前端中的应用

diff 算法原理和几种实现方法 diff 是什么 diff 算法就是比较两个数据的差异&#xff0c;例如字符串的差异&#xff0c;对象的差异。 常用于版本管理&#xff08;git&#xff09;例如下面的实际案例。 github 上某个 commit&#xff0c;旧代码和新代码之间的不同 diff 展示…

Nacos源码搭建

拉取并配置代码 仓库地址 https://github.com/alibaba/nacos找到config 模块中找到 \resources\META-INF\mysql-schema.sql&#xff0c;在本地mysql中创建数据库nacos-config&#xff0c;将该脚本导入执行创建表。 找到console模块下的配置文件application.properties&#x…

C# Winfrom chart图 实例练习

代码太多了我就不展示了&#xff0c;贴一些比较有代表性的 成品效果展示&#xff1a; Excel转Chart示例 简单说一下我的思路 \ 先把Excel数据展示在dataGridView控件上 XLIST 为 X轴的数据 XLIST 为 Y轴的数据 ZLIST 为 展示的数据进行数据处理点击展示即可 // 将Excel数…

# 起步专用 - 哔哩哔哩全模块超还原设计!(内含接口文档、数据库设计)

↑ 上方下载文档 (大小374KB) 接口文档预览 (超过50个接口) 一、数据库25张表er-关系清晰构图&#xff01;(tip: 鼠标右键图片 > 放大图像) 二、难点/经验 详细说明 热门评论排序评论点赞列表|DTO封装经验分享|精华接口文档说明 组员都说喜欢分档对应枚举码 如果这篇文章…

【Go学习】从一个出core实战问题看Go interface赋值过程

0x01 背景 版本中一个同学找我讨论一个服务出core的问题&#xff0c;最终他靠自己的探索解决了问题&#xff0c;给出了初步的直接原因结论&#xff0c;"Go 中 struct 赋值不是原子的”。间接原因的分析是准确的&#xff0c;直接原因&#xff0c;我有点怀疑。当时写了一些…

leetcode之hot100---54螺旋矩阵(C++)

思路一&#xff1a;模拟 模拟螺旋矩阵的路径&#xff0c;路径超出界限&#xff0c;顺时针旋转&#xff0c;使用一个数组记录当前数字是否被访问到&#xff0c;直到所有的数字全部被访问 class Solution {//一个静态的常量数组&#xff0c;用于标记螺旋矩阵的移动方向(行列变化…

新能源汽车锂离子电池各参数的时间序列关系

Hi&#xff0c;大家好&#xff0c;我是半亩花海。为了进一步开展新能源汽车锂离子电池的相关研究&#xff0c;本文主要汇总并介绍了电动汽车的锂离子电池的各项参数&#xff0c;通过 MATLAB 软件对 Oxford Dataset 的相关数据集进行数据处理与分析&#xff0c;进一步研究各项参…

FastStone 10.x 注册码

简介 FastStone Capture是一款经典好用的屏幕截图软件&#xff0c;在屏幕截图领域具有广泛的应用和众多优势。 软件基本信息 FastStone Capture体积小巧&#xff0c;占用内存少&#xff0c;这使得它在运行时不会给计算机系统带来过多的负担&#xff0c;即使在配置较低的电脑…

AI合成图片是什么意思?有什么用?

随着人工智能的发展&#xff0c;现在市面上出现了很多对企业帮助很大的AI工具&#xff0c;比如说AI合成图片、AI换模特、AI穿衣、AI图片设计等等&#xff0c;下面小编就以AI合成图片为例&#xff0c;为大家详细介绍下。 一、AI合成图片是什么意思? AI合成图片主要就是指利用人…

【示例】Vue AntV G6 base64自定义img 动画效果,自适应宽高屏

需求&#xff1a;拓扑图中需要用动画的线条连接node&#xff0c;在此之前将HTML页面改成了vue页面。需要使用到G6的registerEdge 自定义边&#xff0c;小车的图片需要转成base64格式&#xff08;并翻转&#xff09;&#xff0c;可以通过base64转image查看原来的样子。 另外&am…

MySQL的分析查询语句

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…

【递归,搜索与回溯算法 综合练习】深入理解暴搜决策树:递归,搜索与回溯算法综合小专题(二)

优美的排列 题目解析 算法原理 解法 &#xff1a;暴搜 决策树 红色剪枝&#xff1a;用于剪去该节点的值在对应分支中&#xff0c;已经被使用的情况&#xff0c;可以定义一个 check[ ] 紫色剪枝&#xff1a;perm[i] 不能够被 i 整除&#xff0c;i 不能够被 per…

观察者模式(sigslot in C++)

大家&#xff0c;我是东风&#xff0c;今天抽点时间整理一下我很久前关注的一个不错的库&#xff0c;可以支持我们在使用标准C的时候使用信号槽机制进行观察者模式设计&#xff0c;sigslot 官网&#xff1a; http://sigslot.sourceforge.net/ 本文较为详尽探讨了一种观察者模…

GitCode 光引计划投稿|智能制造一体化低代码平台 Skyeye云

随着智能制造行业的快速发展&#xff0c;企业对全面、高效的管理解决方案的需求日益迫切。然而&#xff0c;传统的开发模式往往依赖于特定的硬件平台&#xff0c;且开发过程繁琐、成本高。为了打破这一瓶颈&#xff0c;Skyeye云应运而生&#xff0c;它采用先进的低代码开发模式…

高校就业管理:系统设计与实现的全流程分析

3.1可行性分析 在项目进行开发之前&#xff0c;必须要有可行性分析报告&#xff0c;分别从技术角度&#xff0c;经济角度&#xff0c;操作角度上面进行分析&#xff0c;经过可行性分析是实现科学开发的必要步骤。 3.1.1技术可行性 从技术的角度出发&#xff0c;目前采用开发的技…

超级AI图像放大工具Upscayl:让你的照片细节更清晰,色彩更鲜艳!

前言 Hello大家好&#xff0c;我又来推荐非常好用的AI图片无损放大器,模糊图片秒变高清&#xff0c;Upscayl是一个免费开源的AI图像超分辨率工具。它使用AI模型来通过猜测细节的方式增强图像并提高其分辨率。该工具适用于Linux、macOS和Windows操作系统 安装环境 [名称]&…

1.gitlab 服务器搭建流程

前提条件&#xff1a; 一、服务器硬件水平 搭建gitlab服务器最低配置要求2核4G,低于这个配置的服务器运行效果很差。 gitlab官网&#xff1a;https://about.gitlab.com/ 下载地址&#xff1a;gitlab/gitlab-ce - Packages packages.gitlab.com 本机ubuntu 二、安装依赖 su…

Ai编程从零开始全栈开发一个后台管理系统之用户登录、权限控制、用户管理-前端部分(十二)

云风网 云风笔记 云风知识库 一、创建前端部分 1、vite初始化项目 npm create vitelatest admin-frontend – --template vue-ts 2、安装必要的依赖 npm install vue-router pinia axios element-plus element-plus/icons-vue安装完成后package.json如下&#xff1a; {&qu…