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

相关推荐
Domain-zhuo1 分钟前
JS对于数组去重都有哪些方法?
开发语言·前端·javascript
明月清风徐徐30 分钟前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解39 分钟前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队1 小时前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿1 小时前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿1 小时前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下1 小时前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨2 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu2 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人2 小时前
react-amap海量点优化
前端·react.js·前端框架