CSS（JavaEE初阶系列14）

目录

前言：

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有一定帮助，想要学习的同学记得关注小编和小编一起学习吧！如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津（在此小编先谢过各位大佬啦！）

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

蓝牙资讯|中国智能家居前景广阔，蓝牙Mesh照明持续火爆

蓝牙资讯|中国智能家居前景广阔，蓝牙Mesh照明持续火爆

据俄罗斯卫星通讯社报道&#xff0c;中国已成为全球最大的智能家居消费国&#xff0c;占全球50%—60%的市场份额。未来&#xff0c;随着人工智能技术的发展以及智能家居生态的不断进步&#xff0c;智能家居在中国的渗透率将加速提升。德国斯塔蒂斯塔调查公司数据显示&#xff0…
阅读更多...
【Linux】Reactor模式

【Linux】Reactor模式

Reactor模式 Reactor模式的定义 Reactor反应器模式&#xff0c;也叫做分发者模式或通知者模式&#xff0c;是一种将就绪事件派发给对应服务处理程序的事件设计模式。 Reactor模式的角色构成 Reactor主要由以下五个角色构成&#xff1a; reactor模式的角色 角色解释Handle(句…
阅读更多...
EVE-NG MPLS L2VPN BGP pw -- static route,static mpls lsp

EVE-NG MPLS L2VPN BGP pw -- static route,static mpls lsp

1 拓扑 2 配置步骤 2.1 配置接口IP 和静态路由 PE1 interface LoopBack 0ip address 1.1.1.9 32 quitinterface GigabitEthernet 1/0ip address 10.1.1.1 255.255.255.0quitip route-static 2.2.2.9 32 10.1.1.2 ip route-static 3.3.3.9 32 10.1.1.2 P interface LoopBac…
阅读更多...
代码审计-ASP.NET项目-未授权访问漏洞

代码审计-ASP.NET项目-未授权访问漏洞

代码审计必备知识点&#xff1a; 1、代码审计开始前准备&#xff1a; 环境搭建使用&#xff0c;工具插件安装使用&#xff0c;掌握各种漏洞原理及利用,代码开发类知识点。 2、代码审计前信息收集&#xff1a; 审计目标的程序名&#xff0c;版本&#xff0c;当前环境(系统,中间件…
阅读更多...
2022年电赛C题——小车跟随行驶系统——做题记录以及经验分享

2022年电赛C题——小车跟随行驶系统——做题记录以及经验分享

前言 自己打算将做过的电赛真题&#xff0c;主要包含控制组的&#xff0c;近几年出现的小车控制题目&#xff0c;自己做过的真题以及在准备电赛期间刷真题出现的问题以及经验分享给大家 这次带来的是22年电赛C题——小车跟随行驶系统&#xff0c;这道题目指定使用的是TI的单片…
阅读更多...
leetcode做题笔记83删除排序链表中的重复元素

leetcode做题笔记83删除排序链表中的重复元素

给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2] 思路一&#xff1a;模拟题意 struct ListNode* deleteDuplicates(struct ListNode* head){i…
阅读更多...
如何使用Python编写小游戏？

如何使用Python编写小游戏？

大家好&#xff0c;我是沐尘而生&#xff0c;如果你是一个热爱编程的小伙伴&#xff0c;又想尝试游戏开发&#xff0c;那么这篇文章一定能满足你的好奇心。不废话&#xff0c;让我们马上进入Python游戏开发的精彩世界吧&#xff01; Python游戏开发的魅力 编写小游戏不仅仅是锻…
阅读更多...
力扣：63. 不同路径 II（Python3）

力扣：63. 不同路径 II（Python3）

题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从…
阅读更多...
基于深度学习的指针式仪表倾斜校正方法——论文解读

基于深度学习的指针式仪表倾斜校正方法——论文解读

中文论文题目:基于深度学习的指针式仪表倾斜校正方法 英文论文题目&#xff1a;Tilt Correction Method of Pointer Meter Based on Deep Learning 周登科、杨颖、朱杰、王库.基于深度学习的指针式仪表倾斜校正方法[J].计算机辅助设计与图形学学报, 2020, 32(12):9.DOI:10.3724…
阅读更多...
[自学记录06|*百人计划]Gamma矫正与线性工作流

[自学记录06|*百人计划]Gamma矫正与线性工作流

一、前言 Gamma矫正其实也属于我前面落下的一块内容&#xff0c;打算把它补上&#xff0c;其它的没补是因为我之前写的GAMES101笔记里已经涵盖了&#xff0c;而Gamma矫正在101里面确实没提到&#xff0c;于是打算把它补上&#xff0c;这块内容并不难&#xff0c;但是想通透的理…
阅读更多...
使用 wxPython和ECharts生成和保存HTML图表

使用 wxPython和ECharts生成和保存HTML图表

使用wxPython和ECharts库来生成和保存HTML图表。wxPython是一个基于wxWidgets的Python GUI库&#xff0c;而ECharts是一个用于数据可视化的JavaScript库。 C:\pythoncode\blog\echartshow.py 参考网址&#xff1a;https://echarts.apache.org/v4/examples/zh/index.html 安装…
阅读更多...
2023最新水果编曲软件FL Studio 21.1.0.3267音频工作站电脑参考配置单及系统配置要求

2023最新水果编曲软件FL Studio 21.1.0.3267音频工作站电脑参考配置单及系统配置要求

音乐在人们心中的地位日益增高&#xff0c;近几年音乐选秀的节目更是层出不穷&#xff0c;喜爱音乐&#xff0c;创作音乐的朋友们也是越来越多&#xff0c;音乐的类型有很多&#xff0c;好比古典&#xff0c;流行&#xff0c;摇滚等等。对新手友好程度基本上在首位&#xff0c;…
阅读更多...
区间预测 | MATLAB实现QRLSTM长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRLSTM长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRLSTM长短期记忆神经网络分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRLSTM长短期记忆神经网络分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRLSTM长短期记忆神经网络分位数回归时间序…
阅读更多...
解决内网GitLab 社区版 15.11.13项目拉取失败

解决内网GitLab 社区版 15.11.13项目拉取失败

问题描述 GitLab 社区版 发布不久&#xff0c;搭建在内网拉取项目报错&#xff0c;可能提示 unable to access https://github.comxxxxxxxxxxx: Failed to connect to xxxxxxxxxxxxxGit clone error - Invalid argument error:14077438:SSL routines:SSL23_GET_S 15.11.13ht…
阅读更多...
ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031)

ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031)

安全之安全(security)博客目录导读 ATF(TF-A)安全通告汇总 目录 一、ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031) 二、CVE-2017-15031 一、ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031) Title 未初始化或保存/恢复PMCR_EL0可能会泄露安全世界的时间信息 CVE ID CVE-2017-1503…
阅读更多...
支持https访问

支持https访问

文章目录 1. 打开自己的云服务器的 80 和 443 端口2. 安装 nginx3. 安装 snapd4. 安装 certbot5. 生成证书6. 拷贝生成的证书到项目工作目录7. 修改 main.go 程序如下8. 编译程序9. 启动程序10. 使用 https 和端口 8081 访问页面成功11. 下面修改程序&#xff0c;支持 https 和…
阅读更多...
Rust软件外包开发语言的特点

Rust软件外包开发语言的特点

Rust 是一种系统级编程语言&#xff0c;强调性能、安全性和并发性的编程语言&#xff0c;适用于广泛的应用领域&#xff0c;特别是那些需要高度可靠性和高性能的场景。下面和大家分享 Rust 语言的一些主要特点以及适用的场合&#xff0c;希望对大家有所帮助。北京木奇移动技术有…
阅读更多...
分布式 - 消息队列Kafka：Kafka 消费者的消费位移

分布式 - 消息队列Kafka：Kafka 消费者的消费位移

文章目录 01. Kafka 分区位移02. Kafka 消费位移03. kafka 消费位移的作用04. Kafka 消费位移的提交05. kafka 消费位移的存储位置06. Kafka 消费位移与消费者提交的位移07. kafka 消费位移的提交时机08. Kafka 维护消费状态跟踪的方法 01. Kafka 分区位移 对于Kafka中的分区而…
阅读更多...
Linux系统安装Google Chrome

Linux系统安装Google Chrome

1.进入谷歌浏览器官网 Google Chrome - Download the Fast, Secure Browser from GoogleGet more done with the new Google Chrome. A more simple, secure, and faster web browser than ever, with Google’s smarts built-in. Download now.http://www.google.cn/intl/en_…
阅读更多...
rust入门系列之Rust介绍及开发环境搭建

rust入门系列之Rust介绍及开发环境搭建

Rust教程 Rust基本介绍 网站: https://www.rust-lang.org/ rust是什么 开发rust语言的初衷是&#xff1a; 在软件发展速度跟不上硬件发展速度&#xff0c;无法在语言层面充分的利用硬件多核cpu不断提升的性能和 在系统界别软件开发上&#xff0c;C出生比较早&#xff0c;内…
阅读更多...
最新文章

Copyright @ 2022~2023