当前位置: 首页 > news >正文

第6章:布局 --[CSS零基础入门]

CSS 布局是网页设计中至关重要的一个方面,它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术:

1. 浮动布局(Float Layout)

浮动布局(Float Layout)曾经是网页设计中创建多列布局的常用方法。虽然现在更推荐使用 Flexbox 或 Grid 布局,但了解浮动的工作原理仍然很有用,尤其是在维护旧代码时。以下是一个简单的示例,展示了如何使用 float 属性来创建两列布局。

示例:使用 float 创建两列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局示例</title>
<style>* {box-sizing: border-box;}.container {overflow: hidden; /* 清除浮动 */padding: 10px;background-color: #f4f4f4;}.column {float: left;width: 50%;padding: 15px;background-color: #ddd;margin-bottom: 10px;}.clearfix::after {content: "";clear: both;display: table;}
</style>
</head>
<body><div class="container clearfix"><div class="column" style="background-color:#bbb;"><h2>左侧栏</h2><p>这里是一些文本。</p></div><div class="column" style="background-color:#ccc;"><h2>右侧栏</h2><p>这里是更多的文本。</p></div>
</div></body>
</html>

在这里插入图片描述

解释:
  • * { box-sizing: border-box; }: 确保所有元素的宽度和高度计算包括填充和边框,这有助于避免布局问题。
  • .container: 包含两个浮动子元素的父容器。overflow: hidden; 用于清除浮动,确保父容器能够包裹住浮动的子元素。
  • .column: 定义了每个列的样式。float: left; 让它们向左浮动,并排显示。width: 50%; 确保每列占据一半的宽度。
  • .clearfix::after: 使用伪元素来清除浮动,这是一种常见的技术,用来防止父元素的高度塌陷。

在这个例子中,两个 .column 类的 div 将会并排显示,形成一个两列布局。请注意,为了保证良好的兼容性和可维护性,在现代开发中应优先考虑使用 Flexbox 或 Grid 布局方式。

2. 弹性盒子布局(Flexbox)

Flexbox 是一种一维布局模型,适用于单行或单列的项目排列,可以轻松实现对齐、分布空间等操作。

以下是使用 CSS 弹性盒子布局(Flexbox)的三个示例。每个示例展示了如何通过 Flexbox 实现不同的布局效果。

示例 1: 基本水平居中和垂直居中

这个例子展示了如何使用 Flexbox 实现一个简单的容器,其中的内容在水平和垂直方向上都居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 居中示例</title>
<style>.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 300px;           /* 设置高度以便演示垂直居中 */border: 2px solid #ccc;}.item {padding: 20px;background-color: lightblue;}
</style>
</head>
<body><div class="container"><div class="item">我是居中的内容</div>
</div></body>
</html>

在这里插入图片描述

示例 2: 创建响应式卡片布局

这个例子展示了如何创建一行多个卡片,并让它们根据屏幕大小自动调整宽度和间距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 卡片布局示例</title>
<style>.card-container {display: flex;flex-wrap: wrap; /* 允许换行 */gap: 10px;       /* 卡片之间的间距 */}.card {flex: 1 1 calc(33.333% - 20px); /* 分配每张卡片的宽度 */min-width: 200px;               /* 最小宽度 */padding: 15px;background-color: lightcoral;border: 1px solid #ddd;box-sizing: border-box;}
</style>
</head>
<body><div class="card-container"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div><div class="card">卡片 4</div><div class="card">卡片 5</div>
</div></body>
</html>

在这里插入图片描述

示例 3: 使用 flex-growflex-shrink 创建可扩展布局

此示例展示了如何使用 flex-growflex-shrink 来创建一个布局,其中一个项目占据剩余的所有空间,而其他项目保持固定宽度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox 可扩展布局示例</title>
<style>.container {display: flex;border: 2px solid #ccc;padding: 10px;}.sidebar {flex: 0 0 200px; /* 不增长、不缩小、宽度为200px */background-color: lightgreen;padding: 10px;}.main-content {flex-grow: 1; /* 占据所有剩余空间 */background-color: lightblue;padding: 10px;}
</style>
</head>
<body><div class="container"><div class="sidebar">侧边栏</div><div class="main-content">主要内容区域,会根据窗口大小自动调整。</div>
</div></body>
</html>

在这里插入图片描述

这些示例展示了如何利用 Flexbox 的强大功能来创建灵活且响应式的布局。通过控制项目的对齐方式、分布以及生长和收缩行为,你可以构建出既美观又实用的网页布局。

3. 网格布局(Grid Layout)

CSS Grid 提供了一种二维布局模型,允许你更精确地控制行和列,适合用来构建复杂的布局结构。

当然,以下是使用 CSS 网格布局(Grid Layout)的三个示例。每个示例展示了如何通过 Grid 实现不同的布局效果。

示例 1: 创建简单的网格布局

这个例子展示了如何创建一个基本的三列两行网格,并为每个单元格指定内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 基本布局示例</title>
<style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建三列 */grid-template-rows: auto;              /* 行高自动调整 */gap: 10px;                             /* 单元格之间的间距 */}.grid-item {background-color: lightblue;padding: 20px;text-align: center;}
</style>
</head>
<body><div class="grid-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></body>
</html>

在这里插入图片描述

示例 2: 使用命名区域创建复杂布局

这个例子展示了如何定义和使用命名区域来创建复杂的布局,如带有头部、侧边栏和主要内容区的网页布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 命名区域布局示例</title>
<style>.grid-container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto;gap: 10px;height: 100vh;}.header {grid-area: header;background-color: lightcoral;}.sidebar {grid-area: sidebar;background-color: lightgreen;}.main {grid-area: main;background-color: lightblue;}.footer {grid-area: footer;background-color: lightgray;}
</style>
</head>
<body><div class="grid-container"><div class="header">Header</div><div class="sidebar">Sidebar</div><div class="main">Main Content</div><div class="footer">Footer</div>
</div></body>
</html>

在这里插入图片描述

示例 3: 使用 grid-auto-flow 创建动态布局

此示例展示了如何使用 grid-auto-flow 属性来创建一个能够根据内容自适应的网格布局。这里我们创建了一个项目列表,这些项目将根据可用空间自动排列。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid 动态布局示例</title>
<style>.grid-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;grid-auto-flow: dense; /* 允许更灵活的填充 */}.grid-item {background-color: lightyellow;padding: 20px;border: 1px solid #ddd;}.large {grid-column: span 2; /* 跨越两列 */}
</style>
</head>
<body><div class="grid-container"><div class="grid-item">Item 1</div><div class="grid-item large">Large Item (Span 2 Columns)</div><div class="grid-item">Item 2</div><div class="grid-item">Item 3</div><div class="grid-item">Item 4</div><div class="grid-item">Item 5</div><div class="grid-item">Item 6</div>
</div></body>
</html>

在这里插入图片描述

这些示例展示了 CSS Grid 的强大功能,它不仅可以让开发者轻松创建复杂的布局结构,还能实现响应式设计,使页面在不同设备上都有良好的显示效果。通过控制网格线、轨道大小、项目位置以及流动方式,你可以构建出既美观又实用的网页布局。

4. 表格布局(Table Layout)

虽然不常用作整体页面布局,但在某些情况下,如显示数据表时,使用 display: table 等属性可以创建基于表格的布局。

下面是一个使用 CSS 表格布局的示例。这个例子展示了如何使用 display: tabledisplay: table-rowdisplay: table-cell 等属性来创建一个类似于 HTML <table> 的布局。这种布局方式适用于需要模拟表格结构但又不想使用实际的 <table> 元素的情况。

示例:使用 CSS 创建表格布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 表格布局示例</title>
<style>.table-container {display: table;width: 100%;border-collapse: collapse; /* 合并边框 */}.row {display: table-row;}.cell {display: table-cell;padding: 15px;border: 1px solid #ddd;text-align: center;vertical-align: middle;}.header-cell {background-color: #f4f4f4;font-weight: bold;}
</style>
</head>
<body><div class="table-container"><div class="row"><div class="cell header-cell">Header 1</div><div class="cell header-cell">Header 2</div><div class="cell header-cell">Header 3</div></div><div class="row"><div class="cell">Row 1, Cell 1</div><div class="cell">Row 1, Cell 2</div><div class="cell">Row 1, Cell 3</div></div><div class="row"><div class="cell">Row 2, Cell 1</div><div class="cell">Row 2, Cell 2</div><div class="cell">Row 2, Cell 3</div></div>
</div></body>
</html>

在这里插入图片描述

解释:
  • .table-container: 使用 display: table 来定义一个容器作为表格。width: 100%; 让表格占据父元素的全部宽度。
  • .row: 使用 display: table-row 来定义每一行。这相当于 HTML 中的 <tr> 标签。
  • .cell: 使用 display: table-cell 来定义每个单元格。这相当于 HTML 中的 <td><th> 标签。这里设置了内边距(padding)、边框(border)和文本对齐方式。
  • .header-cell: 定义了表头单元格的样式,使用了背景颜色和加粗字体。

这种方法的一个优点是,它允许你使用语义化更强的 HTML 结构(如 <div>),同时仍然能够实现类似表格的布局效果。此外,这种方式在某些情况下可以提供更好的灵活性,比如当你想要更精细地控制布局或应用复杂的样式时。不过,在现代开发中,对于大多数布局需求,通常会优先考虑使用 Flexbox 或 Grid 布局。

5. 绝对定位(Absolute Positioning)

使用 position: absolute 可以将元素从文档流中移出,并相对于最近的已定位祖先元素进行定位。

下面是一个使用 CSS 绝对定位(Absolute Positioning)的示例。这个例子展示了如何将一个元素相对于其最近的已定位祖先元素进行定位。如果不存在这样的祖先元素,则相对于浏览器窗口进行定位。

示例:使用 position: absolute 创建绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 绝对定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.relative-container {position: relative; /* 确定相对定位 */width: 100%;height: 200px;background-color: #f4f4f4;padding: 20px;box-sizing: border-box;}.absolute-box {position: absolute; /* 绝对定位 */top: 50px;          /* 距离顶部 50px */left: 50px;         /* 距离左边 50px */width: 200px;height: 100px;background-color: lightblue;padding: 10px;box-sizing: border-box;}.text {margin-top: 20px;}
</style>
</head>
<body><div class="relative-container"><div class="absolute-box">我是绝对定位的盒子。</div><p class="text">我是相对定位容器中的文本。</p>
</div></body>
</html>

在这里插入图片描述

解释:
  • .relative-container: 使用 position: relative 来定义一个相对定位的容器。这使得任何在其内部设置了 position: absolute 的子元素都会相对于这个容器来定位,而不是相对于整个页面。同时设置了宽度、高度和背景颜色,以便更容易观察效果。

  • .absolute-box: 使用 position: absolute 来创建一个绝对定位的盒子。通过设置 topleft 属性,可以精确控制该盒子相对于最近的已定位祖先元素的位置。这里我们让它距离顶部 50px,距离左侧 50px。此外,还设置了宽度、高度、背景颜色和内边距。

  • .text: 这个类只是为了让文本在容器中有一定的间距,不影响绝对定位的演示。

在这个例子中,.absolute-box 将会相对于 .relative-container 定位,即使 .relative-container 内还有其他内容,.absolute-box 也会根据指定的 topleft 值出现在固定位置上。如果你移除 .relative-containerposition: relative,那么 .absolute-box 将会相对于浏览器窗口定位。

绝对定位非常适合用于需要精确定位的元素,比如模态框、工具提示或导航菜单等。不过需要注意的是,绝对定位的元素会被从正常的文档流中移出,这意味着它们不会影响其他元素的位置,并且可能会覆盖其他内容,所以在设计时要特别注意这一点。

6. 相对定位(Relative Positioning)

position: relative 使得元素相对于其正常位置进行偏移,但不会脱离文档流。

下面是一个使用 CSS 相对定位(Relative Positioning)的示例。相对定位允许你相对于元素原本的位置进行偏移,但不会将其从文档流中移出。这意味着其他内容会继续围绕着它布局,就像它没有被移动一样。

示例:使用 position: relative 创建相对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 相对定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.container {background-color: #f4f4f4;padding: 20px;box-sizing: border-box;}.relative-box {position: relative; /* 相对定位 */top: 20px;          /* 向下偏移 20px */left: 20px;         /* 向右偏移 20px */width: 200px;height: 100px;background-color: lightblue;padding: 10px;box-sizing: border-box;}.text {margin-top: 20px;}
</style>
</head>
<body><div class="container"><div class="relative-box">我是相对定位的盒子。</div><p class="text">我是容器中的文本,环绕在相对定位的盒子周围。</p>
</div></body>
</html>

在这里插入图片描述

解释:
  • .container: 定义了一个简单的背景色和内边距,作为相对定位盒子的父容器。

  • .relative-box:

    • 使用 position: relative 来创建一个相对定位的盒子。
    • top: 20px;left: 20px; 让这个盒子相对于它原本的位置向下和向右各偏移 20px。
    • 设置了宽度、高度、背景颜色和内边距,以便更容易观察效果。
  • .text: 这个类只是为了让文本在容器中有一定的间距,并展示相对定位盒子周围的文本如何不受其位置变化的影响。

在这个例子中,.relative-box 将会相对于它原本应该在的位置移动,但是它的原始空间仍然会被保留,因此 .text 仍然会在 .relative-box 的下方,好像它没有被移动过一样。

相对定位非常适合用来微调元素的位置,而不需要改变页面的整体布局。它也常用于为绝对定位的子元素提供一个参考点。例如,你可以将一个父元素设置为相对定位,然后让它的子元素使用绝对定位来相对于父元素进行精确定位。

7. 固定定位(Fixed Positioning)

position: fixed 允许元素相对于浏览器窗口固定位置,即使页面滚动也保持不动。

下面是一个使用 CSS 固定定位(Fixed Positioning)的示例。固定定位允许你将元素相对于浏览器窗口进行定位,即使页面滚动,该元素也会保持在相同的位置。这对于创建导航栏、浮动按钮或任何需要始终可见的界面元素非常有用。

示例:使用 position: fixed 创建固定定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 固定定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.content {height: 2000px; /* 让内容足够长以启用滚动 */background: linear-gradient(135deg, #f06, #396);padding: 20px;box-sizing: border-box;}.fixed-box {position: fixed; /* 固定定位 */top: 10px;       /* 距离顶部 10px */right: 10px;     /* 距离右侧 10px */width: 200px;padding: 10px;background-color: lightblue;border: 1px solid #ccc;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);z-index: 1000;   /* 确保它覆盖其他内容 */}
</style>
</head>
<body><div class="fixed-box">我是固定定位的盒子。<br>页面滚动时我仍然会保持在这里。
</div><div class="content"><p>滚动页面查看固定定位的效果。</p><!-- 其他内容 -->
</div></body>
</html>

在这里插入图片描述

解释:
  • .fixed-box:

    • 使用 position: fixed 来创建一个固定定位的盒子。
    • top: 10px;right: 10px; 让这个盒子距离浏览器窗口的顶部和右侧各 10px。
    • 设置了宽度、内边距、背景颜色、边框和阴影,以便更容易观察效果。
    • z-index: 1000; 确保固定定位的盒子覆盖页面上的其他内容,避免被遮挡。
  • .content:

    • 定义了一个足够长的高度来启用页面滚动,同时设置了渐变背景和一些填充,模拟页面的主要内容。

在这个例子中,.fixed-box 将会相对于浏览器窗口保持固定位置,无论用户如何滚动页面,它的位置都不会改变。这使得固定定位非常适合用于创建导航栏、返回顶部按钮或其他需要一直可见的UI组件。

8. 粘性定位(Sticky Positioning)

position: sticky 结合了相对定位和固定定位的特点,当用户滚动到某个阈值时,元素会“粘”在视口的特定位置。

下面是一个使用 CSS 粘性定位(Sticky Positioning)的示例。粘性定位是一种混合了相对定位和固定定位的行为:元素在页面滚动到特定阈值之前表现得像相对定位,一旦达到这个阈值,它就会“粘”在视口的某个位置,就像固定定位一样。

示例:使用 position: sticky 创建粘性定位布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 粘性定位示例</title>
<style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.container {padding: 20px;box-sizing: border-box;}.content {height: 2000px; /* 让内容足够长以启用滚动 */background: linear-gradient(135deg, #f06, #396);padding: 20px;box-sizing: border-box;}.sticky-box {position: -webkit-sticky; /* Safari */position: sticky;top: 10px; /* 当滚动到顶部时,盒子将停在这里 */background-color: lightblue;padding: 10px;border: 1px solid #ccc;margin-bottom: 20px;}
</style>
</head>
<body><div class="container"><div class="sticky-box">我是粘性定位的盒子。<br>滚动页面,我会在到达顶部 10px 的时候停下来。</div><div class="content"><p>滚动页面查看粘性定位的效果。</p><!-- 其他内容 --><p>继续滚动...</p><p>更多内容...</p></div>
</div></body>
</html>

在这里插入图片描述

解释:
  • .sticky-box:

    • 使用 position: -webkit-sticky;position: sticky; 来创建一个粘性定位的盒子。注意 -webkit-sticky 是为了兼容 Safari 浏览器。
    • top: 10px; 设置了当页面滚动到这个盒子顶部距离浏览器窗口顶部 10px 时,它会“粘”在那里。
    • 设置了背景颜色、内边距、边框和一些底部外边距,以便更容易观察效果。
  • .content:

    • 定义了一个足够长的高度来启用页面滚动,同时设置了渐变背景和一些填充,模拟页面的主要内容。

在这个例子中,.sticky-box 在页面初始加载时表现得像相对定位,随着页面的滚动,一旦它的顶部边缘距离浏览器窗口顶部 10px,它就会“粘”住不动,直到页面滚动方向改变或离开其父容器的作用范围。这使得粘性定位非常适合用于创建随滚动固定的导航栏、侧边栏或其他需要在滚动过程中保持可见的UI组件。

粘性定位的一个常见用例是创建一个随着用户滚动页面而固定在顶部的导航菜单,但仅当用户滚动到该元素的位置时才生效。这种方式可以提供更好的用户体验,因为用户可以在浏览页面的同时轻松访问重要的导航链接。

9. 多列布局(Multi-column Layout)

CSS 多列布局可以让内容自动分布在多个列中,非常适合文本内容的排版。

当然,下面是一个使用 CSS 多列布局(Multi-column Layout)的示例。多列布局非常适合用来展示大量的文本内容,如新闻文章、博客帖子等,它可以让文本自动分布在多个列中,从而提高可读性和美观性。

示例:使用 column-countcolumn-gap 创建多列布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 多列布局示例</title>
<style>body {margin: 0;padding: 20px;font-family: Arial, sans-serif;background-color: #f4f4f4;}.multicol-container {column-count: 3; /* 设置为三列 */column-gap: 20px; /* 列之间的间距 */background-color: white;padding: 15px;box-sizing: border-box;}.multicol-container p {margin: 0; /* 移除段落默认的上下边距 */line-height: 1.6; /* 设置行高以增加可读性 */font-size: 16px;}@media (max-width: 768px) {.multicol-container {column-count: 2; /* 在较小屏幕上减少为两列 */}}@media (max-width: 480px) {.multicol-container {column-count: 1; /* 在非常小的屏幕上变为单列 */}}
</style>
</head>
<body><div class="multicol-container"><p>这是多列布局中的第一段文字。多列布局非常适合用于显示大量文本内容,如新闻文章或博客帖子。它可以提高文本的可读性和页面的美观性。</p><p>这是第二段文字。使用 CSS 的多列属性,你可以轻松创建响应式的多列布局,根据屏幕大小自动调整列数。</p><p>第三段文字。通过设置 column-count 和 column-gap 属性,你可以控制列的数量和列之间的间距。</p><p>第四段文字。在不同的屏幕尺寸下,我们可以使用媒体查询来调整列数,确保布局在各种设备上都能良好显示。</p><p>第五段文字。CSS 多列布局不仅限于文本,还可以包含图片和其他 HTML 元素,为网页设计提供了更多的灵活性。</p>
</div></body>
</html>

在这里插入图片描述

解释:
  • .multicol-container:

    • 使用 column-count: 3; 来指定容器内的文本应该分布在三列中。
    • column-gap: 20px; 设置了列与列之间的间距为 20px。
    • 添加了背景颜色、内边距,并设置了盒模型为 box-sizing: border-box; 以便更好地控制布局。
  • .multicol-container p:

    • 移除了段落默认的上下边距,以避免不必要的空白。
    • 设置了行高和字体大小,以提高文本的可读性。
  • 媒体查询:

    • 当屏幕宽度小于等于 768px 时,将列数减少到两列 (column-count: 2;)。
    • 当屏幕宽度小于等于 480px 时,进一步减少到单列 (column-count: 1;),以适应移动设备的小屏幕。

这个例子展示了如何使用 CSS 的 column-countcolumn-gap 属性来创建一个多列布局,并通过媒体查询使其响应式。多列布局非常适合用于需要分栏显示文本的场景,比如杂志风格的网页设计或长篇文章的排版。

选择合适的布局方式

选择哪种布局方式取决于你的具体需求。对于简单的布局,可能 Flexbox 就足够了;而对于更复杂的应用,CSS Grid 提供了更大的灵活性。同时,理解每种布局方式的优缺点可以帮助你更好地决定何时使用它们。随着 Web 标准的发展,新的布局技术也会不断涌现,因此保持学习是很重要的。

相关文章:

第6章:布局 --[CSS零基础入门]

CSS 布局是网页设计中至关重要的一个方面&#xff0c;它决定了页面上元素的排列和展示方式。以下是几种常见的 CSS 布局方法和技术&#xff1a; 1. 浮动布局&#xff08;Float Layout&#xff09; 浮动布局&#xff08;Float Layout&#xff09;曾经是网页设计中创建多列布局…...

kubeadm安装K8s集群基础环境配置

kubeadm安装K8s集群基础环境配置 1.首先确保所有机器可以通信&#xff0c;然后配置主机hosts文件&#xff1b;2.关闭所有节点关闭防火墙、selinux、swap&#xff1b;3.将桥接的IPv4流量传递到 iptables&#xff1b;4.安装常用工具包&#xff1b;5.安装时间同步工具ntpdate&…...

计算机毕业设计Python医疗问答系统 医疗可视化 BERT+LSTM+CRF深度学习识别模型 机器学习 深度学习 爬虫 知识图谱 人工智能 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

学在西电录播课使用python下载,通过解析m3u8协议、多线程下载ts视频块以及ffmpeg合并

本文涵盖的内容仅供个人学习使用&#xff0c;如果侵犯学校权利&#xff0c;麻烦联系我删除。 初衷 研究生必修选逃&#xff0c; 期末复习怕漏过重点题目&#xff0c;但是看学在西电的录播回放课一卡一卡的&#xff0c;于是想在空余时间一个个下载下来&#xff0c;然后到时候就…...

攻防世界杂项刷题笔记(引导模式)13-23

引言&#xff1a;14包括提取文件和流量分析&#xff0c;22很新颖&#xff01;&#xff01;其他的都是常规隐写 13.base64stego 经过上一次如来十三掌的磨练&#xff0c;这题在看到题干“十三掌”的时候我是丝毫不慌张的。附件给了压缩包&#xff0c;考虑是不是伪加密&#xf…...

基于单片机的智能农田灌溉节水系统设计及应用

摘 要 &#xff1a; 针对传统的灌溉方法浪费水资源节水系统设计。该系统从节水角度出发&#xff0c;对传感器和主电路进行了设计&#xff0c;主要采集灌溉地的湿度与温度数据&#xff0c;根据测量土壤中的温度与湿度作为主要参数&#xff0c;对农田灌溉节水系统进行实时控制&am…...

高校毕业生离校就业数据分析管理平台的设计与实现(Java毕业设计)教务管理、就业统计

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…...

1、SQL语言

分类方式 类别描述 部署方式 嵌入式/单机/双机/集群/分布式/云数据库 业务类型 OLTP数据库/OLAP数据库/流数据库/时序数据库 存储介质 内存数据库/磁盘数据库/SSD数据库/SCM数据库 年代 第一代是单机数据库/第二代是集群数据库/第三代是分布式数据库和云原生数据库/第…...

spark sql 环境安装,java 默认路径和 安装配置!

yum安装java 查看默认路径 update-alternatives --config java # Java 环境变量 export JAVA_HOME/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.412.b08-1.el7_9.x86_64/jreexport PATH$JAVA_HOME/bin:$PATH# Spark 环境变量 export SPARK_HOME/home/vagrant/soft/sparkexport PATH…...

【CMD、PowerShell和Bash设置代理】

【CMD、PowerShell和Bash设置代理】 1. CMD&#xff08;命令提示符&#xff09;临时设置代理&#xff08;只对当前会话有效&#xff09;&#xff1a;查看当前代理设置&#xff1a;清除临时代理设置&#xff1a;永久设置代理&#xff08;对所有新的 CMD 会话有效&#xff09;&am…...

分区之间的一种度量方法-覆盖度量(Covering Metric)

分区之间的一种度量方法——覆盖度量&#xff08;Covering Metric&#xff09;&#xff0c;用于量化一个分区如何被另一个分区覆盖或近似。以下是逐步详细解释&#xff1a; 1. 背景与符号说明 分区的概念&#xff1a; 分区是将一个集合&#xff08;这里是 { 1 , … , n } \{…...

HarmonyOS(64) wrapBuilder 全局@Builder使用利器

WrapBuilder 全局Builder是什么什么时候使用wrapBuilderBuilder的限制参考资料 全局Builder是什么 局部Builder的定义方法如下&#xff1a; //定义局部Builder Builder MyBuilderFunction() {} //使用方法 this.MyBuilderFunction()全局Builder定义语法如下&#xff1a; //全…...

【计算机毕设】基于Spark猫眼电影票房数据分析预测推荐系统(完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程)✅

目录 【计算机毕设】基于Spark猫眼电影票房数据分析预测推荐系统&#xff08;完整系统源码数据库开发笔记详细部署教程虚拟机分布式启动教程&#xff09;✅ 一、项目背景 二、研究目的 三、项目意义 四、项目功能 五、项目创新点 六、开发技术介绍 七、算法介绍 八、数…...

问卷调查模板

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>问卷调查</title><style>body {font-fam…...

hadoop单机安装

步骤 1:安装 Java 安装 OpenJDK bash sudo yum install -y java-1.8.0-openjdk 验证 Java 安装 bash java -version 输出类似以下内容表示成功: arduino openjdk version “1.8.0_xxx” 步骤 2:下载 Hadoop 下载 Hadoop 安装包 前往 Hadoop 官方下载页面,获取最新稳…...

Android笔记【15】跳转页面返回信息

一、问题 学习一段代码 val intent Intent(thisSecondActivity, MainActivity::class.java) intent.putExtra("extra_data", data) startActivity(intent) 二、内容 这段代码是在 Android 应用中启动一个新的活动&#xff08;Activity&#xff09;&#xff0c;具…...

MATLAB深度学习(七)——ResNet残差网络

一、ResNet网络 ResNet是深度残差网络的简称。其核心思想就是在&#xff0c;每两个网络层之间加入一个残差连接&#xff0c;缓解深层网络中的梯度消失问题 二、残差结构 在多层神经网络模型里&#xff0c;设想一个包含诺干层自网络&#xff0c;子网络的函数用H(x)来表示&#x…...

推荐几种主流数据仓库:深度剖析与对比

引言 随着数据量的不断增长&#xff0c;数据仓库技术在企业的数据管理和分析中扮演着越来越重要的角色。不同的数据仓库系统在性能、架构、功能和适用场景上各有特点。本文将详细介绍目前市场上几种主流的数据仓库&#xff0c;帮助你更好地了解各个数据仓库的特性&#xff0c;选…...

编译原理——词法分析器的实现

实验目的 深入理解有限自动机及其应用编辑一个词法分析器&#xff0c;了解计算机识别源程序字符串的过程。 实验内容和要求 实验内容&#xff1a;处理c语言源程序&#xff0c;对源程序进行编译预处理&#xff08;去除注释、无用的回车换行找到包含的文件等&#xff09;之后&a…...

【MySQL】数据库 Navicat 可视化工具与 MySQL 命令行基本操作

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…...

hive分区分桶、数据倾斜总结

一、hive的基本概念 hive是一个构建在hadoop上的数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张数据库表并提供数据查询功能 二、hive的特点 &#xff08;1&#xff09;数据是存储在hdfs上 &#xff08;2&#xff09;底层是将sql转换为MapReduce任务进行计算 …...

MySQL 函数

在 MySQL 中&#xff0c;函数&#xff08;Function&#xff09;是一种用于封装一段逻辑处理的编程结构&#xff0c;可以在 SQL 语句中调用并返回单个值。函数和存储过程类似&#xff0c;都是存储在服务器端的程序单元&#xff0c;但它们的应用场景和使用方式有所不同。函数通常…...

Java 并发舞台:多线程小精灵的奇幻冒险之旅

1.线程池的拒绝策略有哪些&#xff1f; Java中的线程池提供了几种不同的拒绝策略&#xff0c;当线程池无法处理新的任务时&#xff08;比如因为线程池已满并且工作队列也满了&#xff09;&#xff0c;这些策略会决定如何处理新提交的任务。ThreadPoolExecutor类中定义了以下四…...

PostgreSQL 性能优化全方位指南:深度提升数据库效率

PostgreSQL 性能优化全方位指南&#xff1a;深度提升数据库效率 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 在现代互联网应用中&#xff0c;数据库性能优化是系统优化中至关重要的一环&#xff0c;尤其对于数据密集型和高并发的应用而言&am…...

【Go 基础】并发相关

并发相关 CAS CAS算法&#xff08;Compare And Swap&#xff09;&#xff0c;是原⼦操作的⼀种,&#xff0c;CAS 算法是⼀种有名的⽆锁算法。⽆锁编程&#xff0c;即不使⽤锁的情况下实现多线程之间的变量同步。可⽤于在多线程编程中实现不被打断的数据交换操作&#xff0c;从…...

5G CPE终端功能及性能评测(四)

5G CPE 功能性能评测 本文选取了几款在工业应用领域应用较多的5G CPE,对其功能和性能进行了对比评测。功能方面主要对比了网络接口数量,VPN功能 支持情况。以下测试为空口测试,测试结果受环境影响较大,性能仅供参考。总体看,高通X55芯片下行最优,速率稳定。 功能 对比CPE…...

开源模型应用落地-qwen模型小试-Qwen2.5-7B-Instruct-tool usage入门-集成心知天气(二)

一、前言 Qwen-Agent 是一个利用开源语言模型Qwen的工具使用、规划和记忆功能的框架。其模块化设计允许开发人员创建具有特定功能的定制代理,为各种应用程序提供了坚实的基础。同时,开发者可以利用 Qwen-Agent 的原子组件构建智能代理,以理解和响应用户查询。 本篇将介绍如何…...

JS进阶DAY3|事件(一)事件监听及事件类型

目录 一、事件监听方式&#xff08;绑定&#xff09; 1.1 DOM0级事件 1.2 DOM2级事件 1.3 区别 二、事件类型 2.1 鼠标事件 2.2 键盘事件 2.3 焦点事件 2.4 表单事件 2.5 加载和卸载事件 2.6 滚动事件 2.7 触摸事件&#xff08;在支持触摸的设备上&#xff09; 一…...

数据结构与算法之美:单链表

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《数据结构与算法之美》、《编程之路》、《题海拾贝》 欢迎点赞&#xff0c;关注&#xff01; 目录 …...

从ctfwiki开始的pwn之旅 6.ret2reg

原理 Ret2reg&#xff0c;即攻击绕过地址混淆(ASLR)&#xff0c;返回到寄存器地址 一般用于开启ASLR的ret2shellcode题型。 出现该漏洞的代码的典型特征是&#xff1a;程序中存在strcpy的字符串拷贝函数。 ret2reg&#xff08;返回到寄存器地址攻击&#xff09;是一种利用技…...

GESP202412 7级 T2

闲话 花了一个小时。 主要原因&#xff1a;条初始值硬控我半小时&#xff0c;题目看错硬控我半小时&#xff08;悲&#xff09;。 正文 看题目&#xff0c;就是求从哪个点出发所得到的所有单调下降序列的总长度最长(这个描述好奇怪&#xff0c;不过意思是对的)。 题目中说…...

LeetCode---426周赛

题目列表 3370. 仅含置位位的最小整数 3371. 识别数组中的最大异常值 3372. 连接两棵树后最大目标节点数目 I 3373. 连接两棵树后最大目标节点数目 II 一、仅含置位位的最小整数 题目要求我们返回二进制数位全为1&#xff0c;且大于 n 的最小的整数&#xff0c;我们可以直…...

git 拉取代码时报错 gitignore Please move or remove them before you merge.

git 拉取代码时报错&#xff0c; The following untracked working tree files would be overwritten by merge: .gitignore Please move or remove them before you merge. 当你在使用 Git 进行代码拉取&#xff08;通常是执行 git pull 或 git merge 命令&#xff09;时遇到这…...

devops-Dockerfile+Jenkinsfile方式部署Java前后端应用

文章目录 概述部署前端Vue应用一、环境准备1、Dockerfile2、.dockerignore3、nginx.conf4、Jenkinsfile 二、Jenkins部署1、新建任务2、流水线3、Build Now 构建 & 访问 Springboot后端应用1. 准备工作2. 创建项目结构3. 编写 Dockerfile后端 Dockerfile (backend/Dockerfi…...

华为云鸿蒙应用入门级开发者认证考试题库(理论题和实验题)

注意&#xff1a;考试链接地址&#xff1a;华为云鸿蒙应用入门级学习认证_华为云鸿蒙应用入门级开发者认证_华为云开发者学堂-华为云 当前认证打折之后是1元&#xff0c;之后原价700元&#xff0c;大家尽快考试&#xff01;考试题库里面答案不一定全对&#xff0c;但是可以保证…...

Lua元表和元方法的使用

元表是一个普通的 Lua 表&#xff0c;包含一组元方法&#xff0c;这些元方法与 Lua 中的事件相关联。事件发生在 Lua 执行某些操作时&#xff0c;例如加法、字符串连接、比较等。元方法是普通的 Lua 函数&#xff0c;在特定事件发生时被调用。 元表包含了以下元方法&#xff1…...

自动驾驶算法——卡尔曼滤波器平滑感知车道线参数【C++代码实现】

1.算法原理 在工程实践中,由于感知识别到的车道线偶尔存在较大的跳变,导致后端控制算法计算出的控制角度也存在较大的跳变,所以我们需要对感知输入的车道线系数进行平滑处理。 已知卡尔曼滤波算法主要分为以下几大步骤: 感知将车道线以三次螺旋曲线方程 y = c 0 + c 1 x +…...

浅谈Scala语言

一、Scala语言基础 1.1 语法结构 Scala的语法是一种融合了多种编程范式的设计&#xff0c;它结合了函数式编程和面向对象编程的优点。这种语法结构使得Scala既具有高度的表达能力&#xff0c;又保持了代码的简洁性。例如&#xff0c;Scala支持类型推断&#xff0c;这意味着在…...

可视化建模以及UML期末复习篇----UML图

这是一篇相对较长的文章&#xff0c;如你们所见&#xff0c;比较详细&#xff0c;全长两万字。我不建议你们一次性看完&#xff0c;直接跳目录找你需要的知识点即可。 --------欢迎各位来到我UML国&#xff01; 一、UML图 总共有如下几种&#xff1a; 用例图&#xff08;Use Ca…...

音视频入门基础:MPEG2-TS专题(13)——FFmpeg源码中,解析Section Header的实现

一、引言 在《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;11&#xff09;—— TS中的Section》中讲述了Section Header的基本概念&#xff0c;本文讲述FFmpeg源码中是怎样解析Section Header的。 二、parse_section_header函数的定义 FFmpeg源码中通过parse_section…...

SQL UCASE() 函数:转换字符串为大写

SQL UCASE() 函数&#xff1a;转换字符串为大写 概述 在SQL中&#xff0c;UCASE() 函数用于将字符串中的所有字符转换为大写。这是一个非常实用的函数&#xff0c;尤其在处理大量文本数据时&#xff0c;确保数据的一致性和准确性。本文将详细介绍UCASE() 函数的用法、示例以及…...

机器学习周报(12.2-12.8)

文章目录 摘要Abstract Vision Transformer1 原理2 代码 摘要 本周学习了Vision Transformer (ViT) 的基本原理及其实现&#xff0c;并完成了基于PyTorch的模型训练、验证和预测任务。深入理解了ViT如何将图像分割成patch作为输入序列&#xff0c;并结合Transformer Encoder处…...

【机器人】系统辨识之激励轨迹设计(傅里叶级数)

在机器人参数辨识中使用傅里叶级数&#xff0c;主要是为了生成一种激励轨迹&#xff0c;具有良好的数学特性&#xff0c;同时符合物理要求。傅里叶级数的特性使其在机器人动力学辨识的激励轨迹设计中非常常用。 1. 为什么需要激励轨迹&#xff1f; 激励轨迹的作用是通过驱动机…...

JVM八股文精简

目录 简述JVM类加载过程简述JVM中的类加载器简述双亲委派机制双亲委派机制的优点简述JVM内存模型简述程序计数器简述虚拟机栈简述本地方法栈简述JVM中的堆简述方法区简述运行时常量池简述Java创建对象的过程简述JVM给对象分配内存的策略Java对象内存分配是如何保证线程安全的如…...

PyTorch基本使用——张量的索引操作

在操作张量时&#xff0c;经常要去获取某些元素进行处理或者修改操作&#xff0c;在这里需要了解torch中的索引操作。 准备数据&#xff1a; data torch.randint(0,10,[4,5]) print(data--->,data)输出结果&#xff1a; data---> tensor([[3, 9, 4, 0, 5],[7, 5, 9, …...

mysql集群MHA方式部署

1. 基本信息 部署机器角色部署路径192.168.242.71MySQL-Mater MHA-NodeMySQL: /alidata1/mysql-8.0.28192.168.242.72MySQL-Slave MHA-NodeMHA-Node: /alidata1/admin/tools/mha4mysql-node-0.58192.168.242.73MySQL-Slave MHA-Node192.168.242.74MHA-ManagerMHA-Manager: …...

Spring Boot中实现JPA多数据源配置指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文详细介绍了在Spring Boot项目中配置和使用JPA进行多数据源管理的步骤。从引入依赖开始&#xff0c;到配置数据源、创建DataSource bean、定义实体和Repository&#xff0c;最后到配置事务管理器和使用多数据…...

【计算机网络】实验12:网际控制报文协议ICMP的应用

实验12 网际控制报文协议ICMP的应用 一、实验目的 验证ping命令和tracert命令的工作原理。 二、实验环境 Cisco Packet Tracer模拟器 三、实验过程 1.构建网络拓扑并进行信息标注&#xff0c;将所需要配置的IP地址写在对应的主机或者路由器旁边&#xff0c;如图1所示。 图…...

MVC基础——市场管理系统(二)

文章目录 项目地址三、Produtcts的CRUD3.1 Products列表的展示页面(Read)3.1.1 给Product的Model里添加Category的属性3.1.2 View视图里展示Product List3.2 增加Product数据(Add)3.2.1 创建ViewModel用来组合多个Model3.2.2 在_ViewImposts里引入ViewModels3.2.3 添加Add的…...

使用Redis的Bitmap实现签到功能

1.基础签到实现 1.1代码如下Service Slf4j public class SignInService {Autowiredprivate StringRedisTemplate redisTemplate;private static final String SIGN_KEY_PREFIX "sign:";/*** 用户签到* param userId 用户ID* param date 签到日期*/public boolean s…...