十个响应式页面项目

news2024/11/23 15:30:34

十个响应式页面项目

上接 53 个特效：

  • 53 个 CSS 特效 1
  • 53 个 CSS 特效 2
  • 53 个 CSS 特效 3（完）

照例，预览地址在 http://www.goldenaarcher.com/html-css-js-proj/，git 地址： https://github.com/GoldenaArcher/html-css-js-proj

所有的 app 除了最后一个 Paypal Clone 之外都只有一个页面

关于加载不同样式的 css，如果想要优化，可以用 How to load different css file depending on window width: smaller size not recognized 这里的一个答案去获取当前页面的 viewport 然后下载对应的 CSS：

<head>
  <link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
  <link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
  <link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
  <link
    href="/static/mobile.css"
    media="(max-width: 500px)"
    rel="stylesheet"
    type="text/css"
  />
  <link
    href="/static/main.css"
    media="(min-width: 500px)"
    rel="stylesheet"
    type="text/css"
  />
</head>

相对而言说可以减少一些下载代码的内容，不过如果把文件切太多份的话， HTML 发送请求也会对后端造成一定的压力……虽然说静态页面+图片不是太多的网站，这样的问题一般不是很大就是了。

Food Application

整个页面分成了四个部分，具体来说是比较简单的实现，对于 responsive 的调试，基本上也就是字体大小、padding、换行之类的差别

proj 1 landing page

这个实现挺简单的，并且小屏幕模式下其实和首页没什么特别大的区别

这里的实现就是分为一个 navbar(position 为 fixed)，然后一组跳动的 icons(skew + transformation) 实现，这块需要搭配 JS 实现。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

navbar 的位移和 hover 都使用了过渡，这点在之前的小特效里面已经写过很多了，就不多赘述

menu

这里也是大屏幕和小屏幕基本没什么差别，唯一的区别就在于排版（flex-wrap 设置为 wrap，然后控制 card 的大小）

在这里插入图片描述

在这里插入图片描述

gallery

同上，不过这里的 menu 的 hover 特效还是挺好看的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

边框的实现通过控制 box-shadow，scale 和 blur 完成：

.food-img {
  width: 24vw;
  height: 15vw;
  object-fit: cover;
  box-shadow: 0.3rem 0.3rem 0.1rem #e92929, 0.5rem 0.5rem 0.1rem #a2e946,
    0.7rem 0.7rem 0.1rem #297ce9, 0.9rem 0.9rem 0.1rem #e92999;
  transition: all 0.5s;
}

.gallery-link:hover .food-img {
  box-shadow: 1rem 1rem 0.1rem #e92929, 2rem 2rem 0.1rem #a2e946,
    3rem 3rem 0.1rem #297ce9, 4rem 4rem 0.1rem #e92999;
  transform: scale(1.1);
  filter: blur(0.5rem);
  opacity: 0.5;
}

proj1 footer

footer 没什么好说的了

在这里插入图片描述

Creative Design

这里主要是在 HTML 那里加了个 scroll-behavior: smooth，这样可以让通过 nav 跳转页面的过程变得柔和一些，而不是直接刷的一下页面背景就跳了。另一个是 landing page 的波纹特效。

另外我个人觉得这个背景的配色是非常有问题的，我试了一下对比度的测试：

在这里插入图片描述

这个对比度肯定是不合格的，做页面设计最好还是跟一下 accessibility 测试和 WCAG AAA 标准比较好……

pro2 landing

整个首页效果如下：

在这里插入图片描述

在这里插入图片描述

波纹的效果如下：

在这里插入图片描述

实现原理是让两个正方形旋转的速度不一致上的视觉差而形成的

在这里插入图片描述

正方形本身倒是没有形变，只是单纯地旋转，这个技巧真的挺巧的

Customer

在这里插入图片描述

这里的小技巧是，border 可以使用 box0shadow 来实现，能够形成更加柔和的边框，以及这种 align，如果只是 3 张卡片，可以用 flex+ align flex-end or flex-start 的方式形成

然后……对比度真的太重要了……我在笔记本上就基本看不到 customers 这几个字，盯着看的时候感觉跟要瞎了一样……

Team

在这里插入图片描述

布局技巧跟 card 一样，这里出现的特效还是有点意思的：

在这里插入图片描述

通过 skew+改变 transform-origin+实现，因为有了一个 border-radius 的设置，所以背景要比卡片大一些，然后也需要 overflow：hidden。

Contact

这里有一个 3d 的效果，用的不多但是挺巧的：

在这里插入图片描述

Business Agency

这里整体来说一些 JS 的使用挺有趣的，CSS 方面技巧性不是特别多，前面或是之前的特效基本提过了

proj3 landing

在这里插入图片描述

这里首页有个字跳动的 CSS 效果：

在这里插入图片描述

这也使用 animation+animation delay 实现的。

proj3 about us

这里 video 倒是没有用原生 video 提供的 control，而是用 JS+fontawesome 的 icon+HTML/CSS 写的控制：

在这里插入图片描述

CSS 部分没什么好说的，主要就是一些定位上的实现，JS 部分用的是 video 提供的一些 attributes 进行的计算对进度条进行重绘：

完整控制流程如下：

const video = document.querySelector('.video');
const btn = document.querySelector('.buttons button i');
const bar = document.querySelector('.video-bar');

const playPause = () => {
  if (video.paused) {
    video.play();
    btn.className = 'far fa-pause-circle';
    video.style.opacity = '.7';
  } else {
    video.pause();
    btn.className = 'far fa-play-circle';
    video.style.opacity = '.3';
  }
};

btn.addEventListener('click', () => {
  playPause();
});

video.addEventListener('timeupdate', () => {
  const barWidth = video.currentTime / video.duration;
  bar.style.width = `${barWidth * 100}%`;
  if (video.ended) {
    btn.className = 'far fa-play-circle';
    video.style.opacity = '.3';
  }
});

在这里插入图片描述

proj3 pricing

在这里插入图片描述

pricing 用的是 swiperjs 实现的，我这里跟着教程写发现不行，需要添加 backface-visibilit 才行，否则前后显示的内容都是一样的

.pricing-card-back,
.pricing-card-front {
  backface-visibility: hidden;
}

在这里插入图片描述

proj3 contact

没什么特别大的区别

在这里插入图片描述

Apple eCommerce

这个项目的特效真的挺有意思的，不过对 JS 的依赖有些高

这里有一个小 tip，如果修改字体颜色会修改元素的站位，让 CSS 产生形变，可以考虑用 scale 进行放大缩小

proj5 landing

这个是移动端和桌面版差距比较大的视频

在这里插入图片描述

在这里插入图片描述

可以看到桌面版的互动更多，移动端这里旋转的 iPhone 就变成了背景，这里一定是开了 3D 特效的，互动的效果如下：

在这里插入图片描述

这里同样也通过 JS 实现，上下控制的是 x 轴，左右 y，斜的是 z，实现如下：

document.querySelector('.top-x-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${(x += 20)}deg) rotateY(${y}deg) rotateZ(${z}deg)`;
});

document.querySelector('.bottom-x-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${(x -= 20)}deg) rotateY(${y}deg) rotateZ(${z}deg)`;
});

document.querySelector('.left-y-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${x}deg) rotateY(${(y -= 20)}deg) rotateZ(${z}deg) `;
});

document.querySelector('.right-y-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${x}deg) rotateY(${(y += 20)}deg) rotateZ(${z}deg) `;
});

document.querySelector('.top-z-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${(z -= 20)}deg) `;
});

document.querySelector('.bottom-z-control').addEventListener('click', () => {
  cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${(z += 20)}deg) `;
});

总体来说 CSS 的框架搭好了，JS 这里就好写

iphone

比较简单的实现，背景通过 skew 实现

在这里插入图片描述

macbook

在这里插入图片描述

这个开机动画纯 CSS 写的，是真的厉害：

在这里插入图片描述

实现步骤如下：

  1. 使用合适的图片创造出 mac 屏幕半开的状态

    在这里插入图片描述

    这同样通过两张图片实现，以键盘远离人的那一侧作为 x 轴对屏幕进行就 x 轴的旋转，就能实现开关屏幕的状态

  2. 显示黑屏和 loading 的状态

    这里主要还是通过 animation delay 创造的时间差，黑屏本身和 loading bar 的实现都不是很难，但是 animation-delay 要设置好

  3. 显示开机的状态

    关键同样是 animation-delay 的设置

实现起来难度其实不是很高，主要是这个巧思很妙

iwatch

在这里插入图片描述

在这里插入图片描述

这一块的实现主要也是依赖于 JS，不过真的挺有意思的，不知道是苹果本身的实现，还是 up 想的，我还特地到苹果官方看了一下，最近的实现都是基于视频做的了。

主要也是根据点击时间修改对应的 margin，实现如下：

watchTopControl.addEventListener('click', () => {
  watchCases.style.marginTop = `${(axisY -= 70)}rem`;
  hideControl();
});

watchBottomControl.addEventListener('click', () => {
  watchCases.style.marginTop = `${(axisY += 70)}rem`;
  hideControl();
});

watchRightControl.addEventListener('click', () => {
  watchBands.style.marginRight = `${(axisX += 70)}rem`;
  hideControl();
});

watchLeftControl.addEventListener('click', () => {
  watchBands.style.marginRight = `${(axisX -= 70)}rem`;
  hideControl();
});

CSS 部分再加一个对 margin 的 transition。

airpods

在这里插入图片描述

在这里插入图片描述

这个没啥特别的点，主要就是修改了移动端的布局。

footer

icons 应该是从 apple 上扒下来的

在这里插入图片描述

个人网页

这里的技巧基本都说过了，就直接贴图好了

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

移动端布局没什么特别大的差别，无非就是卡片摊平了而已。

这里个人技能有用 JS 做一个百分比的计算，然后实现了一个 transition，不过类似的有些过很多了。

nav 的高亮通过对比当前的 scrollY 和 div 的 scrollY 实现。

顺便这种技能的百分比……究竟怎么计算的……

Cars

同样也没什么特别难的点，都是比较简单的 CSS，JS 部分用的也不多，主要就是 navbar 点击事件，贴个图完事儿

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里的 shelf 特效需要加一个 transform-style: preserve-3d; 或者用 perspective 单独创建一个 3D 环境，不知道 3D 环境是不是变了，愿教程的代码里没有用这个……

video gallery 这里有一个 mouseover 播放视频的操作，这个和上面的 click 没什么区别，这里就不重复了，换一个点击事件就可以了

Architect

这个项目有几个地方还挺有意思的，所以稍微说一说

proj7 landing page

在这里插入图片描述

这个页面移动端和电脑端没差太多，主要就是有一个图片渐变式放大的效果：

在这里插入图片描述

这个也是通过 transition 实现的，不需要 infinite，过渡一段时间就行了。如果用 scale 的话倒是不用控制太多，如果用 left/position 的话，对 bg 的定位还是比较重要的

About Us

在这里插入图片描述

这个是现实挺有趣的，因为用 grid+place-item 实现的：

在这里插入图片描述

我刚开始还以为使用定位写的，也是没想到……

不过为了实现方便，到 large device 以下就平铺了：

在这里插入图片描述

Our Team

在这里插入图片描述

这里有一个 tilt 的实现，不过是用 tilt.js 完成的，效果如下：

在这里插入图片描述

相关效果可以查看他们的官网：

在这里插入图片描述

Contact

在这里插入图片描述

没什么特点的一个 section

Tours

也是有几个比较 neat 的点

proj8 landing

在这里插入图片描述

这里有两个点，第一个是 logo（字）会跳动，这个也使用 transition+delay 就可以实现了

在这里插入图片描述

第二个就是气球的一个动态，要实现这个效果需要开启 3D 环境，让 png 按序延着 xyz 轴进行移动就可以了（使用 keyframe），最后的选择可以让气球飘回来，重复循环，或者是让气球停留在某个地方

tour list

在这里插入图片描述

在这里插入图片描述

这里有个卡片的前后置换效果，也是用比较简单的 3D 就能

review

在这里插入图片描述

这里布局没什么好说的，背景用 video 进行播放，代码如下：

<div class="video-container">
  <video class="bg-video" autoplay muted loop>
    <source src="images/video.mp4" type="video/mp4" />
  </video>
</div>

这里移动端就回到了正常的布局节省一点空间，而不是继续使用 skew 凹造型：

在这里插入图片描述

contact

在这里插入图片描述

这个 contact 的页面不是很难，但是背景色会不断的渐变，这一点还是有点氛围感的

footer

在这里插入图片描述

这里也是比较普通的设计

wine house

这个整体做成的是一个 ppt 式的结构，原本是打算用鼠标的滚轮和点击事件完成，我试了一下，用笔记本的手势也可以，但是因为没有实现对应的手势，所以 JS 切图真快基本上是崩了，有的时候会一下子滑过四五张图片。

布局方面大概都是这种样子的：

在这里插入图片描述

换的也就背景图和中间的内容，大概也是一两张图和字这样。

除此之外 CSS 就挺简单的，大量使用 position：absolute 去完成定位，内容也挺简单的，没什么好多说，难度比较高的就是 JS 实现了：

let counter1 = 0;
let counter2 = 1;
let bool = true;

const sections = document.querySelectorAll('section');
const progress = document.querySelector('.progress h2');
const circles = document.querySelectorAll('.circle');
const menu = document.querySelector('.menu');
const section1wrapper = document.querySelector('.section-1-wrapper');
const section5wrapper = document.querySelector('.section-5-wrapper');

section1wrapper.style.transform = 'scale(1)';

const progressCounter = () => {
  progress.textContent = `${counter2}/${sections.length}`;

  Array.from(circles).forEach((circle) => {
    circle.style.backgroundColor = 'transparent';
  });
  document.querySelector(`.circle-${counter2}`).style.backgroundColor = '#ddd';
};

const pageController = () => {
  bool = true;
  if (counter1 === 5) {
    Array.from(sections).forEach((section) => {
      section.style.left = '0';
    });
    counter1 = 0;
    counter2 = 1;
    section1wrapper.style.transform = 'scale(1)';
    section5wrapper.style.transform = 'scale(1.5)';
    progressCounter();
    bool = false;
  }

  if (counter1 === -1) {
    Array.from(sections).forEach((section) => {
      if (section.classList[0] === 'section-5') {
        return;
      }
      section.style.left = '-100vw';
    });
    counter1 = 4;
    counter2 = 5;
    section1wrapper.style.transform = 'scale(1.5)';
    section5wrapper.style.transform = 'scale(1)';
    progressCounter();
    bool = false;
  }
  progressCounter();
  return bool;
};

window.addEventListener('wheel', (e) => {
  const deltaY = e.deltaY > 0;

  if (deltaY) {
    counter1++;
    counter2++;
  } else {
    counter1--;
    counter2--;
  }

  pageController();
  progressCounter();
  console.log(counter1, counter2);

  if (bool) {
    document.querySelector(
      `.section-${deltaY ? counter1 : counter2}`
    ).style.left = `${deltaY ? '-100vw' : '0'}`;

    document.querySelector(
      `.section-${deltaY ? counter1 : counter2}-wrapper`
    ).style.transform = `scale(${deltaY ? '1.5' : '1'})`;

    document.querySelector(
      `.section-${deltaY ? counter1 + 1 : counter2 + 1}-wrapper`
    ).style.transform = `scale(${deltaY ? '1' : '1.5'})`;
  }
});

document.querySelector('.left-btn').addEventListener('click', () => {
  counter1--;
  counter2--;
  pageController() &&
    (document.querySelector(`.section-${counter2}`).style.left = '0');

  if (bool) {
    document.querySelector(`.section-${counter2}-wrapper`).style.transform =
      'scale(1)';
    document.querySelector(`.section-${counter2 + 1}-wrapper`).style.transform =
      'scale(1.5)';
  }
});

document.querySelector('.right-btn').addEventListener('click', () => {
  counter1++;
  counter2++;
  pageController() &&
    (document.querySelector(`.section-${counter1}`).style.left = '-100vw');

  if (bool) {
    document.querySelector(`.section-${counter2}-wrapper`).style.transform =
      'scale(1)';
    document.querySelector(`.section-${counter1}-wrapper`).style.transform =
      'scale(1.5)';
  }
});

document.querySelector('.grapes-img').addEventListener('mouseover', () => {
  document.querySelector('.section-3-wrapper').style.opacity = '.5';
});

document.querySelector('.grapes-img').addEventListener('mouseout', () => {
  document.querySelector('.section-3-wrapper').style.opacity = '1';
});

menu.addEventListener('click', () => {
  document.querySelector('.navbar').classList.toggle('change');
});

Paypal Clone

因为有参考原型，所以这个也没很花里胡哨

稍微有点意思的事 navbar 的变化，大屏幕下是展开的，小屏幕下用的是 hamburger icon，主要就是使用了 media query 然后选择哪个 div 进行 display 而已，其他部分就是登录注册两个表单，也没什么好说的。

少图好像是因为我上传图片到上限了，现在 csdn 上图片上传不上去……之前是等了两个小时才能发几张图，现在又失败了

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

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

相关文章

Seata处理分布式事务之1.7.0

Seata处理分布式事务之1.7.0

https://blog.csdn.net/zhang33565417/article/details/122768300 1.5.0之后版本发生了很大改变 1.seata安装 1.1官网地址 http://seata.io/zh-cn/ 1.2下载地址 https://github.com/seata/seata/releases 下载的是seata-server-1.7.0.zip 1.3seata相关配置的修改 seata-…
阅读更多...
Python学习 -- Math模块和Random模块

Python学习 -- Math模块和Random模块

math 模块提供了许多数学函数&#xff0c;用于执行各种数学运算。以下是一些常用的 math 函数以及相应的示例代码&#xff1a; math.sqrt(x): 计算平方根。 import math x 25 square_root math.sqrt(x) print(f"√{x} {square_root}") math.pow(x, y): 计算 x …
阅读更多...
好用的电容笔有哪些推荐？适合开学买电容笔推荐

好用的电容笔有哪些推荐？适合开学买电容笔推荐

尤其是在苹果品牌推出了专属Pencil系列之后&#xff0c;苹果原装的Pencil系列产品&#xff0c;更是将价格压到了所有人都无法企及的地步。市场上有不少可以替代苹果Pencil的平替电容笔&#xff0c;无论是做笔记还是专业的绘画&#xff0c;都完全足够了。在此&#xff0c;我将为…
阅读更多...
电视盒子什么品牌好？数码博主盘点目前性能最好的电视盒子

电视盒子什么品牌好？数码博主盘点目前性能最好的电视盒子

电视盒子是非常重要的&#xff0c;老人小孩基本每天都会看电视&#xff0c;而电视盒子作为电视盒子的最佳拍档销量十分火爆&#xff0c;我自己每个月都会测评几次电视盒子&#xff0c;今天给大家详细解读一下电视盒子什么品牌好&#xff0c;看看目前性能最好的电视盒子是哪些&a…
阅读更多...
电力智能监控系统

电力智能监控系统

电力智能监控系统依托电易云-智慧电力物联网&#xff0c;利用计算机、计量保护装置和总线技术&#xff0c;对中、低压配电系统的实时数据、开关状态及远程控制进行了集中管理。该电力监控系统可以为企业提供"监控一体化"的整体解决方案&#xff0c;主要包括实时历史数…
阅读更多...
AutoHotkey（AHK）脚本，自动截图当前屏幕并发送给微信窗口

AutoHotkey（AHK）脚本，自动截图当前屏幕并发送给微信窗口

前提先安装好 AutoHotkey &#xff0c;本脚本依赖AutoHotkey 环境 首先 &#xff0c;设置微信的快捷键 执行代码如下&#xff1a; Loop {SendInput, {Alt down}s{Alt up}Sleep, 2000 ; 等待2秒; 双击鼠标左键Click, 2Sleep, 1000 ; 等待1秒SendInput, {Alt down}a{Alt up}Sl…
阅读更多...
systemverilog运行的时候调用系统函数运行python等

systemverilog运行的时候调用系统函数运行python等

systemverilog 运行的时候使用系统函数 使用场景&#xff0c;在仿真过程中&#xff0c;需要外部环境准备仿真参数&#xff0c;或者调整仿真参数的时候 创建一个python文件 print("123")创建一个sv文件 module dut ;initial begin$system("python 123.py"…
阅读更多...
【补充】助力工业物联网，工业大数据之AirFlow安装

【补充】助力工业物联网，工业大数据之AirFlow安装

【补充】助力工业物联网&#xff0c;工业大数据之AirFlow安装 直接在node1上安装 1、安装Python 安装依赖 yum -y install zlib zlib-devel bzip2 bzip2-devel ncurses ncurses-devel readline readline-devel openssl openssl-devel openssl-static xz lzma xz-devel sqlit…
阅读更多...
WebStorm软件安装包分享（附安装教程）

WebStorm软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 WebStorm是一款由JetBrains开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于开发Web应用程序。它支持多种前端技术&#xff0c;如HTML、CSS、JavaScript、TypeScript等&#xff0c;并提供了丰富的功能和工具&…
阅读更多...
ICL7106芯片的特性、应用与重要性 | 百能云芯

ICL7106芯片的特性、应用与重要性 | 百能云芯

ICL7106 是一种专用集成电路 (IC)&#xff0c;在模数转换中发挥着至关重要的作用。它是一种通用且广泛使用的 ADC&#xff0c;可在各种电子应用中提供高精度测量。下面小芯为您详细解析ICL7106 是什么、它的特性、应用及其在电子领域的重要性。 ICL7106 是 Intersil&#xff08…
阅读更多...
记一次Nginx代理Mysql服务的经历

记一次Nginx代理Mysql服务的经历

背景&#xff1a; 根据组长背景描述&#xff0c;具备以下前提 1. Mysql服务器为 某A云厂商的RDS SAAS服务&#xff0c;但是不开通外网服务 2. EC2 服务器一台&#xff0c;某A云厂商LaaS服务&#xff0c;也不开通外网 3.阿里云服务器一台&#xff0c;这台服务器有服务需要连…
阅读更多...
巨人互动|游戏出海游戏出海效果怎样？

巨人互动|游戏出海游戏出海效果怎样？

游戏出海是指将原本面向国内市场的游戏产品进行调整和优化&#xff0c;以适应海外市场的需求&#xff0c;并进行推广和销售。下面小编讲讲关于游戏出海对于游戏效果的影响的一些讨论点。 1、市场扩大 通过游戏出海&#xff0c;可以将游戏产品的目标受众从国内扩展到全球范围内…
阅读更多...
博物学欣赏

博物学欣赏

自文艺复兴以降&#xff0c;西方开启发现世界的旅程。 这些东西对于科学、地理学、考古学、探险、旅游学、博物学、绘画学、美学无疑有着至高无上的借鉴价值。我们今天出版这些图文并茂的书籍有如斯高远的志向和目标&#xff1a; 展现自然的历史风貌 呈现万物的生态原样 复现…
阅读更多...
nginx离线安装

nginx离线安装

ngixn的离线安装(centos7) 需要的依赖 gcc、gcc-c pcre-8.42.tar.gz zlib-1.2.11.tar.gz openssl-1.1.1s.tar.gz perl-5.28.0.tar.gz 在进行nginx离线安装时&#xff0c;首先查看系统是否安装 gcc、gcc-c&#xff0c;若没有进行安装&#xff0c;请先进行安装 gcc -v #查…
阅读更多...
线程、并发相关---第五篇

线程、并发相关---第五篇

系列文章目录 文章目录 系列文章目录一、并发的三大特性二、volatile一、并发的三大特性 原子性 原子性是指在一个操作中cpu不可以在中途暂停然后再调度，即不被中断操作，要不全部执行完成，要 不都不执行。就好比转账，从账户A向账户B转1000元，那么必然包括2个操作：从账户…
阅读更多...
PMP备考过程和心得

PMP备考过程和心得

23年还剩11月的考试&#xff0c;教材是第七版教材&#xff0c;也有可能增加连线题和填空题&#xff0c;要做好题型变化的准备。现在可以将英文报名先报了。 第七版教材 第七版再度升级&#xff0c;不否认前几版的基于过程的方法&#xff0c;强调项目不只是产生输出&#xff0…
阅读更多...
【OpenCV入门】第二部分——Numpy模块

【OpenCV入门】第二部分——Numpy模块

写在前面&#xff1a; 这个部分是Numpy模块与OpenCV有关的部分。如果想了解Numpy库是什么&#xff0c;或者想要直接单独学习Numpy库&#xff0c;可以看看我以前写的这篇Numpy学习笔记。一些内容如数组类型、数组创建、数组运算和数组索引在链接文章里有&#xff0c;就不在这里赘…
阅读更多...
SQL注入绕过实战案例一

SQL注入绕过实战案例一

目录 一、SQL-LAB靶场搭建 1、搭建环境 2、开启nginx和mysql 3、将下载好的sal-labs靶场将压缩文件解压至phpstudy的www目录下 4、查看mysql密码&#xff0c;将其修改值靶场配置文件中 5、配置网站 6、完成后我们就可以在浏览器输入127.0.0.1&#xff1a;8090进入靶场 二…
阅读更多...
vue 打印

vue 打印

vue-print-nb插件使用 vue 打印 vue-print-nb - 简书 1、media print 内样式无效问题 <style lang"scss"> media print {} </style> style上不能加scoped; 2、分页问题 A4纸的长宽&#xff1a;210mm297mm&#xff0c;css中支持mm单位&#xff0c;可…
阅读更多...
室内外高精度融合定位模块UWB+RTK

室内外高精度融合定位模块UWB+RTK

UWBRTK融合定位模块是华星智控自主研发的一款用于实现室内外高精度融合定位的模块。 UWB&#xff08;Ultra-Wideband&#xff09;&#xff1a;UWB是一种无线通信技术&#xff0c;它利用非常宽的频带来传输数据。UWB技术可以提供非常精确的距离测量&#xff0c;因为它能够以极短…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023