Web大学生网页作业成品——零食商城网页网站设计与实现(HTML+CSS)（1个页面）

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

---

一、作品介绍 🔥

🏷️本套采用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、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0185