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

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

文章目录


一、作品介绍

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

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<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.想要获取本文源码,点击前往吧

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css