前端Web移动端学习day05

移动 Web 第五天

响应式布局方案

  • 媒体查询
  • Bootstrap框架

响应式网页指的是一套代码适配多端，一套代码适配各种大小的屏幕。

共有两种方案可以实现响应式网页，一种是媒体查询，另一种是使用bootstrap框架。

01-媒体查询

基本写法

在这里插入图片描述

  • max-width：最大宽度（小于等于）
  • min-width：最小宽度（大于等于）

max-width: 786px 这一段代码如果成为 @media 的条件会在页面的宽度小于 786px 的时候让@media 中的代码生效。

同理，min-width:786px 会在屏幕的宽度大于 786px 的时候让里面的代码生效。

如果实在不太好理解就借助数轴的方式来辅助，到底使用 max-width 还是 min-width。

书写顺序

  • min-width（从小到大）指的是@medai中的的视口宽度需要从上到下，从小到大写
  • max-width（从大到小）指的是@medai 中的的视口宽度需要从上到下，从大到小写

如果不按照这种顺序写，可能会出现css样式层叠，导致前面的样式不生效。

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

在这里插入图片描述

  • HTML 结构
<div class="box">
  <div class="left">left</div>
  <div class="main">
    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  </div>
</div>
  • CSS 样式
.box {
  display: flex;
}

.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}

.main {
  flex: 1; /* 让右边的main盒子占整个父盒子剩下的全部 */
  /* 这样写的效果是左边left盒子的大小生效了，右边main盒子只占整个父盒子剩下的全部 */
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

在这里插入图片描述

关键词 / 逻辑操作符
  • and
  • only
  • not

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称属性值
视口的宽和高width、height数值
视口最大宽或高max-width、max-height数值
视口最小宽或高min-width、min-height数值
屏幕方向orientationportrait: 竖屏landscape:横屏

工作中一般常用的是是空的宽度这一个特性

媒体类型

媒体类型用来区分设备类型

  • screen：屏幕设备
  • 打印预览：print
  • 阅读器：speech
  • 不区分类型：all
媒体特性
  • 视口宽高：width / height
  • 视口最大宽高：max-width ；max-height
  • 视口最小宽高：min-width；min-height
  • 屏幕方向：orientation
    • protrait：竖屏
    • landscape：横屏

媒体查询-外部CSS

如果将媒体查询全都写到一个页面中，会发现需要在一个媒体查询里面写很多的代码，这种比较麻烦，于是就有了直接在link的时候在link标签上添加媒体查询，这样简化代码。具体的写法如下：在link标签中，属性名：属性值，不需要加 @。

逻辑符，媒体类型，and，这些一般可以省略，在需要的时候在写，但是(媒体查询) 不可以省略，尤其是括号更加不能省略。

在这里插入图片描述

02-Bootstrap

简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

使用步骤

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

在这里插入图片描述

下载之后是一个压缩包，解压之后文件夹中会有css和js文件夹，css文件夹中有一大堆css文件，可以使用的是bootstrap.css和bootstrap.min.css这两个文件虽然名字不同但是功能是相同的。

这两个文件的区别：bootstrap.css是没有压缩过的文件，文件体积和bootstrap.css相比稍微大一点，里面的内容和平常的写代码习惯是相同的，bootstarp.min.css是经过压缩的文件，里面的代码是没有格式的。

以后再工作中需要哪一个就之间将对应的文件复制到项目的文件夹中就行了。映入bootstrap.css或者bootstrap.min.css其他文件不用引入。

使用
  1. 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名： container 响应式布局版心类
<div class="container">测试</div>

栅格系统

作用：响应式布局

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

在这里插入图片描述

xs表示小于576，大部分是手机。

  • row 类：行，可以让内容在一行排（flex布局）

代码如下：

<!--
视口宽度大于等于1200px，一行排4个盒子→3	添加类 .col-xl-数字
视口宽度大于等于768px，一行排2个盒子		添加类 .col-md-数字
视口宽度大于等于576px，一行排1个盒子		添加类 .col-sm-数字
后面的数字指的是一个盒子在父盒子中占有多少份，比如说 .col-sm-6 表示添加这个类的盒子当窗口的大小大于576px时在父盒子中占6份
注意：如果想要添加 .col-xx-x 这个类，其父盒子必须添加 .row 类，来开启flex布局，注意 .col-xx-x 这种类也是有样式的层叠性的如果使用了多个这种类必须要注意类名的排列顺序，
-->
<!--版心→row →子级-->
<div class="container"> // 添加container类，让盒子实现响应式布局
    <div class="row"> // 添加row类，让这个盒子中的子盒子可以排列在一行
		<div class="col-xl-3 col-md-6 col-sm-12">1</div>
        <div class="col-xl-3 col-md-6 col-sm-12">2</div>
        <div class="col-xl-3 col-md-6 col-sm-12">3</div>
        <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
</div>

全局样式

在开发中最好是就着官方的文档使用，如果比较熟练也可以不使用官方的文档。

按钮

在这里插入图片描述

button类名

  • btn：默认样式清除默认的样式，比如：背景色，边框线
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm
<button class="btn btn-success btn-sm">按钮1</button> 
// btn 只是消除了默认的样式，如果需要添加其他的样式需要使用其他的类名，比如：btn-success
<button class="btn btn-warning btn-lg">按钮2</button>
表格

在这里插入图片描述

表格类：

  • table：默认样式，清除table默认的样式，同时添加了一点自己的样式。
  • table-striped：隔行变色
  • table-success：表格颜色 既可以给table添加，也可以给tr添加。
  • ……

组件

1.引入样式表，适当的修改

2.引入 js 文件，有些动态的组件是需要映入bootstrap的js文件的

3.复制结构，修改内容

实例代码：4

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

bootstrap是支持自己修改对应的样式的，方法就是，直接层叠掉对应的样式就行。具体的操作方式是：先打开html页面，按F12检查页面，选择到想要修改的元素，将元素对应的样式前面的勾选勾掉，看看样式是否发生变化，如果变了那就说明这就是想要修改的样式，只需要在自己的css文件中，添加对应的类名，然后修改对应的样式，注意有时候样式后面加了 !importent ，这时候自己的类名中也需要添加 !importent，否则会因为权重不够，样式不生效的。

注意：有时候自己在添加或者删除复制的html标签的时候，一定要注意，原本的html结构，比如说给标签添加的自定义属性之类的。

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

下载的压缩包中包括了非常多的svg图片和一个font文件夹，到时候只需要将font文件夹复制到项目的font文件夹中去就行了。

对了，如果使用了bootstrap库，可以在项目中直接创建一个bootstarp文件夹，到时候属于bootstrap库的文件全都放入这里就行了，比如说：bootstrap的css文件可以直接放在这个文件夹下，而不放入专门的单独的css文件夹下，bootstrap的font文件夹也可以直接放入这个bootstrap文件夹下，bootstrap的js文件也可以放在bootstrap的文件夹下的js文件夹下。

使用

  1. 复制 fonts 文件夹到项目目录

  2. 网页引入 bootstrap-icons.css 文件

  3. 调用 CSS 类名（图标对应的类名），调用的图标需要到官网上去看对应的图标的名字，

    注意：官网上的图标的名称只是对应的字体图标类的一部分，比如说：有一个android2名称的类名，真正使用这个图标的时候使用的完整类名是 bi-androidq2，如果是其他的官网的字体图标也是相同的道方式，直接使用 bi-对应的名称 。

<i class="bi-android2"></i> // 官网上的字体图标实例使用了两个类名，但是实际的使用只需要添加一个类名就行了

注意：bootstrap的字体图标只需要使用一个类名，而普通的字体图标需要使用两个类名。

注意：官网的字体图标也是支持自定义样式的，只需要用css的样式层叠掉就行。具体的实例如下：

// 还是以android2为例
.bi-android2 {
	font-size: 100px;
	color: green;
}

03-综合案例-alloyTeam

项目源码

准备工作

在这里插入图片描述

  • HTML 结构
<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">



<script src="./Bootstrap/js/bootstrap.min.js"></script>
  • less 样式
// out: ../css/

头部导航

  • HTML 结构
<!-- 导航 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Github</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TWeb Conf</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SuperStar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Web前端导航</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  • less 样式
// 导航
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

轮播图图片

  • HTML 结构
<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • less 样式
.carousel {
  .carousel-item {
    height: 500px;
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    background-image: url(../assets/uploads/banner_1.jpg);
  }
  .carousel-item:nth-child(2) {
    background-image: url(../assets/uploads/banner_2.jpg);
  }
  .carousel-item:nth-child(3) {
    background-image: url(../assets/uploads/banner_3.jpg);
  }
  .carousel-item:nth-child(4) {
    background-image: url(../assets/uploads/banner_4.jpg);
  }
}

轮播图响应式

  • less 样式
// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {
  // 响应式 → 媒体查询
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
    }
  }

  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
    }
  }


  .carousel-item {
    // height: 500px;
    background-size: cover;
    background-position: center 0;
  }
}

开源项目响应式

  • HTML 结构
<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6">1</div>
      <div class="col-lg-3 col-md-6">2</div>
      <div class="col-lg-3 col-md-6">3</div>
      <div class="col-lg-3 col-md-6">4</div>
    </div>
  </div>
</div>
  • less 样式
// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.project {
  margin-top: 60px;
  text-align: center;
}

开源项目内容布局

  • HTML 结构
<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
    </div>
  </div>
</div>
  • less 样式
.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      a {
        // 块级的宽度和父级一样大
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }

      &:nth-child(1) a {
        background-color: #70c3ff;
      }
      &:nth-child(2) a {
        background-color: #fd6a7f;
      }
      &:nth-child(3) a {
        background-color: #7f8ea0;
      }
      &:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}

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

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

相关文章

饼图渲染的关键

饼图渲染的关键

1) 创建一个DOM对象,有自定义的高和宽. 2) 引入Echarts软件包并导入到对应文件内 npm i Echarts import 文件.js script src.../文件 3) 初始化一个对象 4) 对象的方法实现饼图渲染 data内的数据,且当一个对象已经渲染一遍,再执行这个,会对setOption的参数进行更新,其…
阅读更多...
定制化区块链交易所开发：Dapp、DeFi和IDO的全方位解决方案

定制化区块链交易所开发：Dapp、DeFi和IDO的全方位解决方案

随着区块链技术的不断发展&#xff0c;区块链交易所已经成为数字资产交易的主要场所之一。然而&#xff0c;由于不同项目的需求和特点各不相同&#xff0c;通用的交易所往往无法满足所有的需求。因此&#xff0c;定制化区块链交易所的需求逐渐增加&#xff0c;以满足不同项目的…
阅读更多...
JVM（六）——内存模型与高效并发

JVM（六）——内存模型与高效并发

内存模型与高效并发 一、java 内存模型 【java 内存模型】是 Java Memory Model&#xff08;JMM&#xff09; 简单的说&#xff0c;JMM 定义了一套在多线程读写共享数据时&#xff08;成员变量、数组&#xff09;时&#xff0c;对数据的可见性、有序 性、和原子性的规则和保障…
阅读更多...
MySQL修改root用户的密码

MySQL修改root用户的密码

在Windows上重置MySQL的root用户密码可以通过以下步骤进行&#xff1a; 停止MySQL服务&#xff1a;使用快捷键WINR打开运行窗口&#xff0c;输入cmd进入命令行。在命令行中输入net stop mysql来关闭MySQL服务。启动MySQL跳过授权表&#xff1a;将目录切换到MySQL安装目录下的b…
阅读更多...
CSMM软件过程能力成熟度模型

CSMM软件过程能力成熟度模型

软件过程能力成熟度模型旨在通过提升组织的软件开发能力帮助顾客提升软件的业务价值。 本模型借鉴吸收了软件工程、项目管理、产品管理、组织治理、质量管理、卓越绩效管理、精益软件开发等领域的优秀实践&#xff0c;为组织提供改进和评估软件过程能力的一个成熟度模型。 总体…
阅读更多...
腾讯云4核8G12M云服务器一年646元，送3个月时长

腾讯云4核8G12M云服务器一年646元，送3个月时长

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…
阅读更多...
C语言程序编译与链接（拓宽视野的不二之选）

C语言程序编译与链接（拓宽视野的不二之选）

文章目录 翻译环境和运行环境翻译环境预处理编译汇编链接 运行环境 翻译环境和运行环境 1&#xff0c;在ANSI C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执⾏的机器指 令&#xff08;⼆进制指令&#…
阅读更多...
文生图大模型Stable Diffusion的前世今生！

文生图大模型Stable Diffusion的前世今生！

1、引言 跨模态大模型是指能够在不同感官模态(如视觉、语言、音频等)之间进行信息转换的大规模语言模型。当前图文跨模态大模型主要有&#xff1a; 文生图大模型&#xff1a;如 Stable Diffusion系列、DALL-E系列、Imagen等 图文匹配大模型&#xff1a;如CLIP、Chinese CLIP、…
阅读更多...
由浅到深认识Java语言（29）：集合

由浅到深认识Java语言（29）：集合

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…
阅读更多...
【深度学习基础（4）】pytorch 里的log_softmax, nll_loss, cross_entropy的关系

【深度学习基础（4）】pytorch 里的log_softmax, nll_loss, cross_entropy的关系

一、常用的函数有&#xff1a; log_softmax,nll_loss, cross_entropy 1.log_softmax log_softmax就是log和softmax合并在一起执行&#xff0c;log_softmaxlogsoftmax 2. nll_loss nll_loss函数全称是negative log likelihood loss, 函数表达式为&#xff1a;f(x,class)−x[…
阅读更多...
Django开发复盘

Django开发复盘

一、URL 对于一个不会写正则表达式的蒟蒻来说&#xff0c;在urls.py中就只能傻傻的写死名字&#xff0c;但是即便这样&#xff0c;还会有很多相对路径和绝对路径的问题&#xff08;相对ip端口的路径&#xff09;&#xff0c;因为我们网页中涉及到页面跳转&#xff0c;涉及到发送…
阅读更多...
pytorch常用的模块函数汇总（1）

pytorch常用的模块函数汇总（1）

目录 torch&#xff1a;核心库&#xff0c;包含张量操作、数学函数等基本功能 torch.nn&#xff1a;神经网络模块&#xff0c;包括各种层、损失函数和优化器等 torch.optim&#xff1a;优化算法模块&#xff0c;提供了各种优化器&#xff0c;如随机梯度下降 (SGD)、Adam、RMS…
阅读更多...
Maven的pom.xml中resources标签的用法

Maven的pom.xml中resources标签的用法

spring-boot-starter-parent-2.4.1.pom文件中resources标签内容如下&#xff1a; <build><resources><resource><directory>${basedir}/src/main/resources</directory><filtering>true</filtering><includes><include>…
阅读更多...
考研数学｜张宇《1000题》太难了，根本刷不动？怎么破！

考研数学｜张宇《1000题》太难了，根本刷不动？怎么破！

即使一直在看张宇的课程&#xff0c;但在做1000题时仍然感到困难。这其实是许多考生会出现的问题&#xff0c;所以不用担心&#xff0c;希望看完这篇文章能对你有帮助。 首先是理论与实践的差距。听课时&#xff0c;你可能是在接受知识&#xff0c;而做题则需要将这些知识应用…
阅读更多...
鸿蒙开发之ArkUI组件常用组件文本输入

鸿蒙开发之ArkUI组件常用组件文本输入

TextInput、TextArea是输入框组件&#xff0c;通常用于响应用户的输入操作&#xff0c;比如评论区的输入、聊天框的输入、表格的输入等&#xff0c;也可以结合其它组件构建功能页面&#xff0c;例如登录注册页面。 TextInput为单行输入框、TextArea为多行输入框 TextArea 多行…
阅读更多...
阿里云服务器租用价格表(最新CPU/内存/带宽/磁盘收费标准)

阿里云服务器租用价格表(最新CPU/内存/带宽/磁盘收费标准)

阿里云服务器一个月多少钱&#xff1f;最便宜5元1个月。阿里云轻量应用服务器2核2G3M配置61元一年&#xff0c;折合5元一个月&#xff0c;2核4G服务器30元3个月&#xff0c;2核2G3M带宽服务器99元12个月&#xff0c;轻量应用服务器2核4G4M带宽165元12个月&#xff0c;4核16G服务…
阅读更多...
如何用Python操作xlsx文件并绘制折线图！

如何用Python操作xlsx文件并绘制折线图！

​大家好&#xff0c;数据分析在现代社会越来越重要&#xff0c;而Excel作为数据分析的利器&#xff0c;几乎人手一份。但是&#xff0c;Excel的操作有时候略显繁琐&#xff0c;更是感觉无从下手。 你知道吗&#xff1f;Python这个神奇的工具不仅能帮你处理海量的数据&#xf…
阅读更多...
【GPU系列】选择最适合的 CUDA 版本以提高系统性能

【GPU系列】选择最适合的 CUDA 版本以提高系统性能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
c语言中动态内存管理

c语言中动态内存管理

说到内存&#xff0c;大家一定都知道。但是有一种函数可以实现动态内存管理&#xff0c;下面大家一起学习。 文章目录 一、为什么要有动态内存管理&#xff1f;二、malloc 和 free1.malloc2.free 三、calloc 和 realloc1.calloc2.realloc3.常见的动态内存的错误3.1对NULL指针的…
阅读更多...
【SpringBoot框架篇】37.使用gRPC实现远程服务调用

【SpringBoot框架篇】37.使用gRPC实现远程服务调用

文章目录 RPC简介gPRC简介protobuf1.文件编写规范2.字段类型3.定义服务(Services) 在Spring Boot中使用grpc1.父工程pom配置2.grpc-api模块2.1.pom配置2.2.proto文件编写2.3.把proto文件编译成class文件 3.grpc-server模块3.1.pom文件和application.yaml3.2.实现grpc-api模块的…
阅读更多...
最新文章

Copyright @ 2022~2023