Web前端—移动Web第五天（媒体查询、Bootstrap、综合案例-alloyTeam）

版本说明

当前版本号[20231122]。

版本修改说明
20231122初版

目录

文章目录

  • 版本说明
  • 目录
  • 移动 Web 第五天
    • 01-媒体查询
      • 基本写法
      • 书写顺序
      • 案例-左侧隐藏
      • 媒体查询-完整写法
        • 关键词 / 逻辑操作符
        • 媒体类型
        • 媒体特性
      • 媒体查询-外部CSS
    • 02-Bootstrap
      • 简介
      • 使用步骤
        • 下载
        • 使用
      • 栅格系统
      • 全局样式
        • 按钮
        • 表格
      • 组件
      • 字体图标
        • 下载
        • 使用
    • 03-综合案例-alloyTeam
      • 准备工作
      • 头部导航
      • 轮播图图片
      • 轮播图响应式
      • 开源项目响应式
      • 开源项目内容布局

移动 Web 第五天

响应式布局方案

  • 媒体查询
  • Bootstrap框架

01-媒体查询

基本写法

1682667975274

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

书写顺序

  • min-width（从小到大）
  • max-width（从大到小）

如果不按顺序去写，按css的特性来说，后面的css就会重叠前面的css样式，致使前面的无法生效。

案例-左侧隐藏

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

1682668088236

  • 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;
  height: 500px;
  background-color: skyblue;
}

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

1、先建立初步的模型，同时放了一段800字左右的文章作为测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">
            余华，中国当代著名作家，代表作品有《活着》、《许三观卖血记》等。以下是一段来自余华的《活着》的原文段落：

那天，我去看福贵。他正在田里干活，看到我，就放下手里的锄头，走过来跟我打招呼。他的脸上挂着笑容，那是一种发自内心的笑容，让我想起了我们小时候一起玩耍的日子。

福贵告诉我，他现在的生活虽然艰苦，但他已经很满足了。他说：“我现在有地种，有饭吃，还有老婆孩子陪着我，这就够了。”我看着他那张布满皱纹的脸，心里不禁感叹：这个曾经的富家子弟，如今已经变成了一个勤劳朴实的农民。

我们一起走在乡间的小路上，福贵一边走，一边给我讲述着他的故事。他说，自从他的父亲去世后，他就开始了艰难的生活。他先是卖掉了家里的地和房子，后来又把妻子和孩子送到了城里去打工。他自己则留在了乡下，靠种地为生。

福贵说：“那时候，我真的觉得活着没有什么意义。每天辛辛苦苦地干活，却换来的只是一碗稀饭。可是，我不能死，我要活下去，为了我的家人。”他的话让我想起了那些年我们在城里的日子，那时候我们总是抱怨生活的艰辛，却从未想过要放弃。

我们走到了一片麦田前，福贵指着那片金黄的麦子说：“你看，这就是我现在的生活。虽然辛苦，但我觉得很幸福。因为我知道，这片麦子是我辛勤劳动的结果，它们会让我的家人吃饱穿暖。”我看着他那充满自信的眼神，心里不禁为他感到骄傲。

夕阳西下，我们站在田埂上，看着远处的山峦和田野。福贵说：“你知道吗？我觉得我现在过得比那些有钱人还要幸福。因为他们虽然有钱，但他们失去了生活的意义。而我呢？虽然穷，但我活得充实。”我听着他的话，心里不禁为他的豁达和乐观感到敬佩。

临别时，福贵紧紧地握住我的手，说：“谢谢你来看我，希望我们以后还能常常见面。”我点点头，心里默默地祝愿他的生活越来越好。

那天，我从福贵那里学到了很多。他让我明白了生活的真谛不在于物质的丰富，而在于心灵的满足。只要我们用心去感受生活的美好，那么，无论我们身处何地，都能找到幸福的源泉。
        </div>
    </div>
</body>
</html>

image-20231121190838694

2、加入左侧栏区域。

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

image-20231121190924602

3、给文字区域添加高，并定好这个元素作为弹性容器，其子元素将按照弹性布局进行排列。

 .box{
            display: flex;
        }

.main{
            height: 500px;
            background-color: skyblue;
        }

image-20231121191149167

4、给予固定宽高，让flex为1，把left的宽度满足后，剩下的区域均由main来占据。

.main{
            flex: 1;
            height: 500px;
            background-color: skyblue;
        }

image-20231121191336699

5、实现了当网页宽度小于等于768px，就隐藏左侧区域。

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

image-20231121191725728

image-20231121191747090

媒体查询-完整写法

1682668186585

关键词 / 逻辑操作符
  • and
  • only
  • not
媒体类型

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

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

媒体查询-外部CSS

1682668446411

02-Bootstrap

简介

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

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

想查看更多配置可点击Bootstrap中文文档：[Bootstrap中文文档](Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com))

嫌上面中文少的可以点这个：Bootstrap中文网

使用步骤

下载

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

1682668529209

使用

  1. 引入 Bootstrap CSS 文件

    注：记得是：/Bootstrap/css/bootstrap.min.css!!!不要一下子tab就选了/Bootstrap/css/bootstrap-grid.min.css.

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

1、做个案例来侧试 Bootstrap 的使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap使用</title>
    <link rel="stylesheet" href="/Bootstrap/css/bootstrap.min.css">
    <style>
        div{
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">1</div>
</body>
</html>

image-20231121195151964

2、且还是响应式，根据不同的宽度，div盒子也能呈现不同的形状：

image-20231121195334605

image-20231121195353405

栅格系统

作用：响应式布局

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

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

1682668611644

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

完整网格示例如下：

image-20231121200812778

在不同的视口区间，版心宽度要不同，才能做到不同的响应效果。子集排列方式也要不一样，调用类名就能实现。

全局样式

按钮

1682668666364

image-20231121201353604

类名

  • btn：默认样式
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm
<!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 rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-danger">按钮1</button>
    <button class="btn btn-success">按钮2</button>
</body>
</html>

image-20231121204433633

表格

1682668706851

表格类：

  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

字体图标

下载

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

使用
  1. 复制 fonts 文件夹到项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 调用 CSS 类名（图标对应的类名）
  4. 前面加上“ bi- ”。
<i class="bi-android2"></i>

image-20231121211229935

03-综合案例-alloyTeam

image-20231121233516051

准备工作

1682668919871

  • HTML 结构

    注：这里引用的css顺序不得调换位置！先是bootstrap.min.css，再是bootstrap-icons.css ，最后才是index.css.

<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的，所以要先列框架的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">


<!-- 为实现动态效果而引入的JS -->
<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;
  }
}

1、引入导航栏，修改背景颜色。

.bg-light{
    background-color: pink !important;
}

image-20231121234941259

image-20231121235844837

轮播图图片

  • 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);
  }
}

1、插入轮播图所需图片。

 <div class="carousel-item active">
        </div>
        <div class="carousel-item">
        </div>
        <div class="carousel-item">
        </div>

// 轮播图
.carousel{

    .carousel-item{
        height: 500px;
        background-image: url(../assets/uploads/banner_1.jpg);
    }
}

image-20231122000915563

2、将四张照片均放进去，并把下面的轮播按钮设为四个。

<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>

// 轮播图
.carousel{

    .carousel-item{
        height: 500px;
    }
     .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);
    }
}

image-20231122001445302

3、图片太大，要记得缩放。

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

image-20231122001702106

轮播图响应式

  • 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;
}

1、设置中间文字。

    <!-- 开源项目 -->
    <div class="project container">
        <div class="title">
            <h2>OpenSource / 开源项目</h2>
            <p>种类众多的开源项目，让你爱不释手</p>
        </div>
    </div>

// 开源项目
.project{
    margin-top: 60px;
    text-align: center;
}

image-20231122002916134

2、进一步修改细节。

<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>

开源项目内容布局

  • 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;
      }
    }
  }
}

1、分为四个部分，后续只需要把图片上传完即可。

// 开源项目
.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;
          }
        }
    }
}

image-20231122003649366

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

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

相关文章

易点易动库存管理系统革新企业库存管理，降本增效

易点易动库存管理系统革新企业库存管理，降本增效

随着全球经济的快速发展和市场竞争的加剧&#xff0c;企业对库存管理的需求变得越来越迫切。传统的手工操作和繁琐的库存管理方式已经无法满足现代企业的需求。为了解决这一问题&#xff0c;易点易动库存管理系统应运而生。 易点易动库存管理系统概述 易点易动库存管理系统是一…
阅读更多...
快速上手Banana Pi BPI-M4 Zero 全志科技H618开源硬件开发开发板

快速上手Banana Pi BPI-M4 Zero 全志科技H618开源硬件开发开发板

Linux[编辑] 准备[编辑] 1. Linux镜像支持SD卡或EMMC启动&#xff0c;并且会优先从SD卡启动。 2. 建议使用A1级卡&#xff0c;至少8GB。 3. 如果您想从 SD 卡启动&#xff0c;请确保可启动 EMMC 已格式化。 4. 如果您想从 EMMC 启动并使用 Sdcard 作为存储&#xff0c;请确…
阅读更多...
220V转12V固定输出12V非隔离芯片WT5106WT5105

220V转12V固定输出12V非隔离芯片WT5106WT5105

220V转12V固定输出12V非隔离芯片WT5106WT5105 今天给大家介绍一款实用芯片&#xff0c;WT5106。它是一款高效率高精度的非隔离降压开关电源恒压控制驱动芯片。 WT5106适用于85VAC~265VAC全范围输入电压的非隔离Buck、Buckboost拓扑结构&#xff0c;小家电、电机驱动、继电器驱…
阅读更多...
分布式篇---第一篇

分布式篇---第一篇

系列文章目录 文章目录 系列文章目录前言一、分布式幂等性如何设计？二、简单一次完整的 HTTP 请求所经历的步骤？三、说说你对分布式事务的了解前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，…
阅读更多...
【HarmonyOS】 API9 Stage模型 MD5加密字符串

【HarmonyOS】 API9 Stage模型 MD5加密字符串

在API9 Stage 模型中使用MD5加密&#xff0c;使用ohpm的三方库"ohos/crypto-js"进行加密操作 【集成步骤】 1、在entry-oh-package.json5中添加"ohos/crypto-js"依赖&#xff0c;点击sync同步依赖&#xff0c;crypto-js最新版本是2.0.2只支持API10&#x…
阅读更多...
字符串和内存函数（2）

字符串和内存函数（2）

文章目录 2.13 memcpy2.14 memmove2.15 memcmp2.16 memset 2.13 memcpy void* memcpy(void* destination, const void* source, size_t num); 函数memcpy从source的位置开始向后复制num个字节的数据到destination的内存位置。这个函数在遇到 ‘\0’ 的时候并不会停下来。如果so…
阅读更多...
永久免费！N个excel表一键合并成一个表（excel表格合并技巧）

永久免费！N个excel表一键合并成一个表（excel表格合并技巧）

您是否还在用手工复制粘贴来将多个EXCEL或表的数据合并到一个表里&#xff1f;那就太麻烦&#xff0c;效率太低了&#xff0c;用金鸣表格文字识别的“表格合并”功能&#xff0c;可免费将N个excel文件或N个excel表一键合并到一个表里面&#xff0c;而且这个功能永久免费&#x…
阅读更多...
ubuntu22.04安装网易云音乐

ubuntu22.04安装网易云音乐

附件&#xff1a; https://download.csdn.net/download/weixin_44503976/88557248 wget https://d1.music.126.net/dmusic/netease-cloud-music_1.2.1_amd64_ubuntu_20190428.deb wget -O patch.c https://aur.archlinux.org/cgit/aur.git/plain/patch.c?hnetease-cloud-m…
阅读更多...
山西电力市场日前价格预测【2023-11-24】

山西电力市场日前价格预测【2023-11-24】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-11-24&#xff09;山西电力市场全天平均日前电价为415.13元/MWh。其中&#xff0c;最高日前电价为685.26元/MWh&#xff0c;预计出现在18:00。最低日前电价为296.84元/MWh&#xff0c;预计…
阅读更多...
重磅！2023年两院院士增选名单公布

重磅！2023年两院院士增选名单公布

中国科学院 关于公布2023年中国科学院院士增选当选院士名单的公告 根据《中国科学院院士章程》《中国科学院院士增选工作实施办法&#xff08;试行&#xff09;》等规定&#xff0c;2023年中国科学院选举产生了59名中国科学院院士。 现予公布。 中国科学院 2023年11月22日…
阅读更多...
内衣洗衣机哪些品牌质量好实惠？小型洗衣机全自动

内衣洗衣机哪些品牌质量好实惠？小型洗衣机全自动

现在洗内衣内裤也是一件较麻烦的事情了&#xff0c;在清洗过程中还要用热水杀菌&#xff0c;还要确保洗衣液是否有冲洗干净&#xff0c;还要防止细菌的滋生等等&#xff0c;所以入手一款小型的烘洗全套的内衣洗衣机是非常有必要的&#xff0c;专门的内衣洗衣机可以最大程度减少…
阅读更多...
Altium Designer学习笔记10

Altium Designer学习笔记10

再次根据图纸进行布局走线&#xff1a; 这个MT2492 建议的布局走线。 那我这边应该是尽量按照该图进行布局&#xff1a; 其中我看到C1的电容的封装使用的是电感的封装&#xff0c;需要进行更换处理&#xff1a; 执行Validate Changes和Execute Changes操作&#xff0c;更新&a…
阅读更多...
11月23日星期四今日早报简报微语报早读

11月23日星期四今日早报简报微语报早读

11月23日星期四&#xff0c;农历十月十一&#xff0c;早报微语早读。 1、我国5G基站总数达321.5万个&#xff1b; 2、2023年两院院士增选结果揭晓&#xff0c;共133人当选&#xff1b; 3、北京低保标准提升至每人每月1395元&#xff1b; 4、上海制定体育发展条例&#xff1a…
阅读更多...
C++数组中重复的数字

C++数组中重复的数字

3. 数组中重复的数字 题目链接 牛客网 题目描述 在一个长度为 n 的数组里的所有数字都在 0 到 n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字是重复的，也不知道每个数字重复几次。请找出数组中任意一个重复的数字。 Input: {2, 3, 1, 0, 2, 5}Output: 2解题…
阅读更多...
Postgres 数据库中 ULID 和 UUID 的性能

Postgres 数据库中 ULID 和 UUID 的性能

大家好&#xff01;在本文中&#xff0c;我想分享我对经常用作标识符的数据类型的知识和看法。今天我们将同时讨论两个主题。这些是数据库端按键和键的数据类型衡量的搜索速度。 我将使用PostgreSQL数据库和演示Java服务来比较查询速度。 UUID 和 ULID 为什么我们需要某种难…
阅读更多...
【Java工具篇】Java反编译工具Bytecode Viewer

【Java工具篇】Java反编译工具Bytecode Viewer

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
解决 requests 库上传大文件速度慢的问题：从问题原因到解决方案

解决 requests 库上传大文件速度慢的问题：从问题原因到解决方案

在我的加班日志里&#xff0c;经常会有一些日期和事件&#xff0c;这次我要写的是2023-03-24&#xff0c;当时的事件是追bug。 我遇到了一个困扰已久的问题&#xff0c;就是requests库上传大文件的速度非常慢。这个问题让我很头疼&#xff0c;因为我正在处理一个需要大量上传文…
阅读更多...
浅谈JDK动态代理(中)

浅谈JDK动态代理(中)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 动态代理的使命 在做日…
阅读更多...
如何用CHAT解释文章含义？

如何用CHAT解释文章含义？

问CHAT&#xff1a;解释“ 本身乐善好施&#xff0c;令名远近共钦&#xff0c;待等二十左右&#xff0c;定有高亲可攀&#xff1b;而且四德俱备&#xff0c;帮夫之缘亦有。主持家事不紊&#xff0c;上下亦无闲言。但四十交进&#xff0c;家内谨防口舌&#xff0c;须安家堂&…
阅读更多...
基于SpringBoot垃圾分类小程序系统的设计与实现

基于SpringBoot垃圾分类小程序系统的设计与实现

文章目录 一&#xff0c;系统演示二&#xff0c;系统核心代码介绍 最近开发了一个垃圾分类的小程序。 因为导师一直也是要学生做创新点&#xff0c;前前后改了几个版本&#xff0c;好在过了&#xff0c;也算不错。 我每天基本5点半起床&#xff0c;晚上11点睡觉&#xff0c;基…
阅读更多...
最新文章

Copyright @ 2022~2023