HTML期末作业，响应式零食网站项目 （HTML+CSS+JS）

项目：响应式零食网站项目

作品描述：响应式零食网站HTML+CSS+JavaScript。主要包括的页面有网站首页，关于我们，产品中心，店面形象，新闻资讯，联系我们等多个页签。

视频链接：html+css写一个零食网站，源码请你直接拿走

实现技术：CSS+HTML+JS+H5+CSS3+jQuery；

作品演示

1.网站首页是这样的

2.产品中心

3.网络营销

4.案例展示

5.新闻资讯

6.联系我们

目录结构

代码展示

这里展示部分代码

<div class="barwrap clearfix">
	<a href="" class="logo"><img src="img/logo.png" /></a>
	<ul class="navbar">
		<li class="on">
			<a href="index.html">网站首页<b></b></a>
		</li>
		<li>
			<a href="">关于我们<b></b></a>
		</li>
		<li>
			<a href="details.html">产品中心<b></b></a>
		</li>
		<li>
			<a href="sale.html">销售网络<b></b></a>
		</li>
		<li>
			<a href="case.html">案例展示<b></b></a>
		</li>
		<li>
			<a href="news.html">新闻资讯<b></b></a>
		</li>
		<li>
			<a href="contact.html">联系我们<b></b></a>
		</li>
	</ul>
	<div class="div2">
		<h3>
			<strong>咨询服务热线</strong>
			<b>0551-88888888</b>
		</h3>
		<span class="zoom"><img src="img/zoom.png"/></span>
	</div>
</div>
<div class="search-box clearfix">
	<span class="search-close"><img src="img/close.png"/></span>
	<div class="div">
		<div class="clearfix">
			<input type="text" value="" placeholder="请输入关键词" onfocus="this.placeholder=''" onblur="this.placeholder='请输入关键词'" class="fl in" />
			<input type="submit" name="" id="" value="搜索" class="sub fl" />
		</div>
		<p>
			<strong>热搜关键词:</strong>
			<a href="">薯片 </a>
			<a href="">香辣味牛肉粒 </a>
			<a href="">菲律宾风味芒果干 </a>
			<a href="">酒鬼锅巴 </a>
		</p>
	</div>
</div>
<div class="section index-sec1">
		<div class="banner">
			<ul class="bannerfix slides clearfix">
				<li>
					<img class="bimg" src="img/bg1.jpg" />
				</li>
				<li>
					<img class="bimg" src="img/bg1.jpg" />
				</li>
				<li>
					<img class="bimg" src="img/bg1.jpg" />
				</li>
			</ul>
			<div class="bamnline"><span></span></div>
		</div>
	</div>
	<div class="section index-sec2">
		<div class="sec2-cont">
			<div class="text animated">
				<h3 id="effect2">xxxxx休闲零食</h3>
				<h4>秉承“   诚信”“务实”、“创新”、“进取”的企业精神</h4>
				<p class="p1">
					广东XXXX食品有限公司成立于1996年，XXXX食品有限公司有限公司作为一家民营独资企业注册诞生，秉承“ 诚信”“务实”、 “创新”、“进 取”的企业精神，以生产加工和销售各种肉类制品、豆类制品、鱼类制品熟食等产品为主体。秉承“ 诚信”“务实”、“创新”、“进取”的企业精神，以生产加工和销售各种肉类制品、
				</p>
			</div>
			<ul class="animated delay-1s">
				<li>
					<strong>2019</strong>
					<p>成立于2019年</p>
				</li>						
				<li><b></b></li>
				<li>
					<strong>5000000</strong>
					<p>总投资约500万元</p>
				</li>
				<li><b></b></li>
				<li>
					<strong>1500+</strong>
					<p>公司员工</p>
				</li>
				<li><b></b></li>
				<li>
					<strong>100+</strong>
					<p>产品种类</p>
				</li>
			</ul>
			<a href="" class="more animated delay-2s ">
				了解更多						
			</a>

		</div>

	</div>

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要源码或者部署神器可在公z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~