HTML+CSS+Vue3的静态网页，免费开源，可当作作业使用
拿走请吱一声，点个关注吧，代码如下，网页有移动端适配
HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.css"></link><title>Document</title>
</head><body style="margin: 0;"><div id="app"><div class="meun-btn" @click="showMeun"></div><div id="sidebar" class="sidebar"><img class="close-btn" src="img/close.svg" @click="closeMeun" /><div class="content"><ul><li>Home</li><li>Track My Order</li><li>Contact us</li></ul><ul><li>FAQs</li><li>Return Policy</li><li>Payment Methods</li><li>Terms of Service</li><li>Privacy Policy</li><li>Shipping Policy</li></ul></div></div><div class="overlay" v-show="show" @click="closeMeun"></div><div style="background-color: #f7f7f7"><div class="logo"><img src="img/logo.gif" width="100"></div><div class="content"><div class="left"><div class="img" :style="{backgroundImage: `url('/img/${optionIndex}.jpg')`}"></div><div class="img-bar"><div class="front" @click="frontImg"><img src="img/zuojiantou.svg" alt=""></div><div class="product-bar"><div class="product-image" v-for="(item, index) in options" :key="index"@click="optionIndex=index"><img :src="`img/${index}.jpg`"></div></div><div class="next" @click="nextImg"><img src="img/youjiantou.svg" alt=""></div></div></div><div class="right"><h1>🔥LAST DAY 60% OFF🎁Intelligent Electric Heating Scarf🔥</h1><div class="price"><span class="old">$45.96 </span><span class="new">$22.98</span></div><hr><div class="text"><p>HURRY! ONLY <span style="color: red;">250</span> LEFT IN STOCK.</p><p><span>98%</span> customer buy <span>3-5</span> items to usedaily and gifts for their belovedone</p><p><span>3555</span> People are viewing right now</p></div><p style="color: #626262;">Sale ending in</p><div class="bar"><div class="value"></div></div><p class="timer">08:41</p><h4>Color</h4><div class="options"><div class="item" :class="optionIndex==index?'active':''" v-for="(item, index) in options":key="index" @click="optionIndex=index">{{item}}</div></div><div class="pay"><div class="top"><div class="count"><span @click="count--">➖</span><input v-model="count"></input><span @click="count++">➕</span></div><div class="block cart"><img src="img/card.svg" width="20"><span>Add to cart</span></div><div class="block now"><img src="img/buy.svg" width="20"><span>Buy it now</span></div></div><div class="center"><img src="img/paypal.svg" height="20"></div><img src="img/safe-checkout.png" width="100%"></div></div></div></div><div class="description"><div class="left">Description</div><div class="right"><p><span>The Newly Upgraded Scarf</span></p><p style="margin: 25px 0 5px;"><span>It adopts the principle of infrared heating, rapid heating,three-speed</span></p><p style="margin: 0;"><span>temperature adjustment, not afraid of cold winter.</span></p><img src="img/img1.jpg" width="100%"><p style="font-size: 25px;">FEATURES</p><ul><li>⭐<span>Intelligent Heating</span>: Heats up in 3 seconds with an efficient graphene carbon fiberheatingsystem. Intelligent heating settings (35°C-45°C-55°C/95°F-113°F-131°F) to suit your needs.</li><li>⭐<span>Comfortable Material</span>: Breathable and ultra-light material. Comfortable and softcotton withdecent elasticity.</li></ul><img src="img/img2.jpg" width="100%"><ul><li>⭐<span>Health Benefits:</span> Graphene heating technology and release of 8-9mm far-infraredrays aid bloodcirculation and help relax tense neck muscles. The position of the heated pad can be adjustedfor targeted therapy.</li><li>⭐<span>Human-friendly</span>: The output current is 5V, which is a weak current withintheacceptable rangeof the human body and will not cause harm to the body.</li><li>⭐<span>Notes:</span> It is washable (hand wash, machine wash); an external power bank isrequired. Please besure to remove the mobile power supply before washing.</li></ul><p style="font-size: 25px;"><span> SPECIFICATION</span></p><ul><li><span>Material:</span> Cotton</li><li><span>Current:</span>5V</li><li><span>Color:</span>red; pink; gray; blue; navy blue; black</li><li><span>Weight:</span> 110g / 0.24lb</li><li><span>Size:</span> 80*10cm / 31.49*3.93in</li></ul><p style="font-size: 25px;"><span>PACKAGE INCLUDED</span></p><ul><li>1 × Upgraded Heating Scarf</li></ul><p>Power Bank not included</p></div></div><div class="footer"><div class="left"><p><span>Order</span></p><p>Track My Order</p><p>Shipping Policy</p><p style="margin-bottom: 30px;">Return & Refund Policy</p><p><span>How can we help you?</span></p><div class="btn">Contact Us</div></div><div class="center"><p><span>Resources</span></p><p>About Us</p><p>FAQs</p><p>Payment Methods</p><p>Terms of Service</p><p>Privacy Policy</p></div><div class="right"><div class="btn">sigmakin.com</div><div class="email"><img src="img/email.svg" width="20"><span>support@sigmakin.com</span></div></div></div><div class="info"><div class="left"><p>© 2024 sigmakin.com. All rights reserved.</p></div><div class="right" @click="goTop"><p> Go to top⬆</p></div></div></div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>const { createApp, ref, watch } = VuecreateApp({setup() {const options = ref(['Red', 'Pink', 'Gray', 'Navy Blue', 'Yellow','Brown', 'Beige', 'Black','SET 2(Red+Pink)🔥50% OFF And Extra 10%🔥','SET 2(Gray+Blue)🔥50% OFF And Extra 10%🔥','SET 2(Navy Blue+Yellow)🔥50% OFF And Extra 10%🔥','SET 2(Brown+Beige)🔥50% OFF And Extra 10%🔥','SET 2(Red+Pink+Gray)🔥50% OFF And Extra 10%🔥','SET 2(Blue+Navy Blue+Yellow)🔥50% OFF And Extra 10%🔥','SET 2(Beige+Brown+Gray)🔥50% OFF And Extra 10%🔥'])const optionIndex = ref(0)const count = ref(1)const show = ref(false)function frontImg() {const productBar = document.querySelector('.product-bar')productBar.scrollLeft -= 50;}function nextImg() {const productBar = document.querySelector('.product-bar')productBar.scrollLeft += 50;}function showMeun() {const sidebar = document.querySelector('#sidebar')sidebar.style.left = '0';show.value = true;}function closeMeun() {const sidebar = document.querySelector('#sidebar')sidebar.style.left = '-300px';show.value = false;}watch(optionIndex, newVal => {const productBar = document.querySelector('.product-bar')const image = document.querySelectorAll('.product-image')[newVal]productBar.scrollLeft = image.offsetLeft})function goTop() {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动});}return {options, optionIndex,frontImg, nextImg, count,showMeun, closeMeun, show, goTop}}}).mount('#app')
</script></html>CSS
.logo {height: 200px;display: flex;align-items: center;justify-content: center;
}
.meun-btn {cursor: pointer;width: 20px;height: 20px;position: absolute;top: 80px;left: 50px;background-image: url("img/menu.svg");background-size: 100% 100%;
}
#sidebar {z-index: 1001;margin: 0;height: 100%;width: 250px;position: fixed;left: -300px;background-color: #1b1b1b;color: white;transition: 0.3s;padding: 20px;box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}
#sidebar .content {height: 90%;display: flex;flex-direction: column;justify-content: space-between;
}
#sidebar .content ul {list-style-type: none;padding-left: 20px;
}
#sidebar .content ul li {margin: 30px 0;cursor: pointer;
}
#sidebar .content ul:nth-child(1) {font-size: 20px;
}
#sidebar .content ul:nth-child(2) {font-size: 12px;color: #878787;
}
#sidebar .close-btn {color: white;font-size: 30px;cursor: pointer;width: 15px;margin-left: 20px;margin-top: 20px;
}
.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 1000;
}
.content {display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 50px;
}
.content .left {width: 30%;min-width: 400px;margin-right: 20px;
}
.content .left .img {background-size: 100% 100%;height: 450px;border-radius: 10px;
}
.content .left .img-bar {display: flex;margin-top: 10px;
}
.content .left .img-bar .front,
.content .left .img-bar .next {width: 20px;height: 80px;display: flex;align-items: center;cursor: pointer;
}
.content .left .img-bar .product-bar {scroll-behavior: smooth;margin: 0 10px;height: 100px;width: 90%;overflow-x: hidden;white-space: nowrap;overflow-y: hidden;position: relative;
}
.content .left .img-bar .product-bar .product-image {cursor: pointer;display: inline-block;height: 80px;width: 80px;margin-right: 10px;
}
.content .left .img-bar .product-bar .product-image img {width: 100%;height: 100%;
}
.content .right {width: 30%;min-width: 300px;
}
.content .right .price .old {text-decoration: line-through;color: #717171;
}
.content .right .price .new {color: #008000;font-size: 20px;
}
.content .right .text p:nth-child(1) {font-size: 20px;margin-bottom: 0;
}
.content .right .text p:nth-child(2) {font-size: 18px;font-style: italic;margin: 5px 0;
}
.content .right .text p:nth-child(2) span {color: red;font-size: 20px;font-weight: bold;
}
.content .right .text p:nth-child(3) {font-size: 15px;
}
.content .right .text p:nth-child(3) span {font-size: 20px;font-weight: bold;
}
.content .right .bar {border-radius: 10px;height: 10px;background-color: #efefef;
}
.content .right .bar .value {width: 80px;border-radius: 10px;height: 10px;background-color: #cccccc;
}
.content .right .timer {color: #df4848;font-size: 25px;
}
.content .right h4 {margin: 0;
}
.content .right .options {display: flex;flex-wrap: wrap;
}
.content .right .options .item {cursor: pointer;margin: 5px;line-height: 30px;padding: 5px 8px;width: max-content;border: 1px solid #cccccc;border-radius: 5px;font-size: 13px;
}
.content .right .options .active {background-color: #ec7526;color: white;
}
.content .right .pay {margin-top: 50px;
}
.content .right .pay .top {display: flex;flex-wrap: wrap;
}
.content .right .pay .top .count {margin: 10px 0;border: 1px solid #cccccc;width: 90px;height: 50px;display: flex;justify-content: space-around;align-items: center;background-color: white;
}
.content .right .pay .top .count input {text-align: center;width: 30px;height: 30px;border-width: 0;font-size: 15px;
}
.content .right .pay .top .count span {cursor: pointer;
}
.content .right .pay .top .block {margin: 10px 5px;cursor: pointer;width: 150px;height: 50px;border-radius: 5px;display: flex;justify-content: center;align-items: center;color: white;
}
.content .right .pay .top .block img {margin-right: 20px;
}
.content .right .pay .top .cart {background-color: black;
}
.content .right .pay .top .now {background-color: #ff4343;
}
.content .right .pay .center {cursor: pointer;border-radius: 5px;margin: 10px 0;height: 50px;background-color: #ffc439;display: flex;justify-content: center;align-items: center;
}
.content .right .pay .center:hover {background-color: #f2ba36;
}
.description {padding-top: 80px;padding-bottom: 50px;display: flex;flex-wrap: wrap;justify-content: center;
}
.description .left {width: 30%;font-size: 30px;font-weight: bold;text-align: center;
}
.description .right {width: 40%;
}
.description .right ul {padding: 0;
}
.description .right ul li {line-height: 30px;margin-bottom: 20px;font-size: 15px;
}
.description .right span {font-weight: bold;
}
.footer {margin: 0;height: 300px;background-color: #242424;display: flex;flex-wrap: wrap;justify-content: center;padding-top: 40px;
}
.footer p {color: #929292;font-size: 12px;
}
.footer span {color: white;font-size: 15px;
}
.footer .left {width: 20%;
}
.footer .left .btn {text-align: center;line-height: 40px;border-radius: 5px;color: white;width: 120px;height: 40px;background-color: #ff4343;
}
.footer .center {width: 20%;
}
.footer .right {width: 30%;
}
.footer .right .btn {cursor: pointer;margin: 20px 0px;padding-left: 10px;width: 300px;height: 60px;color: white;font-size: 30px;font-weight: bold;line-height: 60px;
}
.footer .right .btn:hover {background-color: white;color: #485fc7;
}
.footer .right .email {display: flex;align-items: center;
}
.footer .right .email img {margin-right: 20px;
}
.info {border-top: 1px solid #333;background-color: #242424;height: 60px;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;
}
.info p {color: #929292;font-size: 12px;cursor: pointer;
}
@media screen and (max-width: 730px) {.logo {padding-left: 10px;height: 100px;justify-content: left;}.logo img {width: 60px;}.meun-btn {left: auto;right: 30px;top: 50px;}.content .left,.content .right {width: 95%;}.content .left .pay .top .count,.content .right .pay .top .count,.content .left .pay .top .block,.content .right .pay .top .block {width: 100%;}.description .left {display: none;}.description .right {width: 95%;}.description .right ul {padding-left: 20px;}.footer {height: auto;padding-bottom: 50px;padding-left: 30px;}.footer .left,.footer .center,.footer .right {width: 95%;}.info {height: 200px;flex-direction: column;}
}
效果图
相关文章：
HTML+CSS+Vue3的静态网页，免费开源，可当作作业使用
拿走请吱一声，点个关注吧，代码如下，网页有移动端适配 HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width…...
昇思25天学习打卡营第33天|共赴算力时代
文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台，就像是AI学习者和开发者的超级基地，这里不仅提供丰富的项目、模型和大模型体验，还有一大堆经典数据集任你挑。…...
IAR环境下STM32静态库编译及使用
IAR环境下STM32静态库编译及使用 前言 最近了解到了STM32的静态库与动态库，在此记录一下STM32静态库的生成与使用。 静态库的作用主要是对代码进行封装及保护，使其他使用者只知其然而不知其所以然，因为封装后的静态库只有.h文件没有.c文件。…...
前端如何性能优化
前端性能优化是提高网页加载速度和响应速度的重要手段。优化前端性能不仅能提升用户体验，还能提高SEO排名，降低服务器负担，节省带宽等。下面是一些常见的前端性能优化方法： 1. 减少 HTTP 请求 每个页面资源（如图片、…...
【开源】为Stable Diffusion工作流程提供的一个更加灵活易用的Web界面
一个开源项目，旨在为Stable Diffusion工作流程提供一个更加灵活、易用的Web界面。这个项目特别适用于图像生成和编辑，具有以下几个显著特点： 分层和非破坏性编辑：OpenDream支持非破坏性编辑，允许用户在保留原始图像数据…...
安全见闻（1）
Target 开阔见闻，不做井底之蛙 Trial 建议 前期小白到中级红队：把python学好 C\C：偏向底层，适合逆向，不适合前期web渗透 编程语言 C语言: 一种通用的、面向过程的编程语言，广泛应用于系统软件和嵌入…...
基于32单片机的RS485综合土壤传感器检测土壤PH、氮磷钾的使用（超详细）
1-3为RS485综合土壤传感器的基本内容 4-5为基于STM32F103C8T6单片机使用RS485传感器检测土壤PH、氮磷钾并显示在OLED显示屏的相关配置内容 注意：本篇文件讲解使用的是PH、氮磷钾四合一RS485综合土壤传感器，但里面的讲解内容适配市面上的所有多合一的RS…...
SQL server学习03-创建和管理数据表
目录 一，SQL server的数据类型 1，基本数据类型 2，自定义数据类型 二，使用T-SQL创建表 1，数据完整性的分类 2，约束的类型 3，创建表时创建约束 4，任务 5，由任务编写…...
Windows 系统下 Python 环境安装
一、引言 Python 作为一种广泛应用的编程语言，在数据分析、人工智能等领域发挥着重要作用。本文将详细介绍在 Windows 系统上安装 Python 环境的步骤。 二、安装前准备 系统要求 Windows 7 及以上版本一般都能支持 Python。硬件方面，通常 2GB 内存、几…...
Redis 在Go项目中的集成和统一管理
本节我们在项目中安装和集成 go-redis，让项目能访问Redis，后面实战项目中的用户认证体系会依赖Redis来实现，像Token、Session这些都是在Redis中存储的。 本节大纲如下： Redis的使用场景有不少，不过有一点需要提醒的…...
Hive——HQL数据定义语言
文章目录 Hive HQL数据查询语言更多大数据资源持续更新中。。。学习目标一、HQL数据定义语言（DDL）概述1、DDL语法的作用2、Hive中DDL使用☆ 创建数据库☆ 查询数据库☆ 切换数据库☆ 修改数据库☆ 删除数据库 二、Hive DDL建表基础1、完整建表语法树2、H…...
Python机器视觉的学习
一、二值化 1.1 二值化图 二值化图：就是将图像中的像素改成只有两种值，其操作的图像必须是灰度图。 1.2 阈值法 阈值法（Thresholding）是一种图像分割技术，旨在根据像素的灰度值或颜色值将图像分成不同的区域。该方法…...
使用navicat新旧版本，连接PostgreSQL高版本报错问题图文解决办法
使用navicat新旧版本，连接PostgreSQL高版本报错问题图文解决办法 一、问题现象：二、出现原因三、解决方法：1、升级Navicat版本：2、使用低版本的postgreSQL：3、修改Navicat的dll二进制文件：navicat版本15nav…...
秒杀抢购场景下实战JVM级别锁与分布式锁
背景历史 在电商系统中，秒杀抢购活动是一种常见的营销手段。它通过设定极低的价格和有限的商品数量，吸引大量用户在特定时间点抢购，从而迅速增加销量、提升品牌曝光度和用户活跃度。然而，这种活动也对系统的性能和稳定性提出了极…...
【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数（四）
目录 ARC规则 规则 对象型变量不能作为C语言结构体的成员 显式转换id和void* 属性 数组 ARC规则 规则 在ARC有效的情况下编译源代码必须遵守一定的规则： 主要解释一下最后两条 对象型变量不能作为C语言结构体的成员 要把对象型变量加入到结构体成员中时&a…...
Reactor 响应式编程（第一篇：Reactor核心）
系列文章目录 Reactor 响应式编程（第一篇：Reactor核心） Reactor 响应式编程（第二篇：Spring Webflux） Reactor 响应式编程（第三篇：R2DBC） Reactor 响应式编程（…...
数据挖掘之聚类分析
聚类分析（Clustering Analysis） 是数据挖掘中的一项重要技术，旨在根据对象间的相似性或差异性，将对象分为若干组（簇）。同一簇内的对象相似性较高，而不同簇间的对象差异性较大。聚类分析广泛应用…...
修改uniapp下拉刷新圆圈颜色
直接看图 修改前就是常规的绿色 自定义更符合我们的软件 直接说方法 修改 在App.vue的style样式里添加一行 .uni-page-refresh--refreshing .uni-page-refresh__path{stroke:#FF2442; }我是通过 不执行 uni.stopPullDownRefresh(); 下拉刷新 之后通过F12看出来的 希望可以帮…...
SparkSQL与Hive的整合
文章目录 SparkSQL与Hive的整合1.1. Spark On Hive1.1.1. Hive的准备工作1.1.2. Spark的准备工作1.1.3. Spark代码开发1.1.4. Spark On Hive案例 1.2. Hive On Spark1.3. SparkSQL命令行1.4. SparkSQL分布式查询引擎1.4.1. 开启ThriftServer服务1.4.2. beeline连接ThriftServer…...
电子科技大学考研，计算机与软件专业怎么选择？
电子科技大学在计算机与软件领域具备卓越实力，其毕业生就业前景及薪资水平均颇为可观。因此，学生应依据个人课程专长来选定专业。若各项课程均表现出色，推荐25届考生优先考虑软件专业，因其上岸难度相对较低。 接下来，C…...
MSF（Metasploit Framework）
渗透测试中MSF是一个非常强大的工具，可以用来验证系统漏洞、执行攻击以及开发自定义的漏洞利用代码。以下是使用MSF进行渗透测试的基本步骤： 1.启动MSF 启动MSF控制台。 msfconsole2. 搜索漏洞 在MSF中搜索已知漏洞。 search <vulnerability nam…...
@SpringBootTest 报错: UnsatisfiedDependencyException
Spring Boot Test 报错: UnsatisfiedDependencyException 在使用 SpringBootTest 测试时，出现 UnsatisfiedDependencyException 报错，原因和解决方法如下。 报错原因分析 1. Spring 存在涉及 Bean 没有被添加 Spring Boot 测试中，默认会加…...
QT数据库操作详解
在Qt中，操作数据库通常使用Qt SQL模块，该模块提供了一组类来与数据库进行交互。 数据库连接与查询执行 QSqlDatabase::addDatabase(): 添加一个数据库连接。 QSqlDatabase::open(): 打开数据库连接。 QSqlDatabase::close(): 关闭数据库连接。 QSql…...
Coding Caprice - dynamic programming13
647. 回文子串 class Solution { public:int countSubstrings(string s) {int s_len s.size();vector<int> dp{0};int out(1);for(int i1; i<s_len; i){out;vector<int> dq{i};if(s[i]s[i-1]){dq.push_back(i-1);out;}for(int j:dp){if(j>0&&s[j-1…...
Fastapi教程：使用 aioredis 连接池执行Redis 的高效异步操作
在构建高性能的 Web 应用时，缓存系统是一个至关重要的组成部分。Redis 是最常见的缓存系统之一，它提供了高效的存储与读取机制。然而，在与 Redis 进行频繁交互时，创建和销毁连接可能会成为瓶颈。为了优化这一问题，我们…...
Elasticsearch对象映射
Spring Data Elasticsearch对象映射是将Java对象（域实体）映射到存储在Elasticsearchs中的JSON表示形式并返回的过程。内部用于此映射的类是MappingElasticsearchConverter。 元模型对象映射 基于元模型的方法使用域类型信息对Elasticsearch进行读写操作…...
解决Logitech G hub 无法进入一直转圈的方案（2024.12）
如果你不是最新版本无法加载尝试以下方案：删除AppData 文件夹下的logihub文件夹 具体路径：用户名根据实际你的请情况修改 C:\Users\Administrator\AppData\Local 如果你有通过lua编译脚本，记得备份！！ ↓如果你是最新…...
Debezium SchemaNameAdjuster 分析
Debezium SchemaNameAdjuster 分析 目录 1. 概述2. 核心功能3. 实现原理4. 应用场景5. 扩展示例6. 总结1. 概述 SchemaNameAdjuster 是 Debezium 中的一个工具类，主要用于确保 Schema 名称符合 Avro 命名规范。在数据库变更事件被转换为 Kafka 消息时，需要为每个表和字段创…...
聊一下前端常见的图片格式
1. JPEG (JPG) 概述：是一种有损压缩的图像格式，它通过去除图像中一些人类视觉不易察觉的细节来减小文件大小。它支持数百万种颜色，能够很好地呈现照片等色彩丰富的图像内容。优点： 压缩率高：可以在保持相对较好的图像…...
npm : 无法加载文件 D:\nodejs\npm.ps1
问题描述 npm run serve 启动一个Vue项目，报错如下： npm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/? LinkID135170 中的 about_Execution_Policies。…...
如何使用 Python 实现 TCP / IP 客户端和服务端通信？
如何使用Python实现TCP/IP客户端和服务端通信？ 1. TCP/IP通信基础 TCP/IP（传输控制协议/互联网协议）是互联网的基础协议，用于在网络中的计算机之间进行可靠的数据传输。在Python中，可以使用socket模块来实现TCP/IP通…...
IDEA 可视化使用 git rebase 合并分支步骤 使git分支树保持整洁
模拟环境 dev 分支开发完一个功能，需要合并到 master 分支，如果现在直接 merge 合并的话 git分支树会出现杂乱分叉，先把 master 分支 rebase 到 dev git分支树就会是整洁的一条直线 git rebase介绍 rebase:翻译成中文是重新设定，…...
【指南】03 CSC联系外导
确定外导 课题组有合作关系的国外导师与自己研究方向密切相关的国外导师国外高校官网、谷歌学术、Research Gate等平台检索不可以是中国港澳台的高校科研院所或机构注意外导所在高校排名和科研水平可列表记录注意外国签证政策 发送邮件 自我介绍简要介绍CSC介绍自己的研究对…...
axios请求拦截器和响应拦截器，封装naive-ui的 Loading Bar加载条和useMessage消息提示
接之前的博客设计从0开始边做边学，用vue和python做一个博客，非规范化项目，怎么简单怎么弄，跑的起来有啥毛病解决啥毛病（三），目前已经完成了基本的功能demo，但是请求接口不可能每个页…...
联网功耗电流波形
飞行模式下，Wifi 可连接或不可连接的条件对比： 1. 基电流为 3.5 mA 的环境下, 网络不可连接时,会产生一个持续0.72s,平均电流为 54.8 mA 的电流波形 2. 基电流为 6.8 mA 的环境下, 网络可连接时,会产生一个持续4.64s,平均电流为 73.63 mA 的电流波形 …...
Unity 模板测试透视效果（URP）
可以实现笼中窥梦和PicoVR中通过VST局部透视效果。 使用到的Shader: Shader "Unlit/StencilShader" {Properties{[IntRange]_Index("Stencil Index",Range(0,255))0}SubShader{Tags{"RenderType""Opaque""Queue""Geo…...
C 语言动态爱心代码
C 语言动态爱心代码 代码 #include <stdio.h> #include <math.h> #include <windows.h> #include <tchar.h> float f(float x, float y, float z) {float a x * x 9.0f / 4.0f * y * y z * z - 1;return a * a * a - x * x * z * z * z - 9.0f / …...
Linux服务器磁盘满了，清理步骤命令
Linux服务器磁盘满了，磁盘空间不足，清理步骤 1. 检查磁盘使用情况 了解哪些文件和目录占用了大量空间。 使用 df -h查看所有分区的总体使用情况。 使用 du -sh /directory/* | sort -rh | head -n 10 查找特定目录下占用空间最大的前10个子目录或文件。…...
)
CTFshow-命令执行(Web41-57)
CTFshow-命令执行(Web41-57) CTFWeb-命令执行漏洞过滤的绕过姿势_绕过空格过滤-CSDN博客 总结rce（远程代码执行各种sao姿势）绕过bypass_远程命令执行绕过-CSDN博客 对比两者的源代码，我们发现，cat指令把flag.php的内容导出后依…...
Batch Norm vs Layer Norm：为什么 Transformer 更适合用 Layer Norm？
Batch Norm vs Layer Norm：为什么 Transformer 更适合用 Layer Norm？ 1. Batch Norm 和 Layer Norm 的定义与作用 1.1 Batch Normalization (BN) Batch Norm 是一种归一化方法，主要用于加速深层神经网络的训练。它在每个小批量（b…...
jQuery Mobile页面事件
jQuery Mobile页面事件 jQuery Mobile是一个基于jQuery的移动设备友好的Web应用框架，它提供了一套丰富的页面事件，这些事件在移动应用的交互设计中扮演着重要的角色。本文将详细介绍jQuery Mobile中的页面事件，包括它们的触发时机、用途以及如何使用它们来增强移动应用的交…...
接口测试Day01-HTTP请求
概念 接口：系统之间（外部系统与内部系统，内部系统与内部系统）数据交通的通道。 接口测试：校验 接口回发的 响应数据 与 预期结果 是否一致。 接口测试，可以绕过前端界面。直接对 服务器进行测试！…...
使用枚举实现单例模式，不会反序列化破坏攻击，不会被反射破坏攻击。（附带枚举单例的简单实现）
原因分析 1.反序列化方法 ① jdk8中的Enum源码中对反序列化方法进行重写，抛出异常。 java.lang.Enum#readObject方法截图如下 ②java.io.ObjectInputStream#readObject 方法中的 readEnum 方法处理了枚举类型的反序列化，从而确保了枚举的单例特性。 …...
又细又长的马尾：tail
英语里边有一个单词 tail，意为“尾巴”，这应当是众所周知的事情了。 不过，tail 这条尾巴，并不简单，因为它还是一个词根，也就是说 tail 其实是自由词素。 事实上，tail 最初来自 马尾 这样一个概…...
记录：VB6 直接获取 PictureBox 的图像数据到数组 GetDIBits
记得十几年前写几个游戏辅助工具的时候用过这个功能，这几天想直接把图片控件的数据转换为 PNG 文件不想用存出 BMP 文件交换，直接取得图像数据操作即可，但是忘记了当初是怎么做的了，找到个 2007 年的例子好像不太对，运…...
uboot移植网络驱动过程，无法ping通mx6ull和ubuntu问题解决方案
开发板：mx6ull-ALPHA_V2.4 ubuntu版本：20.04 1.现在虚拟机设置中添加网路适配器用于开启桥接模式 2.在编辑中打开“虚拟网络编辑器” 我的电脑本身只有VMnet1和VMnet8，需要底下“添加网络”，增加这个VMnet0 ，并且进行…...
Ubuntu 安装软件被锁：Could not get lock问题解决
今天刚使用虚拟机安装完Ubuntu系统，想要安装所需要的软件是出现了以下错误信息： 错误信息： E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable) E: Unable to lock the administration directory (/…...
S2CRNet 图像测评笔记 图像融合
空间分离曲线渲染网络用于高效高分辨率图像协调 开源地址： https://github.com/stefanLeong/S2CRNet 效果图： 左边是输入，最右边是效果：效果不是很理想，色差问题还在 本地代码： S2CRNet-demos-main...
Lambda表达式
C Lambda表达式 文章目录 C Lambda表达式基本用法捕获列表返回值mutable Lambda 表达式是一种匿名函数，可以在代码中直接定义并使用。它主要用于简化那些只需要简单操作的函数定义。在 C 中，lambda 表达式的语法结构通常包括以下几个部分： 捕…...
高通 Android12 添加APN信息
1、产品有国外客户，需要添加国外的定制APN信息。 2、路径： SC200E_AP/QCM2290_Android12.0_R02_r004/QSSI.12/vendor/qcom/proprietary/commonsys/telephony-apps/etc/apns-conf.xml在上述路径中将APN信息添加即可。 3、路径 SC200E_AP\QCM2290_Andr…...