CSS（JavaEE初阶系列14）

news2024/11/16 9:47:47

目录

前言：

1.CSS是什么

1.1CSS基本语法

2.引入样式

2.1内部样式表

2.2行内样式表

2.3外部样式

3.选择器

3.1选择器的种类

3.1.1基础选择器

3.1.2复合选择器

4.常用元素属性

4.1字体属性

4.2文本属性

4.3背景属性

4.4圆角矩形

4.5元素的显示模式

4.6盒模型

4.7内边距

4.8外边距

4.9弹性布局

结束语：

前言：

在上一节中小编与大家分享了有关于JavaScript的一些基础知识，以及给大家演示了几个案例，接下来小编带着大家一起来看一下有关于前端中的另一个技术CSS，想要让界面好看，那么就离不开CSS的渲染。话不多说我们一起来看吧。

1.CSS是什么

CSS是层叠样式表，所谓“层叠”就是针对html的元素/标签，可以同时应用多组CSS样式，将多组样式叠加在一起。“样式”就是大小、位置、间距、颜色、字体、边框、背景....统称为“样式”，它描述了一个网页张啥样。

CSS能够对网页元素的位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

1.1CSS基本语法

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改啥。
  • 声明的属性是键值对，使用;区分键值对，使用：区分键和值。

<body>

    <style>

        p{

            /* 设置字体颜色 */

            color: red;

            /* 设置字体大小 */

            font-size: 30px;

        }

    </style>

    <p>hello</p>

</body>

注意：

  • CSS要写到style标签中（后面还会介绍其他写法）。
  • style标签可以放到页面任意位置，一般是放置在head标签中。
  • CSS使用/**/作为注释。

2.引入样式

2.1内部样式表

内部样式是直接把CSS嵌入到HTML中，放到style标签里。

    <!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 -->

    <style>

        div{

            font-size: 50px;

            color: red;

        }

    </style>

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 -->
    <style>
        div{
            font-size: 50px;
            color: greenyellow;
        }
    </style>
    <div>hello world！</div>
</body>
</html>


结果展示：

2.2行内样式表

行内样式是将CSS写到一个单独的.css文件中，有html通过link标签来引进来。

首先我们先来创建一个.css文件。

代码展示：

html代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过link标签将css文件引入进来 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>hello world！</div>
</body>
</html>


css文件代码展示：

div {
    font-size: 50px;
    color: blue;
}


结果展示：

2.3外部样式

内部样式也叫内联样式，他是直接把CSS属性写到元素的style属性内。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>


结果展示：

3.选择器

选择器就是要我们选中页面中的元素然后再进行操作。只有先选中元素才能生效。下面我们来分别来看一下四种选择器。

3.1选择器的种类

3.1.1基础选择器

  • 标签选择器

标签选择器是用来选中页面中的所有同名标签的元素，它的缺点也很显而易见就是很难针对某个元素进行个性化制定。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
</head>
<body>
    <style>
        p {
            color: red;
            font-size: 30px;
        }
        div {
            color: burlywood;
            font-size: 20px;
        }
    </style>
    <p>hello</p>
    <p>world</p>
    <div>css</div>
    <div>JavaScript</div>
</body>
</html>


结果展示：

  • 类选择器

在css中创建一个“类名”，这个类名对应一组css属性，制定让html元素应用这样的类名即可。

代码展示：

css文件代码：

.one {
    color: rosybrown;
    font-size: 50px;
}
.tow {
    color: blueviolet;
    font-size: 30px;
}


html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <link rel="stylesheet" href="Test3.css">
</head>
<body>
    <div class="one">hello</div>
    <div class="tow">hello</div>
</body>
</html>


结果展示：

  • id选择器

一个html标签中可以有一个id属性，这个属性的值会被作为身份标识的唯一值。所以通过id选择器就可以给制定元素设置样式了。

代码展示：

css代码展示：

#test {
    color: brown;
    font-size: 50px;
}


html代码展示：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <link rel="stylesheet" href="Test4.css">
</head>
<body>
    <div id="test">hello world</div>
</body>
</html>

结果展示：

  • 通配符选择器

通配符选择器就是给所有的都设置样式。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
</head>
<body>
    <style>
        * {
            color: aquamarine;
            font-size: 40px;
        }
    </style>
    <div>hello</div>
    <p>world</p>
</body>
</html>


结果展示：

3.1.2复合选择器

上述都是css中最基础的选择器，其实在css中海油很多复杂的“复合选择器”，下面我们只给大家介绍一种后代选择器。

  • 后代选择器 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
</head>
<body>
    <div class="one">
        <h3>hello</h3>
    </div>
    <div class="tow">
        <h3>world</h3>
    </div>
    <style>
        .one {
            color: chocolate;
        }
        .tow {
            color: cadetblue;
        }
    </style>
</body>
</html>

后代选择器的效果就是把上述三种基础选择器进行组合，同时能够体现出“标签的层次结构”。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
</head>
<body>
    <div class="one">
        <h3>hello</h3>
    </div>
    <div class="tow">
        <h3>world</h3>
    </div>
    <style>
        .one {
            color: chocolate;
        }
        .tow {
            color: cadetblue;
        }
    </style>
</body>
</html>


结果展示：

除了后代选择器之外还有以下这些，小编这里就不给大家一一介绍了。

  • 子选择器
  • 并集选择器
  • 伪类选择器

4.常用元素属性

4.1字体属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
</head>
<body>
    <div class="one">hello</div>
    <style>
        .one {
            font-family: '微软雅黑';
            font-size: 100px;
            font-weight: 900;
            font-style: italic;
        }
    </style>
</body>
</html>


结果展示：

我们也可以在控制台中通过勾选下面的条件来看到效果。

4.2文本属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
</head>
<body>
    <div class="one">hello world</div>
    <style>
        .one {
            font-size: 100px;
            /* 文本颜色 */
            color: brown;
            /* 文本对齐，左对齐(left)，右对齐(right)，居中对齐(center) */
            text-align: center;
            /* 文本装饰，加一个下划线... */
            text-decoration: underline;
            /* 文本缩进 */
            text-indent: 20px;
            /* 行高(行间距) */
            line-height: 100px;
        }
    </style>
</body>
</html>


结果展示：

注意：

这里颜色的写法有很多中，其中可以直接写表示颜色的单词，也可使用rgb的方式来表示，还可以使用十六进制的方式来表示。

 

4.3背景属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景设置</title>
</head>
<body>
    <div class="background">1</div>

    <style>
        .background {
            font-size: 100px;
            width: 200px;
            height: 160px;
            color: blueviolet;
            background-color: gold;
            /* 导入背景图 */
            border-image: url(cat.jpg);
            /* 禁止平铺 */
            background-repeat: no-repeat;
            /* 设置背景图的位置 */
            background-position: center center;
            /* 设置背景图的大小 */
            background-size: 2000px 1600px;
        }      
    </style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景设置</title>
</head>
<body>
    <div class="one"></div>
    <style>
        .one {
            background-image: url(cat.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</body>
</html>


结果展示：

4.4圆角矩形

我们之前生成的边框都是矩形的，但是如果我们想要让他变成圆边的该怎么弄呢？如下代码所示：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
</head>
<body>
    <div>111</div>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid green;
            border-radius: 10px;
        }
    </style>
</body>
</html>


结果展示：

4.5元素的显示模式

在CSS中，HTML的标签的显示模式有很多，此处只重点介绍两个：

块级元素和行内元素。

块级元素：

        像我们之前学习的h1-h6、p、div、ul、ol...都是块级元素。

它的特点：

  • 独占一行。
  • 高度、宽度、内外边距、行高都可以控制。
  • 宽度默认是父级元素宽度的100%（和父级元素一样框宽）。
  • 是一个容器（盒子），里面可以放行内和块级元素。

行内元素/内联元素：
        常见的元素有：a、strong、b、em、i、del、s、ins...

特点：

  • 不独占一行，一行可以显示多个。
  • 设置高度、宽度、行高无效。
  • 左右外边距有效（上下无效），内边距有效。
  • 默认宽度就是本身的内容。
  • 行内元素只能容纳文本和其他行内元素，不能放块级元素。

行内元素和块级元素的区别：

  • 块级元素独占一行，行内元素不独占一行。
  • 块级元素可以设置宽高，行内元素不能设置宽高。
  • 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。

使用display属性可以修改元素的显示模式：

  • display：block；（修改成块级元素）。
  • display：inline；（修改成行内元素）。

一般都是修改成块级元素，不会说是把块级元素修改成行内元素，也可以使用display：none实现元素隐身的效果。

4.6盒模型

每一个HTML元素就相当于是一个矩形的“盒子”，这个盒子是由这几个部分组成的。

  • 边框：border
  • 内容：content
  • 内边距：padding
  • 外边距：margin

如下图所示：

4.7内边距

padding是设置内容和边框之间的距离的。

基础写法：
默认内容是顶着边框来放置的，用padding来控制这个距离可以给四个方向都加上边距。

  • padding-top 上
  • padding-bottom 下
  • padding-left 左
  • padding-right 右

复合写法：

可以把多个方向的padding合并到一起。

  • padding：5px; 表示四个方向都是5px。
  • padding：5px 10px; 表示上下内边距是5px，左右内边距是10px。
  • padding：5px 10px 20px; 表示上内边距是5px，左右内边距是10px，下内边距是20px。
  • padding：5px 10px 20px 30px; 表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px。（顺时针）

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边距</title>
</head>
<body>
    <div>设置内边距</div>
    <style>
        * {
            /* 防止撑大盒子 */
            box-sizing: border-box;
        }

        div {
            padding-top: 20px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 10px;
        }
    </style>
</body>
</html>


结果展示：

4.8外边距

基础写法：

控制盒子和盒子之间的距离。可以给四个方向都加上外边距。

  • margin-top 上
  • margin-bottom 下
  • margin-left 左
  • margin-right 右

复合写法：

规则与padding一样。

  • margin：10px; 四个方向都是10px
  • margin：10px 20px; 上下外边距为10px，左右外边距为20px。
  • margin：10px 20px 30px; 上外边距10px，左右外边距20px，下外边距30px。
  • margin：10px 20px 30px 40px; 上外边距10px，右外边距20px，下外边距30px，左外边距40px。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
</head>
<body>
    <div>test</div>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
        }
    </style>
</body>
</html>


结果展示：

 

4.9弹性布局

我们先来看一下下面的这个案例。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
</head>
<body>
    <div class="one">
        <div class="tow">hello1</div>
        <div class="tow">hello2</div>
        <div class="tow">hello3</div>
        <div class="tow">hello4</div>
    </div>
    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: brown;
        }
        .tow {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</body>
</html>


结果展示：

通过结果我们可以看出来里面的元素是垂直方向排列的，那么有的时候我们希望块级元素是可以水平方向排列。此时我们就可以使用弹性布局了。

如下所示：
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
</head>
<body>
    <div class="one">
        <div class="tow">hello1</div>
        <div class="tow">hello2</div>
        <div class="tow">hello3</div>
        <div class="tow">hello4</div>
    </div>
    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: brown;
            /* 开启弹性布局 */
            /* 一旦开启了弹性布局，此时内部的子元素就会按照水平的方向进行排布，子元素里面的子元素是不受影响的 */
            display: flex;
            /* justify-content：设置水平方向的排列规则 */
            justify-content: space-between;
            /* align-items：设置垂直方向的排列规则 */
            align-items: center;
        }
        .tow {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</body>
</html>


结果展示：

结束语：

好了这节的CSS基础知识小编就给大家讲解到这里了，有不会的地方记得给小编留言，希望这节对大家了解CSS有一定帮助，想要学习的同学记得关注小编和小编一起学习吧！如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津（在此小编先谢过各位大佬啦！）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/887541.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

docker+haror

docker+haror

docker 2013年诞生&#xff0c;推荐单容器只运行一个程序或进程&#xff0c;形成一个分布式的应用模型。 总结下来就是&#xff1a;docker带来启动流程更快&#xff0c;运行效率较高、资源损耗较小&#xff0c;属于轻量级的服务。 docker的安装 推荐的一键化安装的脚本&#…
阅读更多...
2022年第八届美亚杯个人赛

2022年第八届美亚杯个人赛

1.[单选题] 王晓琳在这本电子书籍里最后对哪段文字加入了重点标示效果(Highlight)?(2分) A. 卿有何妙计 B. 宝玉已是三杯过去了 C. 武松那日早饭罢 D. 就除他做个强马温罢 结合最后一题 2.[多选题] 王晓琳的手机里有一个 MTR Mobile (港)的手机程序(Mobile App)。 检视其数…
阅读更多...
《QT+PCL》点云的点选与框选

《QT+PCL》点云的点选与框选

《QT+PCL》点云的点选与框选 效果展示关键代码对应Qt6与pcl1.13对应Qt6与pcl1.12对应Qt5与pcl1.12对应Qt5与pcl1.11资源效果展示 关键代码 对应Qt6与pcl1.13 点选 //点选--------------回调函数 void MainWindow::pp_callback_PointsSelect(const
阅读更多...
python中使用xml快速创建Caption和URL书签管理器应用程序

python中使用xml快速创建Caption和URL书签管理器应用程序

导语&#xff1a; 本文介绍如何使用wxPython库创建一个Caption和URL管理器应用程序。该应用程序具有图形用户界面&#xff0c;允许用户输入Caption和URL&#xff0c;并将其保存到XML文件中。此外&#xff0c;还提供了浏览文件夹并选择HTML文件的功能&#xff0c;并可以运行另一…
阅读更多...
微信小程序前后端开发快速入门（完结篇）

微信小程序前后端开发快速入门（完结篇）

这篇是微信小程序前后端快速入门完结篇了&#xff0c;今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 整体技术架构&#xff1a;小程序原生前端小程序云开发。 经历了前面教程的学习&#xff0c;大家有了一定的基础&#xff0c;所以本次分享重心主要是…
阅读更多...
SOFABoot——基本使用（笔记）

SOFABoot——基本使用（笔记）

文章目录 一、前言二、快速开始2.1 基本搭建2.2 测试是否成功2.3 其他部分日志测试异步启动 三、SOFABoot的模块化开发3.1 基于Spring上下文的隔离3.2 Root Application Context3.3 模块并行化启动3.4 JVM服务与RPC服务的发布与引用3.5 模块配置Module-NameRequire-ModuleSprin…
阅读更多...
深入理解JVM——垃圾回收与内存分配机制详细讲解

深入理解JVM——垃圾回收与内存分配机制详细讲解

所谓垃圾回收&#xff0c;也就是要回收已经“死了”的对象。 那我们如何判断哪些对象“存活”&#xff0c;哪些已经“死去”呢&#xff1f; 一、判断对象已死 1、引用计数算法 给对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器就加一&…
阅读更多...
在IDEA中创建properties配置文件

在IDEA中创建properties配置文件

第一步&#xff1a;在 src路径下找到resources文件 第二步&#xff1a;右击选择新建Resource Bundle配置文件 第三步&#xff1a;为Resource Bundle配置文件命名 完成创建
阅读更多...
高效反编译luac文件

高效反编译luac文件

对于游戏开发人员，有时候希望从一些游戏apk中反编译出源代码，进行学习，但是如果你触碰到法律边缘，那么你要非常小心。 这篇文章，我针对一些用lua写客户端或者服务器的编译过的luac文件进行反编译，获取其源代码的过程。 这里我不赘述如何反编译解压apk包的过程了，只说重点…
阅读更多...
k8s的pv和pvc创建

k8s的pv和pvc创建

//NFS使用PV和PVC 1、配置nfs存储 2、定义PV 实现 下图的pv和pvc测试 pv的定义 这里定义5个PV&#xff0c;并且定义挂载的路径以及访问模式&#xff0c;还有PV划分的大小 vim /pv.yamlapiVersion: v1 kind: PersistentVolume metadata:name: pv001 spec:capacity:storage: …
阅读更多...
【目标检测】目标检测 相关学习笔记

【目标检测】目标检测 相关学习笔记

目标检测算法 PASCALVOC2012数据集 挑战赛主要分为 图像分类 目标检测 目标分割 动作识别 数据集分为四个大类 交通&#xff08;飞机 船 公交车 摩托车&#xff09; 住房&#xff08;杯子 椅子 餐桌 沙发&#xff09; 动物&#xff08;鸟 猫 奶牛 狗 马 羊&#xff09; 其他&a…
阅读更多...
Java 单例模式简单介绍

Java 单例模式简单介绍

何为单例模式 所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法。 实现思路 如果我们要让类在一个虚拟机中只能产生一个对象&#xff0c;我们首先必…
阅读更多...
MBR400100CT-ASEMI肖特基模块MBR400100CT

MBR400100CT-ASEMI肖特基模块MBR400100CT

编辑&#xff1a;ll MBR400100CT-ASEMI肖特基模块MBR400100CT 型号&#xff1a;MBR400100CT 品牌&#xff1a;ASEMI 封装&#xff1a;M2 正向电流&#xff1a;400A 反向电压&#xff1a;100V 引线数量&#xff1a;2 芯片个数&#xff1a;2 芯片尺寸&#xff1a;102MIL…
阅读更多...
计算机竞赛 python+深度学习+opencv实现植物识别算法系统

计算机竞赛 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…
阅读更多...
FPGA: RS译码仿真过程

FPGA: RS译码仿真过程

FPGA: RS译码仿真过程 在上一篇中记录了在FPGA中利用RS编码IP核完成信道编码的仿真过程&#xff0c;这篇记录利用译码IP核进行RS解码的仿真过程&#xff0c;带有程序和结果。 1. 开始准备 在进行解码的过程时&#xff0c;同时利用上一篇中的MATLAB仿真程序和编码过程&#x…
阅读更多...
【LeetCode每日一题】——1331.数组序号转换

【LeetCode每日一题】——1331.数组序号转换

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 排序 二【题目难度】 简单 三【题目编号】 1331.数组序号转换 四【题目描述】 给你一个整数…
阅读更多...
将SM2根证书预置到chromium中

将SM2根证书预置到chromium中

最近花了很多精力在做chromium的GmSSL适配&#xff0c;协议和算法都已经完成&#xff0c;这篇文章是关于将SM2根证书预置到chromium中 我的开发测试环境是macos12.4&#xff0c;从chromium的代码和文档中得知证书获取和校验都是通过操作系统以及native api接口完成&#xff0c…
阅读更多...
leetcode 917.仅仅反转字母

leetcode 917.仅仅反转字母

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;仅仅反转字母 ps&#xff1a; 这道题思路很简单&#xff0c;只需要一个下标在前一个下标在后&#xff0c;分别找是字母的字符&#xff0c;找到之后交换即可。 代码&#xff1a; class Solution { public:bool isAlpha …
阅读更多...
QT：鼠标事件

QT：鼠标事件

鼠标事件&#xff08;QEvent&#xff09; 把帮助文档里面搜索QEvent则可查看相关内容&#xff0c;举例 鼠标进入的事件EnterEvent&#xff0c;是一个虚函数&#xff0c;对应的还要进入的函数leaveEvent 新建一个类&#xff0c;作为新的控件&#xff0c;打印鼠标事件 #inclu…
阅读更多...
Unity UI内存泄漏优化

Unity UI内存泄漏优化

项目一运行&#xff0c;占用的内存越来越多&#xff0c;不会释放&#xff0c;导致GC越来越频繁&#xff0c;越来越慢&#xff0c;这些都是为什么呢&#xff0c;今天从UI方面谈起。 首先让我们来聊聊什么是内存泄漏呢&#xff1f; 一般来讲内存泄漏就是指我们的应用向内存申请…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023