当前位置: 首页 > news >正文

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

文章目录

  • 一、多排按钮导航栏样式及核心要点
    • 1、实现效果
    • 2、总体布局设计
    • 3、设置浮动及宽度
    • 4、设置图片样式
    • 5、设置文本
  • 二、完整代码实例
    • 1、HTML 标签结构
    • 2、CSS 样式
    • 3、展示效果





一、多排按钮导航栏样式及核心要点




1、实现效果


要实现下面的导航栏效果 ;

在这里插入图片描述


2、总体布局设计


该导航栏可使用 10 个 <div> 标签盒子 进行制作 ;

该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;

具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确 , 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ;

在这里插入图片描述


3、设置浮动及宽度


该布局距离上面的布局有 5 像素的上外边距 ;

如果要令 10 个坐标 , 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ;

除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐

nav {/* 整个导航布局距离顶部 5 像素 */padding-top: 5px;
}nav a {/* 设置左浮动 宽度为 20% 正好能放下 5 个 */float: left;width: 20%;/* 文字水平对其 */text-align: center;
}

4、设置图片样式


在每个布局中 , 每张图片都是 40 x 40 像素 , 并且上下有 10 像素的外边距 ;

在这里插入图片描述

图片标签的样式为 :

nav a img {/* 图片宽度为 40 像素 高度自适应 */width: 40px;/* 上下 10 像素外边距 */margin: 10px 0;
}

5、设置文本


在链接中的文本 , 放在 <span> 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ;

将其设置为 block 块级元素 , 就可以放置在图片下方 ;

在这里插入图片描述

文本 span 样式为 :

nav a span {/* 导航栏中的文本 设置为 块级元素 */display: block;
}




二、完整代码实例




1、HTML 标签结构


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入 css 初始化样式 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入要开发的 CSS 文件 --><link rel="stylesheet" href="css/index.css"><title>流式布局示例</title>
</head><body>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入 css 初始化样式 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入要开发的 CSS 文件 --><link rel="stylesheet" href="css/index.css"><title>流式布局示例</title>
</head><body><!-- 第一排 : 顶部 APP 提示标签 --><header class="app"><ul><li><!-- 左侧的关闭按钮 --><img src="images/close.png" alt=""></li><li><!-- 关闭按钮右侧的京东 LOGO --><img src="images/logo.png" alt=""></li><li>打开京东APP, 实惠又轻松</li><li>立即打开</li></ul></header><!-- 第二排 : 搜索栏 --><div class="search-wrap"><!-- 左侧的列表按钮 --><div class="search-btn"></div><!-- 中间的搜索框 --><div class="search"><!-- 中间搜索框中的 JD 图标 --><div class="jd-icon"></div><!-- 中间搜索框中的 放大镜 图标 --><div class="sou"></div></div><!-- 右侧的登录按钮 --><div class="search-login">登陆</div></div><!-- 搜索栏下方的主要内容 --><div class="main-content"><!-- Banner 栏滑动图 --><div class="slider"><img src="upload/banner.dpg" alt=""></div></div><!-- 水平排列的连续图片链接 --><div class="brand"><!-- 链接放在 div 盒子中 使用 a 标签包裹 img 标签 --><div><a href="#"><img src="upload/pic11.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic22.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic33.dpg" alt=""></a></div></div><!-- 设置多行链接图标 --><nav class="clearfix"><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a></nav>
</body></html>

2、CSS 样式


a {/* 取消链接点击时的高亮效果 */-webkit-tap-highlight-color: transparent;
}img,
a {/* 禁用 长按弹出菜单 */-webkit-touch-callout: none;
}input {/* 设置 iOS 取消按钮的自定义样式 */-webkit-appearance: none;
}div {/* 设置 CSS3 盒子模型样式 */box-sizing: border-box;
}ul {/* 取消 ul 列表项的内外边距 */margin: 0;padding: 0;/* 取消列表项的样式 - 左侧的小圆点 */list-style: none;
}img {/* 默认的图片对齐方式是基线对齐 只要不是基线对齐这里随便设置 顶部 / 底部 / 中部 对齐都可以 */vertical-align: middle;
}a {/* 设置字体颜色值 */color: #666;/* 取消链接的底部横线样式 */text-decoration: none;
}.clearfix:after {/* 清除浮动的固定样式如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */content: "";display: block;line-height: 0;visibility: hidden;height: 0;clear: both;
}body {/* 网页布局宽度 = 设备宽度 */width: 100%;/* 最小宽度 320 像素 */min-width: 320px;/* 最大宽度 640 像素 */max-width: 640px;/* 居中对齐 */margin: 0 auto;/* 字体大小 14 像素 */font-size: 14px;/* 如果是苹果就是用苹果默认字体 如果不是苹果手机 就使用后啊面的字体 */font-family: -apple-system, Helvetica, sans-serif;/* 字体颜色 */color: #666;/* 行高 */line-height: 1.5;background-color: gray;
}.app {/* 设置顶部提示条高度 45 像素 */height: 45px;
}.app ul li {/* 设置左浮动 令列表元素水平排列 */float: left;/* 设置高度 45 像素 = 行高 垂直居中 */height: 45px;line-height: 45px;/* 设置总体背景 */background-color: #333333;/* 文本水平居中 */text-align: center;/* 文本颜色白色 */color: #fff;
}.app ul li:nth-child(1) {/* 关闭按钮 宽度占布局宽度 / 设备宽度 的 8% */width: 8%;
}.app ul li:nth-child(1) img {/* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */width: 10px;
}.app ul li:nth-child(2) {/* 设置 Logo 宽度 10% */width: 10%;
}.app ul li:nth-child(2) img {/* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */width: 30px;/* 默认的图片对齐方式是基线对齐 只要不是基线对齐这里随便设置 顶部 / 底部 / 中部 对齐都可以 */vertical-align: middle;
}.app ul li:nth-child(3) {/* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度 */width: 57%;
}.app ul li:nth-child(4) {/* 右侧的 立即打开 红色按钮盒子 */width: 25%;background-color: #F63515;
}/* 下面是搜索栏样式 */.search-wrap {/* 第二排搜索栏样式 *//* 该样式在滑动时 , 始终在最上方显示 */position: fixed;/* 防止外边距塌陷进行的设置 */overflow: hidden;/* 搜索栏宽度充满全屏 */width: 100%;/* 搜索栏的高度为 44 像素 */height: 44px;/* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */min-width: 320px;/* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */max-width: 640px;
}.search-btn {/* 左侧按钮布局 *//* 左侧按钮需要设置到左侧 使用绝对定位进行设置 */position: absolute;/* 定位到左上角 */top: 0;left: 0;/* 设置盒子的尺寸 */width: 40px;height: 44px;
}.search-btn::before {/* 在 指定的标签元素内部的 前面 插入内容 *//* 左侧按钮盒子中 插入 三 图片 */content: "";/* 显示模式设置为块级元素 */display: block;/* 盒子大小设置为 20 x 18 像素 */width: 20px;height: 18px;/* 设置背景 */background: url(../images/s-btn.png) no-repeat;/* 设置图片背景大小 */background-size: 20px 18px;/* 设置图像的外边距 */margin: 14px 0 0 15px;
}.search-login {/* 右侧按钮布局 *//* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */position: absolute;/* 盒子定位到右上角 */right: 0;top: 0;/* 布局尺寸 40 x 44 像素 */width: 40px;height: 44px;/* 文字颜色白色 */color: #fff;/* 行高 = 内容高度 垂直居中 */line-height: 44px;
}.search {/* 中间部位搜索栏盒子内容 *//* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */position: relative;/* 搜索框高度 30 像素 */height: 30px;/* 白色字体 */background-color: #fff;/* 上下 0 像素外边距 左右 50 像素外边距 */margin: 0 50px;/* 左侧和右侧设置为 15 像素圆角 */border-radius: 15px;/* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */margin-top: 7px;
}.jd-icon {/* 搜索框中插入 JD 图标 *//* 设置 JD 图标的宽高 */width: 20px;height: 15px;/* 设置绝对定位 */position: absolute;/* 定位到左上角 距离顶部 8 像素  距离左侧编剧 13 像素 */top: 8px;left: 13px;/* 设置 JD 图片背景 */background: url(../images/jd.png) no-repeat;/* 设置背景图片的尺寸 会缩放背景图片 */background-size: 20px 15px;
}.jd-icon::after {/* 插入竖线 */content: "";/* 竖线盒子模型 使用绝对定位 */position: absolute;/* 竖线盒子模型 在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */right: -8px;top: 0;/* 设置显示模式为块级元素 可以设置宽高 */display: block;/* 盒子模型尺寸为 1 x 15 像素 */width: 1px;height: 15px;/* 设置盒子的灰色背景 */background-color: #ccc;
}.sou {/* 二倍精灵图 *//* 设置 精灵图中的放大镜图标 *//* 该图标是绝对定位 */position: absolute;/* 设置放大镜图标的 绝对定位位置 */top: 8px;left: 50px;/* 设置盒子模型尺寸 */width: 18px;height: 15px;/* 设置精灵图 以及精灵图中的放大镜图标位置 */background: url(../images/jd-sprites.png) no-repeat -81px 0;/* 此处将 二倍精灵图缩小了一倍 */background-size: 200px auto;
}.slider img {/* 设置 Banner 栏大图宽度尺寸为 100% */width: 100%;
}/* 设置水平方向上 连续排列的图片链接 */.brand {/* 设置圆角后 超过圆角的图片不再显示 */overflow: hidden;/* 设置圆角 顺序为 : 左上 / 右上 / 右下 /左下 */border-radius: 10px 10px 0 0;
}.brand div {/* 设置 .brand 父容器下的 div 盒子左浮动 这样这些盒子可以在水平方向上紧密排列 */float: left;/* 要在水平方向上放置 3 个 为其设置 1/3 的宽度即可 */width: 33.33%;
}.brand div img {/* 设置图片链接中的图片 在水平方向上充满父容器即可 */width: 100%;
}/* 多排按钮导航栏 */nav {/* 整个导航布局距离顶部 5 像素 */padding-top: 5px;
}nav a {/* 设置左浮动 宽度为 20% 正好能放下 5 个 */float: left;width: 20%;/* 文字水平对齐 */text-align: center;
}nav a img {/* 图片宽度为 40 像素 高度自适应 */width: 40px;/* 上下 10 像素外边距 */margin: 10px 0;
}nav a span {/* 导航栏中的文本 设置为 块级元素 */display: block;
}

3、展示效果


在这里插入图片描述

相关文章:

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

文章目录 一、多排按钮导航栏样式及核心要点1、实现效果2、总体布局设计3、设置浮动及宽度4、设置图片样式5、设置文本 二、完整代码实例1、HTML 标签结构2、CSS 样式3、展示效果 一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导…...

1. 先从云计算讲起

本章讲解知识点 什么是云计算&#xff1f; 为什么要用云计算&#xff1f; 物理服务器与云服务器对比 云计算服务类型 云计算部署类型 1. 什么是云计算&#xff1f; 云计算是一种通过计算机网络以服务的方式提供动态可伸缩的虚拟化资源的计算模式。按照服务层次分为IaaS、…...

ZooKeeper安装与配置集群

简介: ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;它提供了一个分布式环境中的高可用性、高性能、有序访问的数据存储&#xff0c;可以让分布式应用程…...

浅谈Mysql的RR和RC隔离级别的主要区别

MySQL默认为RR级别 首先默认RR是因为mysql为了保证在主从同步过程中数据的安全的问题&#xff08;涉及到binlog三种格式&#xff09;。 就是说两个并发事务数AB&#xff0c;A先开启事物最后提交也是最后&#xff0c;事务B开启和提交都在A内部&#xff0c;由于隔离级别不同&…...

Build生成器模式

设计模式简述 设计模式的核心在于提供了相关问题的解决方案&#xff0c;使得人们可以更加简单方便地复用成功的设计和体系结构。 生成器模式&#xff08;创建型设计模式&#xff09; 意图&#xff1a;将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以…...

C++程序设计——常见C++11新特性

一、列表初始化 1.C98中{}的初始化问题 在C98中&#xff0c;允许使用花括号{}对数组元素进行统一的列表初始化值设定&#xff0c;比如&#xff1a; 但是对于一些自定义类型&#xff0c;就无法使用这样的方式进行初始化了&#xff0c;比如&#xff1a; 就无法通过编译&#xff…...

Rust main 函数返回值类型不能是 String

是的&#xff0c;Rust 的 main 函数返回值类型不能是 String。 Rust 的 main 函数只能返回以下几种类型之一&#xff1a; ()&#xff1a;表示空类型&#xff0c;不返回任何值。i32&#xff1a;表示程序的退出码&#xff0c;通常非零值表示执行失败&#xff0c;0 表示执行成功…...

视频里的音乐怎么转换成mp3格式?

视频里的音乐怎么转换成mp3格式&#xff1f;视频里的音乐转换为mp3的原因有很多&#xff0c;主要是因为mp3格式是一种音频格式&#xff0c;文件大小较小&#xff0c;更易于存储和传输。相比之下&#xff0c;视频格式则是一种视频文件格式&#xff0c;虽然包含音频&#xff0c;但…...

CSS3 grid网格布局

文章目录 CSS3 grid网格布局概述grid属性说明使用grid-template-rows & grid-template-columns 定义行高和列宽grid-auto-flow 定义项目的排列顺序grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽row-gap & column-gap 设置行间距和列间距gap 简写形…...

SPSS如何进行均值比较和T检验之案例实训?

文章目录 0.引言1.均值过程2.单样本T检验3.独立样本T检验4.成对样本T检验 0.引言 因科研等多场景需要进行数据统计分析&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对均值…...

Packet Tracer - 配置交换机端口安全

Packet Tracer - 配置交换机端口安全 地址分配表 设备 接口 IP 地址 子网掩码 S1 VLAN 1 10.10.10.2 255.255.255.0 PC1 NIC 10.10.10.10 255.255.255.0 PC2 NIC 10.10.10.11 255.255.255.0 非法笔记本电脑 NIC 10.10.10.12 255.255.255.0 目标 第 1 部…...

一图看懂 aiohttp 模块:基于 asyncio 的异步HTTP网络库, 资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 aiohttp 模块&#xff1a;基于 asyncio 的异步HTTP网络库, 资料整理笔记&#xff08;大全&#xff09; 摘要模块图类关系图模块全展开【aiohttp】统计常量模块1 aiohttp.hd…...

Linux + 香橙派 + V4L2 + http 实现远程监控摄像头在网页端显示

项目场景&#xff1a; 项目需求&#xff0c;需要做一个基于边缘端的人脸识别远程监控摄像头并在网页前端展示 &#xff0c;这里采用国产香橙派作为边缘计算终端&#xff0c;安装ubuntu系统&#xff0c;系统中采用v4l2接口对摄像头进行获取&#xff0c;当客户端通过网页进行请求…...

《编码——隐匿在计算机软硬件背后的语言》精炼——第15-16章(十六进制,RAM)

“学习如春起之苗&#xff0c;不见其增&#xff0c;日有所长。” —— 宋代朱熹 文章目录 十六进制十六进制概述十六进制表字节到十六进制 存储器特定的读功能特定的写功能RAM大型RAM阵列 十六进制 十六进制概述 十六进制是一种适用于计算机的进制法。在十进制中&#xff0c;…...

leetcode.1376 通知所有员工所需的时间 - bfs/dfs + 树

1376. 通知所有员工所需的时间 目录 一、bfs 二、dfs 题目&#xff1a; 公司里有 n 名员工&#xff0c;每个员工的 ID 都是独一无二的&#xff0c;编号从 0 到 n - 1。公司的总负责人通过 headID 进行标识。在 manager 数组中&#xff0c;每个员工都有一个直属负责人&#x…...

AtCoder Beginner Contest 300——A-G题讲解

蒟蒻来讲题&#xff0c;还望大家喜。若哪有问题&#xff0c;大家尽可提&#xff01; Hello, 大家好哇&#xff01;本初中生蒟蒻讲解一下AtCoder Beginner Contest 300这场比赛的A-G题&#xff01; A - N-choice question 原题 Problem Statement Given integers A A A and…...

Go:值与指针

1. 计算机中的值 在百万年的演化历史中&#xff0c;人类对事物的属性进行了抽象&#xff0c;有了数量、精度、信息等概念的表示&#xff0c;对应的我们称之为整数、小数、文本文字等。计算机出现后&#xff0c;我们使用计算机对真实世界的问题进行建模&#xff0c;通过计算机的…...

【Linux】进程学习(2)---理解进程操作

文章目录 查看进程通过系统目录查看通过ps命令查看 通过系统调用获取进程标识符通过系统调用创建进程初识fork函数fork函数的返回值 进程状态阻塞与运行状态Linux内核源码中的进程状态运行状态-R浅度睡眠状态-S深度睡眠状态-D暂停状态-T僵尸状态-Z死亡状态-X 查看进程 通过系统…...

基于springcloud实现的医院信息系统

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 医疗信息就诊系统&#xff0c;系统主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、财务管理、患者管理。诊疗活动由各工作站配合完成&#xff0c;并将临床信息进行整理、处理、汇总、统计、分析等。本系统包括以…...

设计模式-创建型模式-(工厂、简单工厂、抽象工厂)

一、简单工厂模式 上代码 public class FoodFactory {public static Food makeFood(String name) {if (name.equals("noodle")) {Food noodle new LanZhouNoodle();noodle.addSpicy("more");return noodle;} else if (name.equals("chicken")…...

JAVA12新特性

JAVA12新特性 概述 2019年3月19日,java12正式发布了,总共有8个新的JEP(JDK Enhancement Proposals) JDK 12 is the open-source reference implementation of version 12 of the Java SE12 Platform as specified by by JSR 386 in the Java Community Process. JDK 12 reac…...

Nginx 静态文件、反向代理、负载均衡、缓存、SSL/TLS 加密、gzip 压缩 等等

Nginx的功能 1. 静态文件服务器2. 反向代理服务器3. 负载均衡4. 缓存5. SSL/TLS 加密6. URL 重写7. HTTP/28. WebSocket9. 反向代理缓存10. 安全限制11. gzip 压缩12. 请求限速13. 日志记录14. SSL 证书续订 Nginx 是一个高性能的开源 Web 服务器和反向代理服务器&#xff0c;它…...

Linux设备驱动模型(一)

一、sysfs文件系统 sysfs是一个虚拟文件系统&#xff0c;将内核总的设备对象的链接关系&#xff0c;以文件目录的方式表示出来&#xff0c;并提对设备提供读写接口。 二、kobject kobject是内核中对象表示的基类&#xff0c;可以认为所有的内核对象都是一个kobject kobject单…...

【Python入门篇】——Python基础语法(标识符与运算符)

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; Python入门&#xff0c;本专栏主要内容为Python的基础语法&#xff0c;Python中的选择循环语句…...

扩展 VirtualBox 已分配磁盘的方法

扩展 VirtualBox 已分配磁盘的方法 第一步&#xff1a;用VirtualBox命令行调整已分配磁盘的大小第二步&#xff1a;用windows磁盘管理工具扩展磁盘空间其他无关配置如何选择虚拟机的芯片组 注意&#xff1a;扩展操作只支持 vdi 格式的磁盘&#xff0c;就是VirtualBox自己的磁盘…...

【LeetCode】646. 最长数对链

646. 最长数对链&#xff08;中等&#xff09; 思路 这道题和 300. 最长递增子序列 类似&#xff0c;我们可以定义 dp 数组&#xff0c;其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个位置后&#xff0c;统计一遍各个位置的结果即可得到题目要求的结果。 但是题目中强…...

Makefile教程(Makefile的结构)

文章目录 前言一、Makefile的结构二、深入案例三、Makefile中的一些技巧总结 前言 一、Makefile的结构 Makefile 通常由一系列规则组成&#xff0c;每条规则定义了如何从源文件生成目标文件。每个规则又由目标、依赖和命令三部分组成。 下面是 Makefile 规则的基本结构&…...

SpringMVC(后)SSM整合

10、文件上传和下载 10.1、文件下载 ResponseEntity用于控制器方法的返回值类型&#xff0c;该控制器方法的返回值就是响应到浏览器的响应报文 使用ResponseEntity实现下载文件的功能 RequestMapping("/testDown") public ResponseEntity<byte[]> testResp…...

【博弈论】【第一章】博弈论导论

博弈论导论 【例题】选择数字【例题】巴什博弈【例题】射手博弈博弈论的基本概念&#xff1a;参与人战略行动信息支付函数【例题】分100元 课程概述&#xff1a; 【例题】选择数字 两个参与人A和B&#xff0c;轮流选择[3,4,5,6,7,8,9]中的一个整数&#xff08;可重复)。当累计…...

keil移植linux(makefile)

文章目录 运行环境&#xff1a;1.1 freeRTOS_LED工程移植1)修改cubeMX配置2)setting设置3)launch设置4)修改makefile5)修改代码6)实验效果 运行环境&#xff1a; ubuntu18.04.melodic 宏基暗影骑士笔记本 stm32f427IIH6 stlink 9-24v可调电源 robomaster A 板 1.1 freeRTOS_L…...

网站图片怎么做缓存/东莞百度网站排名优化

mysql编程 基本语法 语句块模式&#xff1a; 在mysql编程中&#xff0c;begin…end;基本代替了原来编程语句中的{…}语法。 但又有所区别&#xff1a;一个bigin…end;块&#xff0c;可以给定一个“标识符”&#xff0c;并且可以使用leave语句来“退出”该语句块。 流程控制…...

合肥网约车收入怎么样/seo优化策略

要监视原始的传感器数据&#xff0c;你需要实现两个通过SensorEventListener接口暴露的回调方法&#xff1a;onAccuracyChanged()和onSensorChanged()。 传感器数据的速度值&#xff0c;这些值如下&#xff1a; 1.SENSOR_DELAY_GAME &#xff1a; 如果利用传感器开发游戏&#…...

互联虚拟主机/福建seo网站

目录4281 Problem A GoGo向前冲4282 Problem B 密码解析&#xff08;正确&#xff09;4283 Problem C 三体4284 Problem D 请不要用sort&#xff08;正确&#xff09;4287 Problem E 数字根2&#xff08;正确&#xff09;4285 Problem F Ackermann function4286 Problem G 消失…...

css网站做光晕效果/seo搜索引擎优化实战

来源&#xff1a;乌枭 链接&#xff1a;https://blog.csdn.net/qq_34039315/article/details/785493111、在java中守护线程和本地线程区别&#xff1f;java中的线程分为两种&#xff1a;守护线程&#xff08;Daemon&#xff09;和用户线程&#xff08;User&#xff09;。任何…...

哈尔滨网站建设渠道/谷歌chrome浏览器

1、克隆远程仓库 git clone [仓库地址] &#xff0c;但是这样只能克隆master分支的代码&#xff0c;如果我想克隆远程仓库中某一分支的代码怎么办呢&#xff1f;git clone -b [对应的远程分支名称] [仓库地址] 。如克隆aspnetcore的3.0分支&#xff1a;git clone -b 3.0 https:…...

外贸网站开发开发/班级优化大师的功能

Lecture 2: Making Presentations in English 2.1 Importance and General Advices 2.2 Instructions on Preparing Slides 2.3 Instructions on Making Presentation...