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

前端三剑客 —— CSS （第六节）

news 2025/11/3 6:54:47

目录

内容回顾：

弹性布局属性介绍

案例演示

商品案例

布局分析

登录案例

网格布局

内容回顾：

        变量：定义变量使用 --名称：值；    使用变量：   属性名：var（--名称）；

        倒影： -webkit-box-reflect   了解

        页面布局

                table 布局     了解

                div+css  盒子模型    左外边距  左边线  左内边距   内容 右内边距 右边线  右外边距

                                box-sizing：border-box；

弹性布局属性介绍

--- flex - direction :指定弹性容器中子元素的排列方式，默认是以水平轴为主轴，垂直轴为辅助轴。有以下几个值：

row：默认值，水平排列

Row-reverse：水平反向排列

column：垂直排列

column-reverse：垂直反向排列

--- flex - wrap ：设置弹性盒子的子元素超出父容器时是否换行，有以下几个值：

nowrap：不换行，默认值

wrap：换行

wrap-reverse：换行并反向排列

--- flex-flow：它是上面两个的简写方式

--- align-items：设置弹性盒子元素再侧轴（纵轴）方向上的对齐方式，有以下几个值：

flex-start：顶对齐，默认值

Flex-end：底对齐

center：垂直居中对齐

baseline：基线对齐

stretch：拉伸充满容器

--- align-content：修改flex-wrap属性的行为，类似于align-items，但不是设置子元素对齐，而是设置行对齐

---justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式，有以下几个值：

flex-start:左对齐

flex-end：右对齐

center：水平居中对齐

space-around：子元素的左右空白相等对齐方式

space-betwee：子元素平均分配空白，则左右两边对齐

space-evenly：子元素平均分配空白对象

案例演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹性布局属性介绍</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      ul {

        width: 600px;

        height: 300px;

        border: 1px solid #666666;

        list-style: none;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;   /*nowrap，wrap, wrap-reverse*/

        /*align-items: flex-start;*/

        /*align-items: flex-end;*/

        /*align-items: center;*/

        /*align-items: baseline;*/

        /*align-items: stretch;*/

        /*justify-content: flex-start;*/

        /*justify-content: flex-end;*/

        /*justify-content: center;*/

        /*justify-content: space-around;*/

        /*justify-content: space-between;*/

        justify-content: space-evenly;

      }

      li {

        width: 150px;

        /*height: 100px;*/

        background: #317FE5;

      }

      li:first-child {

        background: #C44F00;

      }

      li:nth-child(2) {

        background: blue;

      }

      li:nth-child(3) {

        background: red;

      }

      li:nth-child(4) {

        background: #317FE5;

      }

      li:nth-child(5) {

        background: #2A3C5C;

      }

      li:nth-child(6) {

        background: #8B0000;

      }

      li:nth-child(7) {

        background: #333333;

      }

      li:nth-child(8) {

        background: blueviolet;

      }

    </style>

</head>

<body>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <!--<li>4</li>-->

    <!--<li>5</li>-->

    <!--<li>6</li>-->

    <!--<li>7</li>-->

    <!--<li>8</li>-->

</ul>

</body>

</html>

商品案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹性布局案例</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-size: 14px;

        }

        :root {

            --letterspace: 3px;

        }

        .container {

            width: 1100px;

            height: 600px;

            margin: 0 auto;

        }

        ul {

            width: 100%;

            height: 100%;

            list-style: none;

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

        }

        li {

            width: 260px;

            height: 270px;

            display: flex;

            flex-direction: column;

        }

        li > img {

            width: 260px;

        }

        li div.title {

            width: 100%;

            height: 30px;

            background: #FB4E52;

            padding: 3px;

            display: flex;

            justify-content: space-between;

        }

        li div.title .name {

            width: 50%;

            background: #9D0002;

            color: white;

            text-align: center;

            letter-spacing: var(--letterspace);

        }

        li div.title .comfort {

            width: 50%;

            background: #ffffff;

            text-align: center;

            letter-spacing: var(--letterspace);

        }

        li div.footer {

            width: 100%;

            height: 30px;

            background: white;

            display: flex;

            justify-content: space-between;

        }

        li div.footer .price {

            width: 50%;

            color: red;

            font-weight: bold;

        }

        li div.footer .popularity {

            width: 50%;

            color: #989A9E;

            font-size: 12px;

            text-align: right;

            padding-right: 5px;

        }

    </style>

</head>

<body>

<div class="container">

    <ul>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

        <li>

            <img src="image/111405.png">

            <div class="title">

                <span class="name">蕾丝薄杯</span>

                <span class="comfort">舒适透气</span>

            </div>

            <div class="footer">

                <span class="price">￥2581</span>

                <span class="popularity">2000人付款</span>

            </div>

        </li>

    </ul>

</div>

</body>

</html>

布局分析

登录案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹性布局之登录案例</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {

            background: #2B4B6B;

        }

        .container {

            width: 450px;

            height: 300px;

            background: white;

            border-radius: 5px;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

        }

        .logo_box {

            position: absolute;

            left: 50%;

            width: 130px;

            height: 130px;

            border-radius: 50%;

            border: 1px solid #eeeeee;

            padding: 10px;

            box-shadow: 0 0 10px #dddddd;

            transform: translate(-50%, -50%);

            background: white;

        }

        .logo_box > img {

            position: absolute;

            left: 10px;

            top: 10px;

            width: 110px;

            height: 110px;

            background: #eeeeee;

            border-radius: 50%;

        }

        .info_box {

            margin: 90px auto;

            width: 90%;

            height: 150px;

            display: flex;

            flex-direction: column; /* 将纵轴变为主轴 */

            justify-content: space-around;

            position: relative;

        }

        .info_box > .account > input {

            border: 1px solid #EDEFF3;

            height: 25px;

            border-radius: 5px;

            outline: none;

            padding-left: 30px;

        }

        .info_box > .account > img {

            width: 20px;

            height: 20px;

            position: absolute;

            left: 5px;

            top: 15px;

        }

        .info_box > .passwd > input {

            border: 1px solid #EDEFF3;

            height: 25px;

            border-radius: 5px;

            outline: none;

            padding-left: 30px;

        }

        .info_box > .passwd > img {

            width: 20px;

            height: 20px;

            position: absolute;

            left: 5px;

            top: 62px;

        }

        .info_box > input:focus {

            border: 1px solid #409EFF;

        }

        .btn_box {

            width: 100%;

            height: 30px;

            display: flex;

            justify-content: flex-end;

            align-items: center;

        }

        .btn_box > input {

            width: 60px;

            height: 30px;

            margin-left: 5px;

            color: white;

        }

        .btn_box > input[type="reset"] {

            background: #909399;

            border: none;

            border-radius: 3px;

        }

        .btn_box > input[type="submit"] {

            background: #409EFF;

            border: none;

            border-radius: 3px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="logo_box">

        <img src="image/logo.png">

    </div>

    <form action="" method="post">

        <div class="info_box">

            <div class="account">

                <img src="image/man.png">

                <input type="text" name="username">

            </div>

            <div class="passwd">

                <img src="image/lock.png">

                <input type="password" name="password">

            </div>

            <div class="btn_box">

                <input type="submit" value="登录">

                <input type="reset" value="重置">

            </div>

        </div>

    </form>

</div>

</body>

</html>

网格布局

前面的弹性布局只适合用于对一维布局，而对于二维布局就不行，我们就需要要用网格布局来实现。通过行（row）和列（column）来构成。

下面以一个简单案例来演示网格布局如何使用。案例的效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网格布局</title>

    <style>

        .box {

            /* 定义容器的大小 */

            width: 500px;

            height: 400px;

            /* 1. 启用网格布局*/

            display: grid;

            /* 2. 设置网格布局的列数，需要使用 grid-template-columns 属性，它的值可以是固定值，也可以是百分比 */

            /*grid-template-columns: 20% 20% 20% 20% 20%;*/

            grid-template-columns: repeat(5, 1fr); /* 重复 5 次（即 5 列）, 1fr 表示等比例 */

            /* 2. 设置网格布局的行数，需要使用 grid-template-rows 属性，它的值可以是固定值，也可以是百分比 */

            /*grid-template-rows: 200px 200px 200px;*/

            grid-template-rows: repeat(3, 200px);

            /* 3. 设置单元格的间距 */

            grid-gap: 10px;

        }

        .box > div {

            border: 1px solid red;

        }

        .box > .test {

            /*grid-row-start: 2;  !* 指定开始行所在位置，这个值包含 *!*/

            /*grid-row-end: 3;  !* 指定结束行所在位置，这个值不包含 *!*/

            /*grid-column-start: 2;  !* 指定开始的列所在位置，这个值是包含的 *!*/

            /*grid-column-end: 5; !* 指定结束的列所在位置，这个值不包含 *!*/

            /* 上面的写法可以简化为下面的写法，格式为：开始行(或列)的位置 / 结束行(或列)的位置 */

            /*grid-row: 2 / 3;*/

            /*grid-column: 2 / 5;*/

            /* 还可以简化为如下的写法：格式为：开始行位置 / 开始列位置 / 结束行位置 / 结束列位置 */

            grid-area: 2 / 2 / 3 / 5;

        }

    </style>

</head>

<body>

<div class="box">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div class="test">8</div>

    <div>9</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>9</div>

    <div>9</div>

    <div>9</div>

</div>

</body>

</html>

相关文章：

前端三剑客 —— CSS （第六节）

目录 内容回顾&#xff1a; 弹性布局属性介绍 案例演示 商品案例 布局分析 登录案例 网格布局 内容回顾&#xff1a; 变量&#xff1a;定义变量使用 --名称&#xff1a;值&#xff1b; 使用变量&#xff1a; 属性名&#xff1a;var&#xff08;--名称&#xff09;&a…...

编程日记 2024/4/5 17:13:22

MyBatis 解决上篇的参数绑定问题以及XML方式交互

前言 上文:MyBatis 初识简单操作-CSDN博客 上篇文章我们谈到的Spring中如何使用注解对Mysql进行交互 但是我们发现我们返回出来的数据明显有问题 我们发现后面三个字段的信息明显没有展示出来 下面我们来谈谈解决方案 解决方案 这里的原因本质上是因为mysql中和对象中的字段属性…...

编程日记 2024/4/5 17:10:20

Rust语言之属性宏（Attribute Macro）derive

文章目录 Rust语言之属性宏&#xff08;Attribute Macro&#xff09;derive Rust语言之属性宏&#xff08;Attribute Macro&#xff09;derive 属性宏是一种基于属性的宏&#xff0c;用于修改、扩展或注解 Rust 代码。它们通常用于为函数、结构体、枚举、模块等添加元数据或自…...

编程日记 2024/4/5 17:09:19

[技术闲聊]我对电路设计的理解(六)-原理图封装

电路设计的直观体现就是完整的原理图&#xff0c;绘制电路图阶段的第一步&#xff0c;绘制原理图封装库。 封装库一共有两种&#xff0c;一种是原理图封装库&#xff0c;一种是PCB封装库&#xff0c;如下图所示。 原理图封装和PCB封装之间的唯一关联就是 引脚位号&#xff0c;…...

编程日记 2024/4/5 17:08:18

算法(滑动窗口四)

1.串联所有单词的子串 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff…...

编程日记 2024/4/5 17:07:17

学习记录：bazel和cmake运行终端指令

Bazel和CMake都是用于构建软件项目的工具&#xff0c;但它们之间有一些重要的区别和特点&#xff1a; Bazel&#xff1a; Bazel是由Google开发的构建和测试工具&#xff0c;用于构建大规模的软件项目。它采用一种称为“基于规则”的构建系统&#xff0c;它利用构建规则和依赖关…...

编程日记 2024/4/5 17:05:15

蓝桥杯刷题--python-37-分解质因数

3491. 完全平方数 - AcWing题库 nint(input()) res1 i2 while i*i<n: if n%i0: t0 while n%i0: n//i t1 if t%2: res*i i1 if n>1: res*n print(res) 4658. 质因数个数 - AcWing题库…...

编程日记 2024/4/5 17:03:13

Delphi编写的图片查看器

UNIT Unit17;INTERFACEUSESWinapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs,Vcl.StdCtrls, Vcl.ExtDlgs, Vcl.ExtCtrls, Vcl.Imaging.jpeg; //注意&#xff1a;要加入jpej 否侧浏览图…...

编程日记 2024/4/5 17:00:10

Swing中的FlowLayout/WrapLayout在打横排列时候如何做到置顶对齐

前言 最近在开发swing客户端时候碰到一个棘手的问题&#xff1a; Swing中的FlowLayout/WrapLayout在打横排列时候如何做到置顶对齐如果是vue或者react&#xff0c;一搜百度什么都出来了&#xff0c;swing的话&#xff0c;嗯。。。资料有点少而且大部分是stack overflow上面的…...

编程日记 2024/4/5 16:59:09

C# MES通信从入门到精通（8）——C#调用Webservice服务进行数据交互

前言 在上位机开发领域，使用webservice来访问客户的终端Mes系统是一项必备的技能，本文详细介绍了如何在c#中调用webservice服务，不仅介绍了使用添加服务引用直接调用webservice中的方法外还介绍了使用http的post方法调用webservice方法，过程详细且均为实战经验总结，对于初…...

编程日记 2024/4/5 16:56:05

day04-MQ

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你…...

编程日记 2024/4/5 16:55:04

神经网络汇聚层

文章目录 最大汇聚层平均汇聚层自适应平均池化层 最大汇聚层 汇聚窗口从输入张量的左上角开始&#xff0c;从左往右、从上往下的在输入张量内滑动。在汇聚窗口到达的每个位置&#xff0c;它计算该窗口中输入子张量的最大值或平均值。计算最大值或平均值是取决于使用了最大汇聚…...

编程日记 2024/4/5 16:53:01

2024.3.8力扣每日一题——找出美丽数组的最小和

2024.3.8 题目来源我的题解方法一 数学 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2834 我的题解 方法一 数学 经过分析&#xff0c;在target之前&#xff0c;取小于等于target/2的正整数才能使得和最小&#xff0c;并且满足条件3。 时间复杂度&#xff1a;O(n) 空…...

编程日记 2024/4/5 16:52:01

单例模式以及线程安全问题

单例模式的概念 单例模式是指的是整个系统生命周期内&#xff0c;保证一个类只能产生一个实例对象 保证类的唯一性 。 通过一些编码上的技巧&#xff0c;使编译器可以自动发现咱们的代码中是否有多个实例&#xff0c;并且在尝试创建多个实例的时候&#xff0c;直接编译出错。 …...

编程日记 2024/4/5 16:46:57

车载电子电器架构 —— 软件下载

车载电子电器架构 —— 软件下载 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无…...

编程日记 2024/4/5 16:44:55

阿里云弹性计算通用算力型u1实例性能评测，性价比高

阿里云服务器u1是通用算力型云服务器&#xff0c;CPU采用2.5 GHz主频的Intel(R) Xeon(R) Platinum处理器&#xff0c;ECS通用算力型u1云服务器不适用于游戏和高频交易等需要极致性能的应用场景及对业务性能一致性有强诉求的应用场景(比如业务HA场景主备机需要性能一致)&#xf…...

编程日记 2024/4/5 16:40:51

Jupyter IPython帮助文档及其魔法命令

1.IPython 的帮助文档 使用 help() 使用 ? 使用 &#xff1f;&#xff1f; tab 自动补全 shift tab 查看参数和函数说明 2.运行外部 Python 文件 使用下面命令运行外部 Python 文件&#xff08;默认是当前目录&#xff0c;也可以使用绝对路径&#xff09; %run *.py …...

编程日记 2024/4/5 16:37:48

设计模式总结-面向对象设计原则

面向对象设计原则 面向对象设计原则简介单一职责原则单一职责原则定义单一职责原则分析单一职责原则实例 开闭原则开闭原则定义开闭原则分析开闭原则实例 里氏代换原则里氏代换原则定义里氏代换原则分析 依赖倒转原则依赖倒转原则定义依赖倒转原则分析依赖倒转原则实例 接口隔离…...

编程日记 2024/4/5 16:36:47

绿联 安装zfile，创建属于自己的网盘，支持直链分享

绿联 安装zfile&#xff0c;创建属于自己的网盘&#xff0c;支持直链分享 1、镜像 zhaojun1998/zfile:latest ZFile ZFile 是一个适用于个人的在线网盘(列目录)程序&#xff0c;可以将你各个存储类型的存储源&#xff0c;统一到一个网页中查看、预览、维护&#xff0c;再也不用…...

编程日记 2024/4/5 16:35:46

KnowLog：基于知识增强的日志预训练语言模型｜顶会ICSE 2024论文

徐波 东华大学副教授 东华大学计算机学院信息技术系副系主任&#xff0c;复旦大学知识工场实验室副主任&#xff0c;智能运维方向负责人。入选“上海市青年科技英才扬帆计划”。研究成果发表在IJCAI、ICDE、ICSE、ISSRE、ICWS、CIKM、COLING等国际会议上&#xff0c;曾获中国数…...

编程日记 2024/4/5 16:34:45

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/2 13:12:08

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/11/3 3:43:05

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/10/27 6:22:43

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/8/16 12:41:25

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/7/7 9:39:54