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…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向
在人工智能技术呈指数级发展的当下，大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性，吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型，成为释放其巨大潜力的关键所在&…...
如何配置一个sql server使得其它用户可以通过excel odbc获取数据
要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据，你需要完成以下配置步骤： ✅ 一、在 SQL Server 端配置（服务器设置） 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到：SQL Server 网络配…...