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…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...