首页 > 其他分享 >《前端技术基础》第03章 CSS 布局【合集】

《前端技术基础》第03章 CSS 布局【合集】

时间：2025-01-23 12:28:03浏览次数：3  
标签：03 示例 color 元素 Item grid background 合集 CSS

CSS 布局（Cascading Style Sheets Layout）是网页设计的核心，定义元素位置、大小和排列，构建页面结构。其布局模式多样：Flexbox 通过display:flex激活，借助justify-content和align-items灵活排列元素，适用于导航栏、卡片列表；CSS Grid 用grid-template-columns和grid-template-rows定义二维网格定位元素，常用于电商、多列图文排版；传统流式布局基于文档流，元素顺序排列，自适应屏幕宽度，保障页面可读性。这些模式协同，助力开发者打造适配多设备的优质布局。

第一节 传统CSS 布局方式

CSS（Cascading Style Sheets）作为用于网页样式设计的重要语言，其传统布局方式在网页页面的构建中发挥着关键作用。各自以不同的方式塑造着网页的“外观”，以下为您详细介绍：

1.1 文档流（Document Flow）

传统CSS 布局中，HTML 元素的排版主要遵循文档流规则。文档流是一种基于 HTML 文档中元素出现顺序的自然排版机制。块级元素（如<div>、<p>、<h1> - <h6>等）在文档流中会独占一行，自上而下依次排列，其宽度默认与父元素宽度一致，高度则由内容决定。

示例1-1： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档流与默认布局示例</title>
    <style>
        div {
            background-color: lightblue;
            margin: 5px;
        }
        p {
            background-color: lightgreen;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>这是一个块级元素div</div>
    <p>这是一个段落元素p</p>
    <div>这是另一个块级元素div</div>
</body>
</html>
运行结果：

行内元素（如<span>、<a>、<img>等）则会在同一行内按照顺序排列，直到该行空间不足时才会换行。行内元素的宽度和高度由其内容决定，并且不能直接设置宽度和高度属性（部分特殊的行内元素如<img>除外）。

示例1-2： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素在文档流中的布局示例</title>
    <style>
        span {
            background-color: lightcoral;
            margin: 5px;
        }
        a {
            background-color: lightyellow;
            margin: 5px;
        }
    </style>
</head>
<body>
    <span>这是一个行内元素span</span>
    <a href="#">这是一个链接元素a</a>
    <span>这是另一个行内元素span</span>
</body>
</html>
运行结果：

1.2 显示属性（Display）

display属性是 CSS 布局中的关键属性之一，它用于定义元素的显示类型，从而改变元素在文档流中的默认行为。以下为您详细介绍常见的 display 属性值：

1.2.1 块级元素：block

block 将元素显示为块级元素，使其具有块级元素的特性，如独占一行、可以设置宽度和高度等属性。

示例1-3： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:block示例</title>
    <style>
        span {
            display: block;
            background-color: lightblue;
            width: 200px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <span>将行内元素span显示为块级元素</span>
</body>
</html>
运行结果：

1.2.2 行内元素：inline

inline：将元素显示为行内元素，恢复元素的行内显示特性。

示例1-4： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:inline示例</title>
    <style>
        div {
            display: inline;
            background-color: lightgreen;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>将块级元素div显示为行内元素</div>
    <div>这是另一个同样显示为行内元素的div</div>
</body>
</html>
运行结果：

1.2.3 隐藏元素：none

none：隐藏元素，使元素在页面中不显示，并且不占据任何空间。

示例1-5： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:none示例</title>
    <style>
        p {
            display: none;
        }
    </style>
</head>
<body>
    <p>这段文字将不会显示在页面上</p>
</body>
</html>
运行结果（不显示）：

第二节 浮动布局（Float 布局）

为了实现更复杂的布局效果，浮动布局（Float 布局）应运而生。float 属性的引入使得元素可以脱离文档流，向左或向右浮动，直到它的外边缘碰到包含块或者另一个浮动元素的边框为止。这为多列布局和图文混排等复杂布局提供了可能。以下是float属性常见取值及作用：

2.1 左浮动：left

float: left 会使元素向左浮动，脱离正常的文档流，直到其外边缘碰到包含块或另一个浮动元素的边框为止。

示例2-1： 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Left Example</title>
    <style>
       .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

       .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <div class="float-left">元素 1</div>
        <div class="float-left">元素 2</div>
        <div class="float-left">元素 3</div>
    </div>
    <p>这是一段普通文本，用于展示浮动元素与文本的关系。</p>
</body>

</html>
运行结果：

2.2 右浮动：right

float: right 与 float: left 相反，它会使元素向右浮动，直到其右边框碰到包含块的右边框或者另一个浮动元素的左边框。

示例2-2： 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Right Example</title>
    <style>
       .float-right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 10px;
        }

       .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <div class="float-right">元素 1</div>
        <div class="float-right">元素 2</div>
        <div class="float-right">元素 3</div>
    </div>
    <p>这是一段普通文本，用于展示浮动元素与文本的关系。</p>
</body>

</html>
运行结果：

2.2 不浮动：none

float: none 是 float属性的默认值，设置该属性后元素会按照正常的文档流进行排列。

示例2-3： 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float None Example</title>
    <style>
       .float-none {
            float: none;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="float-none">元素 1</div>
    <div class="float-none">元素 2</div>
    <div class="float-none">元素 3</div>
    <p>这是一段普通文本，用于展示不浮动元素与文本的关系。</p>
</body>

</html>
运行结果：

第三节 定位布局（Position 布局）

定位布局（Position 布局）是 CSS 中用于精确控制网页元素位置的重要技术，通过position属性来实现，它有四个常见的值，为网页开发者提供了多样化的定位方式，以下为您详细介绍：

3.1 相对定位（Relative Positioning）

通过position: relative设置，元素相对自身在文档流中的位置偏移，偏移量由top等属性控制，原文档流空间保留。常用于微调元素位置，不影响其他元素布局。

示例3-1： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位示例</title>
    <style>
        div {
            position: relative;
            left: 50px;
            top: 30px;
            width: 150px;
            height: 150px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div>相对定位的元素</div>
</body>
</html>
运行结果：

3.2 绝对定位（Absolute Positioning）

以position: absolute声明，元素相对最近已定位祖先元素（无则相对初始包含块）定位，会脱离文档流，不占原空间，可能覆盖其他元素。适用于创建弹窗、悬浮按钮等独立于文档流的元素。

示例3-2： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位示例</title>
    <style>
        .parent {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .child {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">绝对定位的子元素</div>
    </div>
</body>
</html>
运行结果：

3.3 固定定位（Fixed Positioning）

使用position: fixed实现，元素始终相对浏览器窗口定位，位置不随页面滚动改变。常用于创建固定在页面特定位置的元素，如固定导航栏、侧边快捷按钮。

示例3-3： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位示例</title>
    <style>
        .fixed {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="fixed">固定在底部的元素</div>
    <p>这里是大量的内容，当页面滚动时，底部的元素始终保持可见。</p>
    <p>...</p> <!-- 省略大量内容 -->
</body>
</html>
运行结果：

3.4 粘性定位（Sticky Positioning）

通过position: sticky设置，元素在正常滚动时类似相对定位，滚动到特定位置（由top等属性决定）则固定，之后再恢复相对定位。适合制作长页面中可随滚动固定的目录、标题等。

示例3-4： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘性定位示例</title>
    <style>
        .sticky {
            position: sticky;
            top: 0;
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="sticky">粘性元素</div>
    <p>这里是大量的页面内容，当页面滚动时，粘性元素会在特定位置固定。</p>
    <p>...</p>
</body>
</html>
运行结果：

第四节 弹性盒子布局（Flexbox 布局）

Flexbox（弹性盒子布局模型）是 CSS3 中引入的一种强大的布局技术，它为网页布局带来了极大的灵活性和便捷性。Flexbox 通过将容器元素设置为display:flex，使其内部的子元素可以按照弹性规则进行排列。它有四个常见的值，以下为您详细介绍：

4.1 水平从左到右排列：row

项目在弹性容器内水平排列，从左到右依次分布。适用于构建水平导航栏、水平排列的图标或卡片等布局，让元素在一行内展示，符合常规的阅读和视觉习惯。

示例4-1： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction: row示例</title>
    <style>
       .flex-container {
            display: flex;
            flex-direction: row;
            background-color: lightgray;
        }
       .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </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>
运行结果：

4.2 水平从右到左排列：row-reverse

与row相反，项目水平排列，但顺序是从右到左。在需要改变常规阅读顺序或突出右侧元素时使用，比如在从右向左阅读语言的网页设计中，或者希望右侧元素优先被用户注意到的场景。

示例4-2： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction: row-reverse示例</title>
    <style>
       .flex-container {
            display: flex;
            flex-direction: row-reverse;
            background-color: lightgray;
        }
       .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </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>
运行结果：

4.3 垂直从上到下排列：column

项目在弹性容器内垂直排列，从上到下依次分布。常用于创建垂直菜单、侧边栏以及垂直堆叠的内容区域，能有效利用垂直空间，使页面布局更紧凑、有条理。

示例4-3： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction: column示例</title>
    <style>
       .flex-container {
            display: flex;
            flex-direction: column;
            background-color: lightgray;
        }
       .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </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>
运行结果：

4.4 垂直从下到上排列：column-reverse

与column相反，项目垂直排列且顺序为从下到上。在需要强调底部元素，或创造特殊视觉效果时使用，比如某些创意设计中希望打破常规的竖向排版顺序。

示例4-4： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction: column-reverse示例</title>
    <style>
       .flex-container {
            display: flex;
            flex-direction: column-reverse;
            background-color: lightgray;
        }
       .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </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>
运行结果：

第五节 网格布局（Grid 布局）

Grid 布局（网格布局）是 CSS 中一种强大的二维布局模型，它能够将网页分割为行和列的网格，然后精确地将元素放置到这些网格区域中。与 Flexbox 布局（一维布局）不同，Grid通过将容器元素设置为display:grid，可以同时在水平和垂直方向上进行布局控制，为我们提供了更灵活的布局能力。以下为您详细介绍它的常见取值：

5.1 网格列宽：grid-template-columns

grid-template-columns 定义网格列宽，支持 px、%、vw、vh 等常规单位及 fr 分数单位。如 grid-template-columns: 100px 200px 设两列宽分别为 100px、200px；grid-template-columns: 1fr 2fr 按剩余空间比例分配，第一列占 1 份，第二列占 2 份。

示例5-1： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: 100px 200px;
            gap: 10px;
        }

       .item {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>

</html>
运行结果：

5.2 网格列高：grid-template-rows

  1. grid-template-rows：定义网格行高，单位同 grid-template-columns。如 grid-template-rows: 80px 120px 创建两行，高度分别为 80px、120px ；grid-template-rows: 1fr 3fr 按比例分配行高。
示例5-2： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-rows: 80px 120px;
            gap: 10px;
        }

       .item {
            background-color: lightgreen;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>

</html>
运行结果：

5.3 网格区域：grid-template-areas

grid-template-areas通过自定义命名区域定义布局。先给元素设 grid-area 赋予名称，再在该属性中按名称组合，如 grid-template-areas: "header header" "content sidebar" 划分区域。

示例5-3： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-template-areas:
                "header header"
                "content sidebar";
            gap: 10px;
        }

       .header {
            grid-area: header;
            background-color: orange;
        }

       .content {
            grid-area: content;
            background-color: lightblue;
        }

       .sidebar {
            grid-area: sidebar;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="content">Content</div>
        <div class="sidebar">Sidebar</div>
    </div>
</body>

</html>
运行结果：

5.4 网格间距：grid-gap

grid-gap 是合并写法，设网格单元格间距。grid-row-gap 设行间距，grid-column-gap 设列间距。grid-gap: 10px 20px 即行间距 10px，列间距 20px；单值时行列间距相同。

示例5-4： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            grid-gap: 15px;
        }

       .item {
            background-color: pink;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>

</html>
运行结果：

5.5 网格项目水平对齐：justify-items

justify-items 设置网格项目水平对齐方式，取值 start（左对齐）、end（右对齐）、center（居中对齐）、stretch（拉伸填充，默认值） 。

示例5-5： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px;
            justify-items: center;
            gap: 10px;
        }

       .item {
            background-color: lightcoral;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>
运行结果：

5.6 网格项目垂直对齐：align-items

设置网格项目垂直对齐方式，取值同 justify-items，分别对应顶部对齐、底部对齐、居中对齐和拉伸填充。

示例5-6： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: 100px 100px;
            grid-template-rows: 200px;
            align-items: center;
            gap: 10px;
        }

       .item {
            background-color: lightseagreen;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>

</html>
运行结果：

5.7 网格整体水平对齐：justify-content

align-items用于设置整个网格在容器水平方向上的对齐方式，取值包括start（左对齐）、end（右对齐）、center（居中对齐）、space-around（项目周围均匀分布空间）、space-between（项目间间距相等，两端对齐）、space-evenly（项目及与容器边缘间距相等）、stretch（拉伸网格填充容器）。

示例5-7： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: 100px;
            justify-content: space-around;
            background-color: lightgray;
            padding: 20px;
        }

       .item {
            background-color: white;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>
运行结果：

5.8 网格整体垂直对齐：align-content

align-content 用于设置整个网格在容器垂直方向对齐方式，取值与 justify-content 一致，用于控制网格在垂直方向分布。

示例5-8： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: 100px;
            grid-template-rows: repeat(3, 100px);
            align-content: space-between;
            background-color: lavender;
            height: 400px;
            padding: 20px;
        }

       .item {
            background-color: white;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>
运行结果：

5.9 网格自动生成轨道宽度：grid-auto-columns

grid-auto-columns设置自动生成网格列轨道宽度。项目数超显式列数时，自动生成列宽由此属性决定，如 grid-auto-columns: 200px 。

示例5-9： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: 100px;
            grid-auto-columns: 150px;
            gap: 10px;
        }

       .item {
            background-color: lightyellow;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>
运行结果：

5.10 网格自动生成轨道高度：grid-auto-rows

grid-auto-rows设置自动生成网格行轨道高度。超出显式行数时，自动生成行高按此属性设定，如 grid-auto-rows: 150px 。

示例5-10： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-rows: 100px;
            grid-auto-rows: 120px;
            gap: 10px;
        }

       .item {
            background-color: lightsteelblue;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>
运行结果：

5.11 网格项目自动排列方式：grid-auto-flow

grid-auto-flow控制网格项目自动排列方式。row（默认，按行排列）、column（按列排列）、dense（启用紧凑排列算法，填满网格）。

示例5-11（按列排列）： 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: 100px;
            grid-auto-flow: column;
            gap: 10px;
        }

       .item {
            background-color: lightpink;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>

</html>
示例5-12（紧凑排列）： 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
       .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            grid-auto-flow: dense;
            gap: 10px;
        }

       .item {
            background-color: lightcyan;
            padding: 20px;
        }

       .item:nth-child(2) {
            grid-column: 3;
            grid-row: 2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>

</html>
运行结果：

在这里插入图片描述

标签：03,示例,color,元素,Item,grid,background,合集,CSS
From： https://blog.csdn.net/lowkeyyh/article/details/145321307

相关文章

  • 【Html.js——功能实现】为图片添加景深效果（蓝桥杯真题-2161）【合集】
    目录......
  • 这些国产免费AI工具合集 ，有AI写作、AI办公、AI翻译...让我直接躺平！(建议收藏)
    这些国产免费AI工具合集，涵盖AI写作、AI办公、AI翻译……直接让我躺平！（建议收藏）随着人工智能技术的飞速发展，越来越多的国产AI工具在各个领域崭露头角。不论是写作、办公还是翻译，这些工具不仅功能强大，还支持免费使用，堪称生产力神器。今天就为大家整理了一份国产免费AI工具合集，让......
  • CSS Tooltip
    Atooltipisoftenusedtospecifyextrainformationaboutsomethingwhentheusermovesthemousepointeroveranelement:<!DOCTYPEhtml><html><style>.tooltip{position:relative;display:inline-block;border-bottom:1pxdot......
  • 03现代计算机视觉入门之：什么是图片特征编码
    ##系列文章目录##01现代计算机视觉入门之：什么是图片（6700字/25图）02现代计算机视觉入门之：什么是视频（4900字/22图）03现代计算机视觉入门之：什么是图片特征编码（4000字/16图）04现代计算机视觉入门之：什么是图片分类05现代计算机视觉入门之：什么是目标检测06现代计算机视觉入门之：什么......
  • Springcloud在线问诊平台-毕业设计源码24037
    基于springcloud技术的在线问诊平台的设计与实现摘 要在当今社会，医疗资源分配的不均衡和医疗卫生资源的匮乏成为了制约医疗服务质量提升的关键因素。特别是在广大农村地区和偏远地区，优质的医疗资源更是稀缺。因此，打破地域限制，实现医疗资源的优化配置和高效利用，成为了医疗......
  • 题解：洛谷 P1803 凌乱的yyy / 线段覆盖
    题目https://www.luogu.com.cn/problem/P1803题目大意给定  条线段，第  条线段放在位置 ，现在你需要从这些线段中拿出一些，使得剩下的线段不会重叠。思路考虑贪心。可以发现，按照左端点从小到大排序毫无意义（虽然样例能过）。因此考虑按右端点从小到大排序。然后尽量多放......
  • failed: Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib
    mysql连接时报以下这个错误CannotconnecttoMySQL:DBIconnect('jiwei;host=;port=3306;mysql_read_default_group=client','root',...)failed:Authenticationplugin'caching_sha2_password'cannotbeloaded:/usr/lib64/mysql/plugin/caching......
  • 003. 翻硬币
    003.翻硬币原题链接：P8597[蓝桥杯2013省B]翻硬币解题思路：​ 因为把相邻两个硬币翻转两次相当于不翻，所以最优方案中同一组硬币最多只会翻转一次，故翻转顺序无后效性，考虑贪心：从前往后比较，发现一个不同的硬币就把它和他后面的硬币翻转，计数器累加，这样最后累加结果一定是最优方......
  • 正能量合集
    正能量一定是自己认可的，不认可没有任何意义，只能是打鸡血就要学习Trump大爷那样，不服输，不放弃，遭受暗杀的时候，仍然高呼"Fight!Fight!Fight!"就是要挑战那些一般人不敢做的，要不然年复一年虽然付出了，但还是平庸，没有亮点！所以堵上自己所有的精力，做自己想做的，有价值的，不成功则成仁！......
  • 抽取网易云音乐热门评论：html+css+python+js 音乐与灵魂的碰撞
    抽取网易云音乐热门评论：html+css+python+js音乐与灵魂的碰撞代码链接不说废话，上代码！！！get.py#get.pyimporturllib.requestimporturllib.errorimporturllib.parseimportjson#抓取网易云音乐指定url的热评defget_hotComments(id):url='https://music.163.......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99