前端Web移动端学习day05

news2024/10/1 23:33:06

移动 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;
      }
    }
  }
}

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

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

相关文章

vue3+Vite+TS项目，配置ESlint和Prettier

vue3+Vite+TS项目，配置ESlint和Prettier

创建vue3项目 实操过的有两种方式 1.vue脚手架2.vite&#xff08;推荐&#xff0c;也是尤大大团队研发&#xff09; 具体怎么新建一个vue3项目就不多讲了&#xff0c;可以按照官方文档来 创建后的文件目录长这样 多提一句&#xff0c;vite也会随着时间不断迭代&#xff0c;后…
阅读更多...
【C++入门】 初见，单推，与C++的第一次约会

【C++入门】 初见，单推，与C++的第一次约会

关注小庄 顿顿解馋(ᕑᗢᓫ∗)˒ 引言&#xff1a;本篇博客我们开始与C的第一次约会&#xff0c;C是兼容c的&#xff0c;本篇博客我们将了解到C关键字有哪些&#xff0c;C命名空间&#xff0c;C输入与输出和缺省参数的内容&#xff0c;请放心食用 ~ 文章目录 一 &#x1f3e0; C…
阅读更多...
github配置ssh

github配置ssh

生成公钥 在电脑用户的目录下打开终端执行 ssh-keygen -t rsa: 执行完不要关 配置文件 看看用户的目录里 .ssh 目录&#xff1a; Host github.comHostname ssh.github.comPort 443配置公钥 复制 id_rsa.pub 文件里的内容 粘贴到 github上 连接密钥 回到刚才的终端…
阅读更多...
【42 可视化大屏 | 某瓣电影Top250数据分析可视化大屏】

【42 可视化大屏 | 某瓣电影Top250数据分析可视化大屏】

文章目录 &#x1f3f3;️‍&#x1f308; 1 普版大屏&#x1f3f3;️‍&#x1f308;2 Flask版大屏&#x1f3f3;️‍&#x1f308;3 FlaskMysql版大屏&#x1f3f3;️‍&#x1f308; 4. 可视化项目源码数据 大家好&#xff0c;我是 &#x1f449;【Python当打之年(点击跳转)…
阅读更多...
学透Spring Boot — 创建一个简单Web应用

学透Spring Boot — 创建一个简单Web应用

从今天开始&#xff0c;我们将开始学习一个新的系列&#xff0c;那就是在项目中用得非常广泛的一个框架 —— Spring Boot&#xff0c;我们会循序渐进地介绍 Spring Boot 的方方面面&#xff0c;包括理论和实战&#xff0c;也会介绍和Spring Boot一些热点面试题。 概论 本文是…
阅读更多...
基于Rflysim平台的无人机拦截三维比例导引算法仿真

基于Rflysim平台的无人机拦截三维比例导引算法仿真

【后厂村路钢铁侠出品】 一、Rflysim简介 RflySim是一套专为科研和教育打造的Pixhawk /PX4 和MATLAB/Simulink生态系统或工具链&#xff0c;采用基于模型设计&#xff08;Model-Based Design&#xff0c; MBD&#xff09;的思想&#xff0c;可用于无人系统的控制和安全测试。…
阅读更多...
社交革命：Facebook如何改变我们的生活

社交革命：Facebook如何改变我们的生活

引言 在数字化时代的浪潮中&#xff0c;社交媒体平台成为了人们日常生活不可或缺的一部分&#xff0c;而Facebook作为其中的巨头&#xff0c;已经深刻地改变了我们的生活方式和社交模式。本文将探讨Facebook在社交领域的影响力&#xff0c;以及它是如何改变了我们的生活。 1. …
阅读更多...
SQLite数据库浏览器sqlite-web

SQLite数据库浏览器sqlite-web

什么是 sqlite-web &#xff1f; sqlite-web是一个用 Python 编写的基于 Web 的 SQLite 数据库浏览器。 软件特点&#xff1a; 可与您现有的 SQLite 数据库配合使用&#xff0c;也可用于创建新数据库。添加或删除&#xff1a; 表格列&#xff08;支持旧版本的 SQLite&#xff…
阅读更多...
春秋云境CVE-2023-1313

春秋云境CVE-2023-1313

简介 cockpit在2.4.1版本之前存在任意文件上传漏洞PS&#xff1a;通过在浏览器中打开/install来运行安装 正文 来到靶场&#xff0c;首先进行弱口令爆破&#xff0c;发现没用&#xff0c;那么只好老老实实的看靶场提示 先来访问/install 访问后就可以进行登录了&#xff0c…
阅读更多...
阿里云实时计算Flink的产品化思考与实践【上】

阿里云实时计算Flink的产品化思考与实践【上】

摘要&#xff1a;本文整理自阿里云高级产品专家黄鹏程和阿里云技术专家陈婧敏在 FFA 2023 平台建设专场中的分享。内容主要为以下五部分&#xff1a; 阿里云实时计算 Flink 简介产品化思考产品化实践SQL 产品化思考及实践展望 该主题由黄鹏程和陈婧敏共同完成&#xff0c;前半程…
阅读更多...
AJAX（二）：axios 和 fetch函数发送AJAX请求、同源策略、 jsonp、CORS

AJAX（二）：axios 和 fetch函数发送AJAX请求、同源策略、 jsonp、CORS

一、各种发送AJAX请求 jquery基于回调函数&#xff0c;axios基于promise 1.axios发送AJAX请求!!! axios (v1.5.0) - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 服务器&#xff1a; app.…
阅读更多...
云原生（六）、CICD - Jenkins快速入门

云原生（六）、CICD - Jenkins快速入门

Jenkuns快速入门 一、CICD概述 CICD是持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;的缩写。它是软件开发中的一种流程和方法论&#xff0c;旨在通过自动化的方式频繁地将代码集成到共享存储库中&#xf…
阅读更多...
面试题 之 webpack

面试题 之 webpack

1.说说你对webpack理解&#xff1f;解决什么问题&#xff1f; Webpack 是实现前端项目的模块化&#xff0c;用于现代 JavaScript 应用程序的静态模块打包工具&#xff0c;被webpack 直接引用的资源打包进 bunde.js的资源&#xff0c;当webpack 处理应用程序时,它会在内部构建一…
阅读更多...
将jupyter notebook文件导出为pdf（简单有效）

将jupyter notebook文件导出为pdf（简单有效）

1.打开jupyter notebook笔记&#xff1a; 2.点击file->print Preview 3.在新打开的页面右键打印 4.另存为PDF 5.保存即可 6.pdf效果 &#xff08;可能有少部分图片显示不了&#xff09; 网上也有其他方法&#xff0c;比如将其转换为.tex再转为PDF等&#xff0c;但个人觉…
阅读更多...
Maplesoft Maple 2024数学软件中文安装 Maple2024 Mac下载

Maplesoft Maple 2024数学软件中文安装 Maple2024 Mac下载

Maplesoft Maple for Mac 是一款功能强大、易于使用的数学计算软件&#xff0c;适用于各种科学计算场景。无论是教学、科研还是工程设计&#xff0c;它都能为用户提供有力的支持。 Maple2024 Mac中文破解补丁 Windows版&#xff1a;点此下载 Maple 2024 mac破解教程 打开镜像…
阅读更多...
学习可视化比较好用的网站Apache ECharts

学习可视化比较好用的网站Apache ECharts

Apache ECharts 是一个基于 JavaScript 的开源可视化图表库&#xff0c;它提供了直观、交互丰富且可高度个性化定制的数据可视化图表。这个库最初由百度团队开源&#xff0c;并在 2018 年初捐赠给了 Apache 基金会&#xff0c;成为 ASF 的孵化级项目。在 2021 年 1 月 26 日&am…
阅读更多...
Java常见限流用法介绍和实现

Java常见限流用法介绍和实现

目录 一、现象 ​编辑 二、工具 ​​​​​​1、AtomicInteger,AtomicLong 原子类操作 ​​​​​​2、RedisLua ​​​​​​3、Google Guava的RateLimiter 1&#xff09; 使用 2&#xff09; Demo 3&#xff09; 优化demo 4、阿里开源的Sentinel 三、算法 1、计数…
阅读更多...
光伏百科|分布式光伏电站如何开展运维管理工作？

光伏百科|分布式光伏电站如何开展运维管理工作？

随着经济的不断发展和生活水平的日益提高&#xff0c;节能环保已经成为全社会的责任和共识&#xff0c;分布式光伏电站作为清洁能源走进了千家万户。然而&#xff0c;在分布式光伏电站运行期间&#xff0c;面临监管困难、系统繁多、火灾隐患和运维不当等困难&#xff0c;该如何…
阅读更多...
gopher伪协议

gopher伪协议

基础知识 基本格式 基本格式&#xff1a;URL:gopher://<host>:<port>/<gopher-path>web也需要加端口号80gophert协议默认端口为70gopheri请求不转发第一个字符 get请求 问号&#xff08;&#xff1f;)需要转码为URL编码&#xff0c;也就是%3f回车换行要变…
阅读更多...
Patchwork包使用教程，R语言快速组合拼接图片

Patchwork包使用教程，R语言快速组合拼接图片

R语言如何拼接多幅图片&#xff1f; 今天分享的笔记带你领略R语言Patchwork包独特的魅力&#xff0c;patchwork是一个非常流行的用于拼接 ggplot2 图形的包&#xff0c;以一种简单的方式对图形进行排列和组合&#xff0c;不论多复杂的组合图形&#xff0c;都能确保图形之间正确…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023