HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="mainHeader"><img src="./images/logo.png" alt="" class="logo"><div class="mainSearch"><form action=""><input type="text" placeholder="请输入要搜索的零食"><button>搜索</button></form></div></div><div class="mainNav"><ul><li><a href="">首页</a></li><li><a href="">点心</a></li><li><a href="">零食</a></li><li><a href="">糖果</a></li><li><a href="">饮料</a></li><li class="last"><a href="">注册登录</a></li></ul></div><div class="mainBanner"><img src="./images/banner.jpg" alt=""></div><div class="mainContent"><div class="mainContentTitle"><div class="left">热门食品</div></div><div class="mainContentList"><div class="mainContentOne"><div class="mainContentOneImg"><img src="./images/ls_1.png" alt=""></div><div class="mainContentOneName">张君雅鸡汁拉面条饼</div><div class="mainContentOnePrice">¥7.0</div></div><div class="mainContentOne"><div class="mainContentOneImg"><img src="./images/ls_2.png" alt=""></div><div class="mainContentOneName">可瑞安粒粒蹦脆麦仁</div><div class="mainContentOnePrice">¥9.5</div></div><div class="mainContentOne"><div class="mainContentOneImg"><img src="./images/ls_3.png" alt=""></div><div class="mainContentOneName">海牌海苔1*8</div><div class="mainContentOnePrice">¥9.9</div></div><div class="mainContentOne"><div class="mainContentOneImg"><img src="./images/ls_4.png" alt=""></div><div class="mainContentOneName">张君雅草莓味甜甜圈</div><div class="mainContentOnePrice">¥7.5</div></div><div class="mainContentOne"><div class="mainContentOneImg"><img src="./images/ls_5.png" alt=""></div><div class="mainContentOneName">朱蒂丝巧克力味蛋卷120g</div><div class="mainContentOnePrice">¥16.9</div></div></div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

LeetCode 230.二叉搜索树中第K小的元素

各位看官们&#xff0c;大家好啊&#xff0c;今天这个题我用的方法时间复杂度比较高&#xff0c;但也是便于便于理解的一种方法&#xff0c;大家如果觉得的好的话&#xff0c;就给个免费的赞吧,谢谢大家了^ _ ^ 题目要求如图所示: 题目步骤&#xff1a; 1.我们可以一维数组来接…

使用Unsloth微调Llama3-Chinese-8B-Instruct中文开源大模型

微调Llama3-Chinese-8B-Instruct 微调是指在大规模预训练的基础模型上,使用特定领域或任务数据集进行少量迭代训练,以调整模型参数,提升其在特定任务上的表现。这种方法可以充分利用预训练模型的广泛知识,同时针对特定应用进行优化,达到更精准高效的效果。 Llama-3-Chinese-8B-…

刷题记录(240613)

aliyun0512 1. 小红定义一个数组是好数组&#xff0c;当且仅当所有奇数出现了奇数次&#xff0c;所有偶数出现了偶数次。现在小红拿到了一个数组&#xff0c;她希望取一个该数组的非空子序列(可以不连续)&#xff0c;使得子序列是好数组。你能帮小红求出子序列的方案数吗?由于…

【超详细】使用RedissonClient实现Redis分布式锁

使用RedissonClient实现Redis分布式锁是一个非常简洁和高效的方式。Redisson是一个基于Redis的Java客户端&#xff0c;它提供了许多高级功能&#xff0c;包括分布式锁、分布式集合、分布式映射等&#xff0c;简化了分布式系统中的并发控制。 添加依赖 首先&#xff0c;你需要…

mysql社区版有可以双机吗

MySQL社区版确实支持双机配置&#xff0c;以实现数据的冗余、备份和负载均衡等功能。以下是关于MySQL双机配置的一些关键点和步骤&#xff1a; 1. 双机热备的概念 双机热备是指保持两个数据库的状态自动同步&#xff0c;对任何一个数据库的操作都会自动应用到另一个数据库&am…

【深度学习】stable-diffusion-3,SD3生图体验

stabilityai/stable-diffusion-3-medium 代码地址&#xff1a; https://huggingface.co/stabilityai/stable-diffusion-3-medium 可在这里体验&#xff1a; https://huggingface.co/spaces/ameerazam08/SD-3-Medium-GPU

并查集C++

并查集的原理 并查集&#xff08;Union-Find Set&#xff09;。可以把每个连通分量看成一个集合&#xff0c;该集合包含了连通分量中的所有点。这些点两两连通&#xff08;连通性&#xff09;&#xff0c;而具体的连通方式无关紧要&#xff0c;就好比集合中的元素没有先后顺序之…

git-本地项目与git连接及上传【快速教程】

1. 本地项目新建上传 打开我们的项目&#xff0c;此时项目中是没有 .git 文件的在你的项目文件夹里面【鼠标右击】弹出菜单在【鼠标右击】弹出的菜单中&#xff0c;点击【Git Bash Here】在命令窗口中输入&#xff1a;git init在 Gitee 中 我们刚刚新建的仓库里&#xff0c;去…

【ARM Cache 及 MMU 系列文章 1.3 -- 如何判断 L2 Cache 是否实现?】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 CPU Configuration Register代码实现CPU Configuration Register 在 Armv9 架构中,我们可以通过arm 提供的自定义寄存器IMP_CPUCFR_EL1 来判断当前系统中是否实现了 L2 Cache, 如下所…

四六级翻译考前综合复习

翻译部分 东周时期 the Eastern Zhou Dynasty 南宋末年 the Late Southern Song Dynasty 早期/中期/末期 early/middle/late 3000多年前的中国西周 the Western Zhou Dynasty in/of China over 3,000 years ago 农历八月十五 on the 15th day of lunar Augest …

SpringBoot 实现 阿里云语音通知(SingleCallByTts)

目录 一、准备工作1.开通 阿里云语音服务2.申请企业资质3.创建语音通知模板&#xff0c;审核通过4.调用API接口---SingleCallByTts5.调试API接口---SingleCallByTts 二、代码实现1.导入依赖 com.aliyun:aliyun-java-sdk-dyvmsapi:3.0.22.创建工具类&#xff0c;用于发送语音通知…

我用AI绘画Stable Diffusion 一个月后,竟然能做出惊艳所有人的效果!

大家好&#xff0c;我是设计师阿威 如今要拍摄一组写真&#xff0c;需要服装、道具、灯光、场地、布景、拍摄、后期等过程。整个过程需要统一才能形成好的写真效果。现在有了AI绘图技术&#xff0c;我们可以实现通过AI绘图&#xff0c;只用计算机计算就得到一组接近真实的写真照…

什么是微前端

什么是微前端&#xff1f; 微前端 这个名词&#xff0c;第一次被提出还是在2016年底&#xff0c;那是在 ThoughtWorks Technology Radar。这个概念将微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化&#xff0c;富交互…

vue富文本wangeditor加@人功能(vue2 vue3都可以)

依赖 "wangeditor/editor": "^5.1.23", "wangeditor/editor-for-vue": "^5.1.12", "wangeditor/plugin-mention": "^1.0.0",RichEditor.vue <template><div style"border: 1px solid #ccc; posit…

重温react-04

兄弟组件之间通信 兄弟1 import React, { Component } from react import pubsub from ./pubsub export default class learnReact01 extends Component {render() {return (<div>我是兄弟1<button onClick{this.clickMessage}>向兄弟2发信息</button><…

Stable-Baseline3 x SwanLab:可视化强化学习训练

Stable Baselines3 (SB3) 是一个强化学习的开源库&#xff0c;基于 PyTorch 框架构建。它是 Stable Baselines 项目的继任者&#xff0c;旨在提供一组可靠且经过良好测试的RL算法实现&#xff0c;便于研究和应用。StableBaseline3主要被应用于机器人控制、游戏AI、自动驾驶、金…

Django DetailView视图

Django的DetailView是一个用于显示单个对象详情的视图。下面是一个使用DetailView来显示单个书籍详情的例子。 1&#xff0c;添加视图 Test/app3/views.py from django.shortcuts import render# Create your views here. from django.views.generic import ListView from .m…

BGP学习

BGP是一种矢量协议&#xff0c;使用TCP作为传输协议 ,目的端口号是179.是触发式更新&#xff0c;不是周期性更新 BGP的重点是策略路由的选路&#xff0c;能对路由进行路由汇总。运行BGP的路由器被称为BGP发言者&#xff0c;两个建立BGP会话的路由器互为对等体 IBGP和EBGP的区…

代理模式(设计模式)

文章目录 静态代理动态代理代理模式的应用场景动态代理和静态代理的区别 代理模式就是给一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用。它使得客户不能直接与真正的目标对象通信。代理对象是目标对象的代表&#xff0c;其他需要与这个目标对象打交道的操作…

STM32项目分享:OV7670将图片上传电脑

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板及元器件图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…