作品描述:响应式零食网站HTML+CSS+JavaScript。主要包括的页面有网站首页,关于我们,产品中心,店面形象,新闻资讯,联系我们
等多个页签。
实现技术:CSS+HTML+JS+H5+CSS3+jQuery;
这里展示部分代码
<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.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)
博主为人老实,无偿解答问题,也会录制一些学习视频教同学们知识❤
如果对您有帮助,希望能给个👍/评论/收藏
您的三连~是对我创作最大的动力支持
关注:前端老实人👇领取源码哦~
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/122843102
内容来源于网络,如有侵权,请联系作者删除!