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

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

news 2025/7/4 21:53:15

目录

内容回顾：

弹性布局属性介绍

案例演示

商品案例

布局分析

登录案例

网格布局

内容回顾：

        变量：定义变量使用 --名称：值；    使用变量：   属性名：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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/7/4 16:54:47

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/4 8:31:41

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/7/4 16:09:41

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/7/3 3:03:27

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/6/25 2:46:22

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/7/4 4:08:26

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/4 13:30:34

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32