-
【CSS动效实战（纯CSS与JS动效）】02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探
一、flex 仿 JD 布局
首先，我们在编辑器中，写上基础代码，当然要在 style 中加上一个 flex 类，用于 flex 布局的定义，这个是必然需要的，在此一定得加上。
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>flex jd page demotitle> <style> .flex{ display:flex; } style> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
1.1 JD 基本布局
基础代码有了，我们直接看 jd 的布局。
我们首先查看当前 JD 首页的头部：
在此我们可以将其图中部分看成一个整体，我们不在乎其内部实现细节，我们此时只需要将这个页面的整体布局划分，那么再到每个块之间对其内部元素进行再一次的细分即可。在此我们将头部看成是一个整体后，再往下看，我们可以将其看做是一个另一个整体，那么整个 flex 布局的方向就是 column，竖轴方向，那么此时我们在 style 中添加一个类，直接类名咩咩咩为 column即可，这个类如下：
<style> .column{ flex-direction: column; } style>- 1
- 2
- 3
- 4
- 5
这个时候我们直接以 body 设置为 flex 布局，并且还需要设置其 flex 方向为 column：
<body class="flex column">- 1
随后在 body 之下添加对应的 div 表示头部，但是此时我们需要添加两个 div ，一个用于头部，另一个用于其主要内容区域，那么此时 body 内的代码如下：
<body class="flex"> <div>div> <div>div> body>- 1
- 2
- 3
- 4
- 5
- 6
此时直接设置第一个 div 的高度值，当然这个高度值你可以随意给一个，在此不做要求，本节只是为了锻炼布局能力。在此我给予这个 div 的高度值为 150 px：
<div>div> <div>div>- 1
- 2
- 3
- 4
此时刷新页面，发现并不能看见任何有用的信息，这个原因是因为背景色都一样你怎么可能看得见，还有就是你也需要给予 div 标签对应的背景颜色，所以在这里使用一种较为常用的颜色，灰和白；灰作为背景 ，白色用于div 背景，此时只需要创建两个样式，一个为背景色类样式，另一个 直接设置所有的 div 标签背景色为白色即可：
<style> .bgcolor { background-color: rgb(230, 230, 230); } div { background-color: white; } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
随后给予 body bgcolor 作为背景色：
<body class="flex column bgcolor">- 1
此时页面效果如下：
这时我们发现，这个页面边缘还是存在一定的空隙，直接给予样式：<style> * { margin: 0; } style>- 1
- 2
- 3
- 4
- 5
这样默认的样式就去除了。
不过我们发现此时的样式还是有些奇怪，因为如果 div 是白色的话为什么只显示了头部的 div 背景色为白色，底部的 div 就像消失了一样，案例来说设置 flex 方向为竖轴后，那么下面的 div 应该会占满空间才是；这个原因其实是当前的高度并没有确定，我们只需要给予 body 的高度为 100个 vh （100%视窗）即可：
<style> body { height: 100vh; } style>- 1
- 2
- 3
- 4
- 5
那这个时候发现还不行，这是因为你还未说明这个装内容的 div 所占高度比例多少，这个时候你直接给予样式
flex:1让其填充剩余空间就ok了：<body class="flex column bgcolor"> <div style="height: 150px;">div> <div style="flex:1">div> body>- 1
- 2
- 3
- 4
- 5
- 6
此时页面刷新后你会发现空白一片，好像也不是很利于观察，这个时候你只需要给予每个 div 的margin 距离即可，直接在 div 中添加对应的样式，此时 div 的样式应该为如下：
<style> div { background-color: white; margin: 4px } style>- 1
- 2
- 3
- 4
- 5
- 6
界面效果如下：
1.2 banner布局
姑且我就叫做 banner吧这个部分，又或者说菜单 :
这部分怎么做呢？首先我们要想到，这个部分在整个内容块之内，并且这个区域应该是处于单独的一个块之中，那就说明，在我们的内容 div 之下，还需要再创建一个 div 来包裹这一块的内容，那么此时我们到整个 内容块 div 下创建一个 div：
<div style="flex:1"> <div>div> div>- 1
- 2
- 3
- 4
- 5
接着，这个新创建的 div 应该有左右中 3 个部分，我们可以将最右侧看成是一个块（当然你也可以用你的分法），那么此时就可以在这个 div 内部再创建 3 个 div：
<div style="flex:1"> <div> <div>div> <div>div> <div>div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这个时候我们应该可以意识到，这个 banner 这块直接给予 一个 flex 布局就可以了，并且这其中 3 个 div 应该有不同的宽度占比，直接设置 flex 值即可。
那么此时直接给予这个装 banner 内容的 div flex 样式，并且可以设置其高度为 50个 vh：
<div class="flex" style="height: 50vh;"> <div>div> <div>div> <div>div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
此时刷新页面，白茫茫一片，这是因为你外部的 div 也是白色，然后你这个 div 在外部的 div 之内，都是白色背景，当然看不出来了，所以都要给这两个 div 加上 bgcolor 类样式，这样都是灰色背景，才能看得到对应的div 内容：
<div style="flex:1" class="bgcolor"> <div class="flex bgcolor" style="height: 50vh;"> <div>div> <div>div> <div>div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这个时候刷新页面，更奇怪了，啥都没有：
这是因为你内部 div 的宽度还没分配呢：
那么这个时候直接用 style 给予样式（style 演示 只是为了方便和演示清楚）：<div class="flex bgcolor" style="height: 50vh;"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
这个时候给予的值总和不会超过1，这样就不会充满整个屏幕宽，并且按照比例分配，刷新页面如下：
这个时候我们应该是居中，那么这个时候新建一个类咩咩咩为 center直接给予水平居中属性：
<style> .center{ justify-content: center; } style>- 1
- 2
- 3
- 4
- 5
然后给予到当前 banner 的 div 之中：
<div style="flex:1" class="bgcolor"> <div class="flex bgcolor center " style="height: 50vh;"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
刷新页面如下：
那么此时我们应该可以意识到，当前的 内容 父容器还需要包裹其他内容，都是竖着的，那么每一个块当作是一个 div 进行包裹，那么整体上看是竖着排列的 flex 布局，那么此时内容块应该是为 flex 布局，并且方向为竖，那么直接给予这个内容块最大的容器 div 对应的样式：<div style="flex:1" class="bgcolor flex column"> <div class="flex bgcolor center " style="height: 50vh;"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
此时这一部分的完整代码如下：
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>flex jd page demotitle> <style> * { margin: 0; } body { height: 100vh; } .bgcolor { background-color: rgb(230, 230, 230); } div { background-color: white; margin: 4px } .flex { display: flex; } .column { flex-direction: column; } .center { justify-content: center; } style> head> <body class="flex column bgcolor"> <div style="height: 150px;">div> <div style="flex:1" class="bgcolor flex column"> <div class="flex bgcolor center " style="height: 50vh;"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
1.3 其他内容布局
我们接着往下看：
这一部分秒杀区域，我们直接看成左边为一个 div 右边为一个大 div ，方向为默认横方向即可，那么直接创建一个 div，一个比例 0.2 一个比例 0.6 刚好等于 0.8 总和，和之前 banner 宽度综合一样，一点毛病都没有：<div style="flex:1" class="bgcolor flex column"> <div class="flex bgcolor center " style="height: 50vh;"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div> <div class="flex bgcolor center " style="height: 30vh;"> <div style="flex:0.2">div> <div style="flex:0.6">div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
秒杀区域直接一个 flex 给予到对应的居中以及背景色，重新设置对应的 高度 即可，页面如下：
此时细心的话，你应该可以发现， 30 vh 应该不止这一点高度，这是因为我们 flex 布局可以对当前我们的内容进行伸缩，因为 body 高度就 100vh，多了内容肯定要平均的去分配高度的，那么此时我们该怎么办呢？这个简单，既然他伸缩了，我们就不给他伸缩不就好了，给予一个样式：
<style> .flex-shrink { flex-shrink: 0; } style>- 1
- 2
- 3
- 4
- 5
flex-shrink 为0时就表示对应的元素不进行伸缩，固定尺寸显示，此时将不允许伸缩的内容全部加上该样式就ok了：
<body class="flex column bgcolor"> <div style="height: 150px;" class="flex-shrink">div> <div style="flex:1" class="bgcolor flex column flex-shrink"> <div class="flex bgcolor center flex-shrink" style="height: 50vh;"> <div class="flex-shrink" style="flex:0.2">div> <div class="flex-shrink" style="flex:0.4">div> <div class="flex-shrink" style="flex:0.2">div> div> <div class="flex bgcolor center flex-shrink" style="height: 30vh;"> <div class="flex-shrink" style="flex:0.2">div> <div class="flex-shrink" style="flex:0.6">div> div> div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
接着我们继续往下添加内容（如果觉得刚刚的压缩不明显，你可以添加内容时去掉这个属性再观察）：
这下面两个内容很简单，就是一个左右两个div和一个左小 div 和由大 div，直接写就可以了：<body class="flex column bgcolor"> <div style="height: 150px;" class="flex-shrink">div> <div style="flex:1" class="bgcolor flex column flex-shrink"> <div class="flex bgcolor center flex-shrink" style="height: 50vh;"> <div class="flex-shrink" style="flex:0.2">div> <div class="flex-shrink" style="flex:0.4">div> <div class="flex-shrink" style="flex:0.2">div> div> <div class="flex bgcolor center flex-shrink" style="height: 30vh;"> <div class="flex-shrink" style="flex:0.2">div> <div class="flex-shrink" style="flex:0.6">div> div> <div class="flex bgcolor center flex-shrink" style="height: 30vh;"> <div class="flex-shrink" style="flex:0.4">div> <div class="flex-shrink" style="flex:0.4">div> div> <div class="flex bgcolor center flex-shrink" style="height: 30vh;"> <div class="flex-shrink" style="flex:0.2">div> <div class="flex-shrink" style="flex:0.6">div> div> div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
页面如下：
其剩下的内容差不多相同，我就不再赘述了，我们直接看下一个案例。
二、flex 仿 gitCode 布局 及 自适应
首先查看我们的页面：
这个时候直接顶部一个块，下面分为左中右三个块，然后就解决了，是不是很简单？相比刚刚那么这个简单多了。那就来做吧。2.1 基本布局
首先给一个 style 价格 flex，一样的开头：
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>gitcode flex demotitle> <style> .flex{ display: flex; } style> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
接着 给予 body flex 样式，并且由于当前 flex 是竖着的，那么给予一个 cloumn 样式确定方向还有对应的背景色、边距等，这些都不存在什么疑问吧？学过上一小节的都看得懂吧，代码如下：
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>gitcode flex demotitle> <style> * { margin: 0; } body { height: 100vh; } div { background-color: white; margin: 4px } .flex{ display: flex; } .column{ flex-direction: column; } .bgcolor { background-color: rgb(230, 230, 230); } style> head> <body class="flex column bgcolor"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
那么接下来咱们就在 body 里面新建两个 div：
<body class="flex column bgcolor"> <div style="height: 60px;">div> <div style="flex:1">div> body>- 1
- 2
- 3
- 4
- 5
- 6
此时页面效果如下：
一点问题没有，那么接下来在内容的div 里新建 3 个 div 分别是左中右：<body class="flex column bgcolor"> <div style="height: 60px;">div> <div style="flex:1"> <div>div> <div>div> <div>div> div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
一看这 3 个 div 不用占满行，那么肯定，给予这个 内容 div 一个 flex ，并且给予内部元素不大于 1 的比例即可，还有一定要给予灰色背景，不然全白了看不见：
<div class="flex bgcolor" style="flex:1"> <div style="flex:0.2">div> <div style="flex:0.4">div> <div style="flex:0.2">div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
那么既然不占满行，那么肯定需要对应的居中，给予居中样式：
<style> .center { justify-content: center; } style>- 1
- 2
- 3
- 4
- 5
调用后页面如下：
2.2 左侧元素内部排列
接着左侧一看就是竖着的：
那么给予一个样式 column 以及 flex：<div style="flex:0.2" class="column">div>- 1
- 2
接着往内部添加 3 个 div 以及对应高度，若想看见这 3 个 div，你还需要给予这个 左 的 div 背景色：
<div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div>- 1
- 2
- 3
- 4
- 5
- 6
效果如下：
2.3 右侧元素内部排列
右侧也一样，直接给予多个 div 并且设置对应的 flex 样式即可：
<div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
效果如下：
那么中间有点特殊，因为内容很多，那么这个时候我们填充内容会使顶部的内容发生挤压，那么需要一个flex-shrink: 0;使其内容不压缩，我们直接给予 头部 这个属性即可：<div style="height: 60px;flex-shrink: 0;">div>- 1
- 2
接着给予中部巨多 div 内容，并且设置对应的高度：
<div style="flex:0.4" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
div过多超出页面后我们可以滚动查看底部 div：
但是在原本的 gitcode 页面中顶部是一直都存在的，不会拖动内容后顶部栏就消失，那么怎么做呢？我们直接给予内容的 div 一个 属性 overflow 即可：
<div class="flex bgcolor center" style="flex:1;overflow: auto;">- 1
- 2
overflow auto 会给予超出内容一个滚动条，此时滑动再多，当前页面的头部也将会一直显示：
此部分完整代码如下：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>gitcode flex demotitle> <style> * { margin: 0; } body { height: 100vh; } div { background-color: white; margin: 4px } .flex { display: flex; } .column { flex-direction: column; } .bgcolor { background-color: rgb(230, 230, 230); } .center { justify-content: center; } style> head> <body class="flex column bgcolor"> <div style="height: 60px;flex-shrink: 0;">div> <div class="flex bgcolor center" style="flex:1;overflow: auto;"> <div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div> <div style="flex:0.4;" class="column flex bgcolor"> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> div> <div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
2.4 自适应
有时候内容不复杂时，咱们使用自适应将会很方便，当设备是手机访问时，屏幕大小将会改变，原有 PC
页面显示有问题，那么只需要使用 media 即可解决，此时我们先创建一个 空的类样式：.<style> .content{ } style>- 1
- 2
- 3
- 4
- 5
接着，给这个 content 样式给予到内容样式之中：
<div class="content flex bgcolor center" style="flex:1;overflow: auto;">- 1
- 2
随后使用 media：
<style> @media ( max-width:600px) { .content { flex-direction: column; } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
media 表示当
max-width:600px当前屏幕最大宽度为 600px 时，那么就是移动端设备，直接给予 content 属性为 flex-direction: column;，那么内容就会垂直显示，那么就不会并排，那么就很好的适配了手机：
大家可以拿代码去试试，自己拖动自己的屏幕可以看得到这个效果，完整代码如下：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>gitcode flex demotitle> <style> * { margin: 0; } body { height: 100vh; } div { background-color: white; margin: 4px } .flex { display: flex; } .column { flex-direction: column; } .bgcolor { background-color: rgb(230, 230, 230); } .center { justify-content: center; } .content {} @media ( max-width:600px) { .content { flex-direction: column; } } style> head> <body class="flex column bgcolor"> <div style="height: 60px;flex-shrink: 0;">div> <div class="content flex bgcolor center" style="flex:1;overflow: auto;"> <div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div> <div style="flex:0.4;" class="column flex bgcolor"> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> <div style="height: 150px;flex-shrink: 0;">div> div> <div style="flex:0.2" class="column flex bgcolor"> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> <div style="height: 150px;">div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
-
相关阅读:
MySQL索引机制(详细+原理+解析)
【Linux基础】Linux软件包管理器yum的使用指南rzsz安装
mysql 锁解决的办法
CUDA小白 - NPP(11) 图像处理 Comparison Operations
羊城杯2022 部分web
数据结构之＜二叉搜索树＞
实现常规厂家&品牌&型号业务对接物联网平台（snack3加json赋能）
二叉搜索树（BST，Binary Search Tree）
WPF handyControl 学习样例
计算机毕业设计Java网上专家门诊预约系统（源码+系统+mysql数据库+Lw文档）
- 原文地址：https://blog.csdn.net/A757291228/article/details/124758193
