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

news2025/2/22 1:19:58

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1825648.html

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

相关文章

模型 WOOP

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。不再拖延和懒惰&#xff0c;让梦想照进现实。 1 WOOP模型的应用 1.1 WOOP模型提高自己健身习惯 如果你想要养成健身的习惯&#xff0c;那么使用WOOP模型来提高自己健身习惯&#xf…

【菜狗学前端】uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能

记录&#xff0c;避免之后忘记...... 一、目的&#xff1a;实现左右联动 右->左 滚动&#xff08;上拉/下拉&#xff09;右侧&#xff0c;左侧对应品类选中左->右 点击左侧品类&#xff0c;右侧显示对应品类 二、实现右->左 滚动&#xff08;上拉/下拉&#xff09;右…

awtk如何实现键盘和输入框

1.创建默认键盘 新建窗体-keyboard 2.新建编辑框 3.设置编辑框属性 4.点击编辑框即可打开默认键盘&#xff0c;若想修改键盘样式可以在默认键盘修改或自定义键盘 5.获取输入字符 widget_t* wifi_edit widget_lookup(win, "edit", TRUE);//获取单行编辑控件 widge…

HAL库开发--串口

知不足而奋进 望远山而前行 目录 文章目录 前言 学习目标 学习内容 开发流程 串口功能配置 串口功能开启 串口中断配置 串口参数配置 查询配置结果 发送功能测试 中断接收功能测试 printf配置 DMA收发 配置 DMA发送 DMA接收(方式1) DMA接收(方式2) 总结 前言…

SpringBoot+Maven项目的配置构建

文章目录 1、application.properties2、pom.xml 1、application.properties 也可使用yml yaml #静态资源 spring.mvc.static-path-pattern/images/** #上传文件大小设置 spring.http.multipart.max-file-size10MB spring.http.multipart.max-request-size10MBspring.mvc.path…

ubuntu vnc

如何在Ubuntu 18.04安装VNC | myfreax sudo apt install xfce4 xfce4-goodies xorg dbus-x11 x11-xserver-utils sudo apt install tigervnc-standalone-server tigervnc-common vncserver sudo apt install xfce4 xfce4-goodies xorg dbus-x11 x11-xserver-utils sudo apt ins…

统计信号处理基础 习题解答10-15

题目 对随机变量的随机性的一个度量是它的熵&#xff08;entropy&#xff09;&#xff0c;熵定义为&#xff1a; 如果&#xff0c;求这个熵&#xff0c;并说明它与PDF集中度的关系。观察到数据后&#xff0c;后验PDF的熵可以确定为&#xff1a; 且它应该比小。因此&#xff0c…

如何用Dokan在WooCommerce上创建多用户商城系统和多供应商市场

由于客户行为的变化以及技术的进步&#xff0c;在线业务如今变得越来越受欢迎。顾客现在可以在家中购物&#xff0c;因为这将节省大量时间并扩大他们的选择。这有助于促进所有在线商店场景的发展&#xff0c;包括多供应商市场。 如果您正在寻求如何在WooCommerce商城上创建多供…

基于CentOS Stream 9平台安装MySQL8.4.0 LTS

1. 安装之前 1.1 查看系统版本 [rootcoisini /]# cat /etc/redhat-release CentOS Stream release 9 1.2 查看cpu架构 [rootcoisini /]# lscpu 架构&#xff1a; x86_64 CPU 运行模式&#xff1a; 32-bit, 64-bit 2. MySQL官方下载https://dev.mysql.com/downloads/mysql/ 或…

勒索病毒剖析

2016年不自己勒索了 卖病毒 让别人勒索 傻瓜式勒索 黑客用的是非对称加密 全世界只有黑客有那把私钥 反向解密不了 传统爆破容易被检测&#xff0c;黑客慢速爆破&#xff0c;利用超级多的僵尸进行试错&#xff0c;慢慢试出来账号密码 因为一般运维设备在防火墙的白名单里&…

FullCalendar日历组件集成实战(14)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

刷题训练之链表

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握链表算法。 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题训…

设计模式-享元模式Flyweight(结构型)

享元模式(Flyweight) 享元模式是一种结构型模式&#xff0c;它主要用于减少创建对象的数量&#xff0c;减少内存占用。通过重用现有对象的方式&#xff0c;如果未找到匹配对象则新建对象。线程池、数据库连接池、常量池等池化的思想就是享元模式的一种应用。 图解 角色 享元工…

【C++提高编程-05】----C++之Deque容器实战

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

【字符串函数】

1.strlen的使⽤和模拟实现 size_t strlen ( const char * str ); 1.字符串以 \0 作为结束标志&#xff0c;strlen函数返回的是在字符串中 \0 前⾯出现的字符个数&#xff08;不包 含 \0 )。 2.参数指向的字符串必须要以 \0 结束。 3.注意函数的返回值为size_t&#xff0c;是⽆…

面试题 17.06. 2出现的次数

题解&#xff1a;. - 力扣&#xff08;LeetCode&#xff09;. - 力扣&#xff08;LeetCode&#xff09; 数位 DP 通用模板_哔哩哔哩_bilibili class Solution { public:int numberOf2sInRange(int n) {std::string str to_string(n);int len str.size();std::vector<std:…

【java】指定类,指定package,找到package下面,这个类的所有子类

目录 ■java代码 ■注意 ■运行效果 ■包的结构 ■java代码 package com.sxz.study.reflect;import java.io.File; import java.io.IOException; import java.net.URL; import java.util.ArrayList; import java.util.Enumeration; import java.util.List;public class …

Polkadot <> Kusama 桥:打造无信任互操作性的开创性范例

原文&#xff1a;https://www.parity.io/blog/trustless-interoperability 作者&#xff1a;Adrian Catangiu&#xff5c;Rust 区块链核心工程师&#xff0c;Parity Technologies 编译&#xff1a;OneBlock Polkadot <> Kusama 桥是无信任互操作性的开创性范例。本文深…

Ubuntu server 24 (Linux) 安装部署samba服务器 共享文件目录 windows访问

1 安装 sudo apt update sudo apt-get install samba #启动服务 sudo systemctl restart smbd.service sudo systemctl enable smbd.service #查看服务 2 创建用户 #创建系统用户 sudo useradd test2 #配置用户密码 sudo smbpasswd -a test2 # smbpasswd: -a添加用户 …

P1002 [NOIP2002 普及组] 过河卒

[NOIP2002 普及组] 过河卒 题目描述 棋盘上 A A A 点有一个过河卒&#xff0c;需要走到目标 B B B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C C C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为…