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