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…...
【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（8）
1.问题描述： 在AGC中，推送服务的消息回执新建成功后，有一个有效期 1，这个有效期是什么意思，过期后，会影响什么呢？ 2，这个有效期是否可以修改成一直不过期？ 解决方案&…...
HCIA-Access V2.5_2_2_2网络通信基础_IP编址与路由
网络层数据封装 首先IP地址封装在网络层，它用于标识一台网络设备，其中IP地址分为两个部分，网络地址和主机地址，通过我们采用点分十进制的形式进行表示。 IP地址分类 对IP地址而言，它细分为五类，A,B,C,D,E,…...
音频客观测评方法PESQ
一、简介 语音质量感知评估（Perceptual Evaluation of Speech Quality）是一系列的标准，包括一种用于自动评估电话系统用户所体验到的语音质量的测试方法。该标准于2001年被确定为ITU-T P.862建议书[1]。PESQ被电话制造商、网络设备供应商和电…...
前后端分离的项目使用nginx 解决 Invalid CORS request
我是这样打算的，前端用nginx代理，使用80 转443 端口走https 前端的地址就是http://yumbo.top 或https://yumbo.top 后端服务地址是：http://yumbo.top:8081 下面是我的完整配置，功能是正常的，加了注释 user nginx; …...
回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测
回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测 目录 回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测基本介绍程序设计基本介绍 SVM-Adaboost集成学习是一种将支持向量机（SVM）与AdaBoost算法相结合的集成学习…...
 - 堆排序与堆操作)
常见排序算法总结 (五) - 堆排序与堆操作
堆排序（借助 API） 算法思想 利用堆能够维护数组中最大值的性质，根据数组元素建立最大堆，依次弹出元素并维护堆结构，直到堆为空。 稳定性分析 堆排序是不稳定的，因为堆本质上是完全二叉树，排…...
kubernetes的三种探针ReadinessProbe、LivenessProbe和StartupProbe,以及使用示例
前言 k8s中的Pod由容器组成，容器运行的时候可能因为意外情况挂掉。为了保证服务的稳定性，在容器出现问题后能进行重启，k8s提供了3种探针 k8s的三种探针 为了探测容器状态，k8s提供了两个探针: LivenessProbe和ReadinessProbe L…...
掌握线性回归：从简单模型到多项式模型的综合指南
目录 一、说明 二、简单线性回归 三、线性回归的评估指标 3.1 线性回归中的假设 四、从头开始的简单线性回归代码 五、多元线性回归 六、多元线性回归代码 七、多项式线性回归 八、多项式线性回归代码 九、应用单变量多项式回归 十、改变多项式的次数 十一、多列多项式回归 一、…...
Java：183 基于SSM的高校食堂系统
项目介绍 基于SSM的食堂点餐系统 角色:管理员、用户、食堂 前台用户可以实现商品浏览，加入购物车，加入收藏，预定，选座，个人信息管理，收货信息管理，收藏管理，评论功能，…...
光谱相机
光谱相机是一种能够同时获取目标物体的空间图像信息和光谱信息的成像设备。 1、工作原理 光谱相机通过光学系统将目标物体的光聚焦到探测器上，在探测器前设置分光元件，如光栅、棱镜或滤光片等，将光按不同波长分解成多个光谱通道，…...
AI绘图：开源Stable Diffusion 3 ComfyUI下载安装方法
AI绘图：开源Stable Diffusion 3 ComfyUI下载安装方法 安装好后软件运行效果： 第一步：安装ComfyUI的最新版本 1、请从下面的地址下载压缩包，并解压缩到硬盘 https://github.com/comfyanonymous/ComfyUI/releases/download/late…...
一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测
一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测 目录 一区向量加权算法优化INFO-CNN-SVM卷积神经网络结合支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现INFO-CNN-SVM向量加权算法优化卷积神经网络结…...
AES笔记整理
文章目录 1. 简介2. 密钥加法层2. 字节代换层3. 行位移 - ShiftRows4. 列混淆 - MixColumn5. 其他5.1列混淆矩阵乘法运算5.2 AES密钥生成 6. 参考资料 以下内容为信息安全开发过程中，AES对称加密算法的笔记，大部分内容转载其他文章，若描述不清…...
Jmeter 性能压测-Tomcat连接数
1、影响性能的线程状态 ①BLOCKED，如果线程中有BLOCKED，就代表有阻塞情况，需要进行排查 ②TIMED_WAITING，如果线程中有TIMED_WAITING，就代表有等待的情况，要分情况来排查 系统线程在等待（如果…...
基于Vue3的组件封装技巧分享
1、需求说明 需求背景：日常开发中，我们经常会使用一些UI组件库诸如and design vue、element plus等辅助开发，提升效率。有时我们需要进行个性化封装，以满足在项目中大量使用的需求。 错误示范：基于a-modal封装一个自定…...
python中r代表什么意思
r在python中表示什么意思？ “r”是“raw”的简写。去查单词，意思是“未加工的，原料”。因此，不难想象，在python字符串前面，表示“按原样输出字符串”，也就是说字符串里的元素，原来什…...
《量子计算对人工智能发展的深远影响》
在科技发展的浪潮中，量子计算与人工智能无疑是两颗璀璨的明星，二者的融合正引领着一场深刻的科技变革. 量子计算的独特之处在于其利用量子比特的叠加和纠缠特性，能够实现并行计算，从而在处理复杂问题时展现出超越传统计算的巨大潜…...
12.2【JAVA EXP4]next.js的各种问题，DEBUG，前端补强，前后端交互，springSecurity ,java 配置，h2数据库
在服务器组件中使用了 useState 这样的 React Hook。useState 只能在客户端组件中使用，而不能在服务器组件中使用。Next.js 的新架构（App Router）中，默认情况下，页面和布局组件是服务器组件，因此不能直接使…...
docker启动一个helloworld（公司内网服务器）
这里写目录标题 容易遇到的问题：1、docker连接问题 我来介绍几种启动 Docker Hello World 的方法： 最简单的方式： docker run hello-world这会自动下载并运行官方的 hello-world 镜像。 使用 Nginx 作为 Hello World： docker…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...