直接使用代码
<style>
#myCarousel{z-index:1;}
.carousel-indicators{bottom:-50px;}
.carousel-indicators li{background:#666;border:none;margin-right:5px;width:20px;height:6px;}
.carousel-indicators li.active{background:#09f;margin-right:5px;width:30px;height:6px;margin-top:-3px}
.btn-more{display: block;background:#09f;color:#fff;margin:15px auto;width:150px;line-height: 35px;text-align: center;font-size:16px;border-radius: 6px;}
/*---------------------------------------------------------------------------------------------------------------手机站导航开始----------*/
.sp_header{height:50px;overflow:hidden;background:#fff;position:fixed;z-index:10;width:100%;border-bottom:1px solid #cecece;box-shadow: 0 2px 5px #eee;}
.sp_logo{padding:10px;float:left;height:50px}
.sp_logo img{margin:auto;max-height:30px;}
.sp_nav{width:50px;float:right;position:relative;cursor:pointer;height:30px;margin-top:15px}
.sp_nav span{display:block;background:#09f;width:30px;height:2px;position:absolute;left:10px;transition:all ease 0.35s}
.sp_nav span:nth-of-type(1){top:0px}
.sp_nav span:nth-of-type(2){top:10px}
.sp_nav span:nth-of-type(3){top:20px}
.sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg)}
.sp_nav_se span:nth-of-type(2){width:0}
.sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg)}
.sjj_nav{position:fixed;z-index:9;background:#eee;width:100%;height:calc(100% - 104px);font-size:14px;line-height:40px;top:-100%;left:0;overflow:auto;overflow-x:hidden;transition:top ease 0.35s;}
.nav_show{top:50px}
.sjj_nav>ul>li:first-child{overflow:hidden;border-top:0}
.sjj_nav>ul>li:first-child>a{float:left;width:calc(100% - 70px)}
.sjj_nav>ul>li:first-child .language{float:right;width:70px;overflow:hidden;line-height:30px;margin-top:5px}
.sjj_nav>ul>li:first-child .language a{width:35px;float:left;border-left:1px #ddd solid;text-align:center;color:#999;}
.sjj_nav ul li i{position:absolute;top:5px;right:0px;border-left:1px #ddd solid;height:30px;padding:0px 7px 0 7px;}
.sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s}
.sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
.sjj_nav ul li{border-top:1px #ddd solid;margin-left:20px;position:relative;line-height:40px;font-size:14px}
.sjj_nav>ul >li:last-child{border-bottom:1px #ddd solid;}
.sjj_nav ul li ul{display:none}
.sjj_nav ul li a{color:#666;width:80%}
.sjj_nav ul li ul li a{color:#999;display:block;text-align:left;}
.sjj_nav ul li i svg{width:20px;height:20px;fill:#555;}
.sjj_nav ul li .sjj_nav_i_se svg{fill:#c9141e}
.sjj_nav ul li ul li>ul{margin-left:10px}
/*---------------------------------------------------------------------------------------------------------------手机站导航结束----------*/
.ccsl{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.clear {clear:both;}
body{ width:100%;max-width:512px; margin:0 auto; font-size:12px; line-height:24px; color:#333}
.mainWarp{width:100%;max-width:512px; margin:0 auto; background:#fff;}
/* 首页--产品列表 */
.part1{ width:100%; padding:5px;padding-top:25px; overflow:hidden}
.part1 .marqueeleft{width:1160px;overflow:hidden;}
.part1 .marqueeleft ul{float:left;}
.part1 .marqueeleft li{float:left;display:inline;height:130px;overflow:hidden; padding-right:15px}
.part1 .marqueeleft li img{ border-radius:4px}
ul.piclsitul{ padding-bottom:30px;}
ul.piclsitul li{float:left; width:48%; margin:1%;}
ul.piclsitul li img{ display:block; width:100%;border-radius: 5px;}
ul.piclsitul li p{ text-align:center; padding:0 10px; height:30px; line-height:30px; color:#676767; font-size:16px}
/* 公司简介 */
.part2{ width:100%; padding-top:25px;}
.part2 img{ display:block; width:100%}
.part2 .con{ padding:15px;font-size: 14px; color:#666; line-height:24px}
.contitbox{ padding-top:25px}
.contitbox p{ text-align:center;color: #2b2b2b; font-size:18px; font-weight:bold}
.contitbox span{ text-align:center; color:#999; font-size:14px; text-transform:uppercase}
.part5{ width:100%; padding-top:25px}
.part5 ul{ overflow:hidden; padding:0 15px}
.part5 ul li a{ display:block;height:35px; line-height:35px; background:url(http://www.bootfastui.cn/img/2021/0328-5/jt4.png) right 15px no-repeat; padding:5px 0;padding-right:15px}
.part5 ul li a p{font-size:16px; color:#666; background:url(http://www.bootfastui.cn/img/2021/0328-5/icond.png) left center no-repeat; padding-left:15px}
.part5 ul li span{ display:block; color:#ababab; font-size:14px; padding-left:17px}
.footer{ padding:20px;background:#202022}
.footer .con{ text-align:center;color: #909091; font-size:14px;line-height: 30px;}
</style>
<div class="sp_header">
<div class="sp_logo"><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0328-5/logo2.png" alt=""></a></div>
<div class="sp_nav"> <span></span> <span></span> <span></span> </div>
</div>
<div class="sjj_nav">
<ul>
<li> <a href="http://www.bootfastui.cn">鼎银电子科技有限公司</a>
<div class="language"> <a href="http://www.bootfastui.cn">中</a> </div>
</li>
<li> <a>产品中心</a><i class="sp_nav_xjb"> </i>
<ul>
<li><a href="http://www.bootfastui.cn">推荐产品</a></li>
<li><a href="http://www.bootfastui.cn">热门产品</a></li>
</ul>
</li>
<li><a href="http://www.bootfastui.cn">企业简介</a></li>
<li><a href="http://www.bootfastui.cn">企业资讯</a></li>
<li><a href="http://www.bootfastui.cn">应用案例</a></li>
<li><a href="http://www.bootfastui.cn">招商政策</a></li>
<li><a href="http://www.bootfastui.cn">售后服务</a></li>
<li><a href="http://www.bootfastui.cn">联系我们</a></li>
</ul>
</div>
<div style="height: 52px;"></div>
<!---------------------------------------------------------------------------------------------------------------手机站导航结束---------->
<script>
$(function () {
var windoww = $(window).width();
$('.sp_nav').click(function () {
$('.sp_nav').toggleClass('sp_nav_se');
$('.sjj_nav').toggleClass('nav_show');
});
$('.sjj_nav ul li i').click(function () {
$(this).parent().children('ul').slideToggle().parent().siblings().children('ul').slideUp();
$(this).toggleClass('sjj_nav_i_se');
$(this).parent().siblings().find('i').removeClass('sjj_nav_i_se');
});
$('.sp_nav_xjb').html('<svg t="1496193951932" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M768.468 428.876l-84.723-84.723-170.711 170.711-170.711-170.711-84.723 84.723 170.711 170.711-0.092 0.091 84.723 84.724 0.092-0.092 0.092 0.092 84.723-84.724-0.092-0.091z" p-id="996"></path></svg>');
});
</script>
<div class="mainWarp">
<div class="contitbox">
<p class="ccsl">推荐产品</p>
<span class="ccsl" style="text-transform: uppercase">Recommended Products</span>
</div>
<div class="clear"></div>
<div class="part1">
<ul class="piclsitul">
<li>
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/5d5da705a420e9283fa7c365afc6ed6d.jpg">
<p class="ccsl">多媒体评价器</p>
</a>
</li>
<li>
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/5d5da705a420e9283fa7c365afc6ed6d.jpg">
<p class="ccsl">4.3寸液晶评价器</p>
</a>
</li>
<li>
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/5d5da705a420e9283fa7c365afc6ed6d.jpg">
<p class="ccsl">云评价器</p>
</a>
</li>
<li>
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/5d5da705a420e9283fa7c365afc6ed6d.jpg">
<p class="ccsl">按键评价器</p>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="contitbox">
<p class="ccsl">公司简介</p>
<span class="ccsl">CORPORATE CULTURE</span>
</div>
<div class="clear"></div>
<div class="part2">
<img src="http://www.bootfastui.cn/img/2021/0328-5/2.jpg">
<div class="con">
河北鼎银电子科技有限公司是一家集研发、生产、销售、计算机技术应用服务于一体的高科技企业。产品涉及金融、证券、邮电、教育、医疗等多个领域。<br />
本着知识创造价值的理念,公司秉承专业化、精品化、系列化路线,现已形成以密码小键盘、乱序评价密码键盘、磁条读写器、IC卡读写器、客户评价器、评价系统、多功能通道槽、柜外清以及集磁卡读写器、接触式/非接触式IC卡读写器、指纹仪、二代身份证阅读器与一体的多合一产品等金融设备为主导的产品生产线和销售体系,并积极研发适用于现代金融行业的高科技金融设备。
</div>
<a href="http://www.bootfastui.cn" class="btn-more">READ MORE ></a>
</div>
<div class="clear h10"></div>
<!-- 热门产品块 -->
<div style="background:#f6f6f6;padding-bottom:50px;">
<div class="contitbox">
<p class="ccsl">热门产品</p>
<span class="ccsl" style="text-transform: uppercase">Hot products</span>
</div>
<div class="clear h10"></div>
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
1</li>
<li data-target="#myCarousel" data-slide-to="1">
2</li>
<li data-target="#myCarousel" data-slide-to="2">
3</li>
<li data-target="#myCarousel" data-slide-to="3">
4</li>
</ol> <!-- 轮播(Carousel)项目 -->
<div class="carousel-inner bor_btm">
<div class="item active ">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/301e89fbd03282635e56022b578bdc10.jpg" class="img-responsive" />
<h4 class="text-center line40 blue">DY-324</h4>
<div style="height:50px;text-align:center;padding:0 15px 15px 15px;font-size:16px">
新款工号牌,USB连接,支持局域网和互联网,支持手机管理 </div>
</a>
</div>
<div class="item ">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/301e89fbd03282635e56022b578bdc10.jpg" class="img-responsive" />
<h4 class="text-center line40 blue">DY303</h4>
<div style="height:50px;text-align:center;padding:0 15px 15px 15px;font-size:16px">
三按键,USB连接,真人语音,星级显示,支持局域网和互联网 </div>
</a>
</div>
<div class="item ">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/301e89fbd03282635e56022b578bdc10.jpg" class="img-responsive" />
<h4 class="text-center line40 blue">DY-304</h4>
<div style="height:50px;text-align:center;padding:0 15px 15px 15px;font-size:16px">
四按键,USB连接,真人语音,星级显示,支持局域网和互联网 </div>
</a>
</div>
<div class="item ">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0328-5/301e89fbd03282635e56022b578bdc10.jpg" class="img-responsive" />
<h4 class="text-center line40 blue">CEV客户端</h4>
<div style="height:50px;text-align:center;padding:0 15px 15px 15px;font-size:16px">
各类型通用,兼容XP~WIN10,支持二次开发 </div>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('.carousel').carousel({ interval: 3000 }); });
</script>
</div>
<div class="clear h10"></div>
<div class="contitbox">
<p class="ccsl">新闻动态</p>
<span class="ccsl">NEWS</span>
</div>
<div class="clear"></div>
<div class="part5">
<ul>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">鼎银公司防疫活动</p>
</a>
<span>2020-05-27</span>
</li>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">公司开发车载评价器通过样机测试</p>
</a>
<span>2020-05-27</span>
</li>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">快讯:公司共青城行政审批局评价器项目中标</p>
</a>
<span>2020-05-30</span>
</li>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">喜讯:公司获评高新技术企业</p>
</a>
<span>2020-05-27</span>
</li>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">公司到某敬老院为老人献出爱心</p>
</a>
<span>2020-05-27</span>
</li>
<li>
<a href="http://www.bootfastui.cn">
<p class="ccsl">鼎银4月春游计划</p>
</a>
<span>2020-05-27</span>
</li>
</ul>
<a href="http://www.bootfastui.cn" class="btn-more">READ MORE ></a>
</div>
</div>
<div class="clear h30"></div>
<div class="clear"></div>
<div class="footer">
<div class="contact"
style="color:#909091;font-size:14px;border-bottom:1px solid #444;text-align: center;padding-bottom:15px">
<p>联系人:1803817XXXX 谢志博 </p>
<p>联系人:1803817XXXX 曹东来</p>=
<p>地址:河北省保定市竞秀区创业路</p>
</div>
<br />
<div class="con">©2020 河北XXXX科技有限公司</div>
</div>