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