用HTML写一个简单的静态购物网站

news2024/11/17 11:25:15

实现代码: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物网站</title>
</head>
<body>
  <header>
    <h1>购物网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>精选产品</h2>
      <div class="product">
        <img src="product1.jpg" alt="产品1">
        <h3>产品1</h3>
        <p>商品描述...</p>
        <a href="#" class="btn">添加到购物车</a>
      </div>

      <div class="product">
        <img src="product2.jpg" alt="产品2">
        <h3>产品2</h3>
        <p>商品描述...</p>
        <a href="#" class="btn">添加到购物车</a>
      </div>
    </section>

    <section>
      <h2>购物车</h2>
      <ul id="cart-items">
        <!-- 购物车商品列表 -->
      </ul>
      <p>Total: <span id="total-price">$0.00</span></p>
    </section>
  </main>

  <footer>
    <p>版权所有 &copy; 2023 购物网站</p>
  </footer>
</body>
</html>

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

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

相关文章

如何判断直线导轨的质量?

直线导轨是机械行业中的重要传动零部件&#xff0c;随着科技3.0时代的到来&#xff0c;直线导轨的需求量也在不断的增加&#xff0c;目前市面上直线导轨的品牌有很多&#xff0c;质量也是良莠不济&#xff0c;那么&#xff0c;我们应该怎样才能挑选到质量好的直线导轨呢&#x…

Python - OpenCV实现摄像头人脸识别(亲测版)

要使用Python 3和OpenCV进行摄像头人脸识别&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1.安装OpenCV库 在命令行中输入以下命令&#xff1a; pip install opencv-python2.准备人脸检测器 使用OpenCV的人脸检测器可以检测出图像中的人脸。在Python中&#xff0c;您…

十一章:Weakly-Supervised Semantic Segmentation Network —— 基于深度种子区域增长的弱监督语义分割网络

0.摘要 本文研究了只使用图像级别标签作为监督来学习图像语义分割网络的问题&#xff0c;这是重要的&#xff0c;因为它可以显著减少人工标注的工作量。最近在这个问题上的最新方法首先使用深度分类网络推断出每个对象类的稀疏和有区别的区域&#xff0c;然后使用有区别的区域作…

const int * p,int const *p, int * const p, const int *const p 搞不清楚?

一、废话不多说&#xff0c;直接来结论 变量含义const int *p 指针p可以修改&#xff0c;*p不可修改int const *p 指针p可以修改&#xff0c;*p不可修改int *const p指针p不可以修改&#xff0c;*p可以修改const int * const p指针p不可以修改&#xff0c;*p不可以修改 显…

黑客学习手册(自学网络安全)

一、首先&#xff0c;什么是黑客&#xff1f; 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手&#xff0c;现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术&#xff1f; 其实&#xff0c;网络信息空间安全已经成为海陆空之外的第四大战场&#xff0c;除了国…

MES中的EAP有什么作用?

在现代制造业中&#xff0c;MES&#xff08;Manufacturing Execution System&#xff09;是一个关键的生产管理系统&#xff0c;用于监控、控制和优化制造过程。而EAP&#xff08;Equipment Automation Program&#xff09;作为MES的重要组成部分之一&#xff0c;在生产线上发挥…

DL优化器精简总结 | SGD, Momentum, AdaGrad, Rmsprop, Adam, AdamW

&#x1f525; DL里的优化器相关考点&#xff0c;面试时面试官偶尔会问甚至变态点的会叫代码手撕&#xff0c;笔试选择题只要跟DL相关基本必考。废话不多说&#xff0c;直接上&#xff01; &#x1f604; 当然并不是纯为了面试&#xff0c;只不过说你如果是搞DL的连优化器都说…

性能测试QPS+TPS+事务基础知识分析

本篇文章是性能测试基础篇&#xff0c;主要介绍了性能测试中对QPSTPS事务的基础知识分析&#xff0c;有需要的朋友可以借鉴参考下&#xff0c;希望可以对广大读者有所帮助 事务 就是用户某一步或几步操作的集合。不过&#xff0c;我们要保证它有一个完整意义。比如用户对某一个…

#P1009. [NOIP2016提高组] 玩具小人

题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业。 有一天, 这些玩具小人把小南的眼镜藏了起来。 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外。如下图: 这时 singer 告诉小南一个谜題: “眼镜藏在我左数第 33 个玩具小人的右数第 11 个玩具小人的…

CMU 15-445 -- Database Recovery - 18

CMU 15-445 -- Database Recovery - 18 引言ARIESLog Sequence NumbersNormal ExecutionTransaction CommitTransaction AbortCompensation Log Records Non-fuzzy & fuzzy CheckpointsSlightly Better CheckpointsFuzzy Checkpoints ARIES - Recovery PhasesAnalysis Phas…

第四范式x百胜软件 以生成式AI改造零售软件

7月20日&#xff0c;在百胜软件联合探路者举办的行业数字化转型研学活动上&#xff0c;百胜软件联合第四范式宣布将以「式说」大模型为核心&#xff0c;在软件智能化升级、行业赋能等方面开展深入合作&#xff0c;共同推动大模型在零售行业的创新与应用。 活动上&#xff0c;双…

RK3588 使用OpenCL 遇到坑

资源1:本文章的源代码为:加速中... 资源2:RK3588 Android上应用使用OpenCL,所需的所有so 一:RK3588是否支持OpenCL 通过GPT一通搜索,说不支持。 感觉GPT东西不全可信啊!!! 导致自己一直怀疑RK3588不支持OpenCL使用,为什么呢? 1.通过adb shell 发现里面没有clinfo…

游戏图标有哪些素材模板推荐

游戏图标设计在游戏UI中占有非常重要的地位。例如&#xff0c;当我们看到一个游戏的启动图标时&#xff0c;很容易区分它是哪个游戏。设计游戏图标不仅是一个图形&#xff0c;也是一个标志。 本文将通过各种游戏图标设计素材分享游戏图标的类别和设计游戏图标的思考。 1. 游戏…

滴水逆向三期笔记与作业——02C语言——05 正向基础/05 循环语句

目录 一、缓冲区溢出的HelloWorld二、永不停止的HelloWorld三、基础知识3.1 变量的声明3.2 类型转换&#xff08;一般用于小转大&#xff09;3.3 表达式3.4 语句和程序块3.5 参数与返回值3.6 关系运算符3.7 逻辑运算符&#xff1a;&& || !3.8 单目运算符3.9 三目运算符…

人工智能TensorFlow MNIST手写数字识别——实战篇

上期文章TensorFlow手写数字-训练篇,我们训练了我们的神经网络,本期使用上次训练的模型,来识别手写数字(本期构建TensorFlow神经网络代码为上期文章分享代码) http://scs.ryerson.ca/~aharley/vis/conv/ 0、插入第三方库 from PIL import Image# 处理图片 import tensorf…

Python补充笔记5-模块化、文件

目录 一、模块 二、模块的导入 三、python中的包​编辑 四、常用的内容模块 五、第三方模块的安装与使用 六、编码格式的介绍 七、文件读写的原理 八、常用的文件打开模式 ​九、文件对象的常用方法 十、with语句​编辑 十一、os模块的常用函数 十二、os.path模块的常用方法​编…

防御第四次作业

一、结合以下问题对当天内容进行总结 1. 什么是IDS&#xff1f; IDS是&#xff1a;入侵检测系统&#xff08;intrusion detection system&#xff0c;简称“IDS”&#xff09;是一种对网络传输进行即时监视&#xff0c;在发现可疑传输时发出警报或者采取主动反应措施的网络安全…

跨平台力量:探索C++Qt框架的未来前景

卓越的跨平台支持&#xff1a;CQt可以在多个平台上运行&#xff0c;包括Windows、Mac、Linux、Android和iOS等。这使得开发者能够使用同一份代码构建跨平台的应用程序&#xff0c;从而显著降低了开发成本和时间投入。 丰富的类库和工具&#xff1a;CQt提供了广泛的类库和工具&…

上位机编程 VS 嵌入式编程:哪个更有前途?揭秘行业发展秘密

上位机和嵌入式是计算机的两个具体应用领域&#xff0c;它们在语言、工具和应用方面存在一定的差异。上位机更加注重高层逻辑和抽象&#xff0c;提供了多种语言和工具供开发者选择。而嵌入式开发通常局限于使用C语言&#xff0c;并且在过去甚至需要使用汇编语言&#xff0c;开发…

QT Http协议

文章目录 前言一、HTTP概述二、HTTP的两种模型1.B/S模型2.C/S模型 三、请求报文和响应报文三、调试软件Postman四、QT中的HTTP类总结 前言 本篇文章来给大家讲解QT中的Http协议&#xff0c;Http协议主要用于网络中数据的请求和响应&#xff0c;那么这篇文章将给大家讲解一下这…