蓝色实用风格的电子科技行业整站网站源码下载



8 28 10



模板描述:蓝色实用风格 电子科技行业 整站网站,蓝色实用风格的电子科技行业整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link href="css/index.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/mt-tabpage.js"></script>

3. HTML代码

    <div class="logo_nav">
        <div class="w1200">
            <div class="float_left logo">
                <a href="/"><img src="images/logo.png"></a>
            </div>
            <div class="float_right langues">
                <select style="background: none; border:0; color: #fff;margin-top: 23px; font-size: 16px;" onchange="window.location=this.value;">
                    <option value="/">中文</option>
                    <option value="/">英文</option>
                </select>
            </div>
            <div class="float_right tels">
                咨询热线:
                <h5>0512-57829586</h5>
            </div>
            <div class="float_right">
                <nav>
                    <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><a href="/">联系我们</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background: url(images/banner.jpg) top center no-repeat;">
                <a href="/"></a>
            </div>
            <div class="swiper-slide" style="background: url(images/banner.jpg) top center no-repeat;">
                <a href="/"></a>
            </div>
            <div class="swiper-slide" style="background: url(images/banner.jpg) top center no-repeat;">
                <a href="/"></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="in-about">
        <div class="w1200">
            <div class="in-about-left">
                <div class="index_title text-left">
                    <h1>Introduction</h1>
                    <h2>十井电子</h2>
                </div>
                <div class="in-about-left-content">
                    <p>
                        昆山十井电子科技有限公司(KSSJ))起源于上海外开希电路板有限公司。上海外开希电路板有限公司成立于1995年,原系上海金陵股份有限公司与日本YKC株式会社的合资企业。主要生产销售单面、碳浆、银浆贯孔,双面多层印制板,主要为日美系世界知名企业配套。2011年,公司开始转型多元化发展,陆续在上海,昆山(昆山十井),香港成立多家公司。<Br><br>
昆山十井电子科技有限公司主要生产各类高低阻碳膜线路板和SMT加工,主要用于汽车各类开关和风门执行器,电动工具调速开关等。公司现有高阻碳膜加工线3条,碳膜印刷机7台,拥有资深技术团队,是集专业研发、生产、销售OEM,ODM电子产品企业。目前我司已为通用,一汽,福特,长城,五菱,众泰,吉利,东风,牧田,博世,东成,百德等企业产品配套。作为众多世界500强的供应商,我们以优惠的价格,可靠的质量,贴切的服务赢得了众多客人的称赞。我们以学习,感恩,诚信,专业的企业精神竭诚为新老客户服务。
                    </p>
                    <img src="images/sj_07.png">
                </div>
            </div>
            <div class="in-about-right">
                <img src="images/sj_04.jpg">
            </div>
        </div>
    </div>
    <div class="in-cultrue">
        <div class="w1200">
            <div class="in-cultrue-content">
                <div class="index_title text-left">
                    <h1>The enterprise culture</h1>
                    <h2>企业文化</h2>
                </div>
                <dl>
                    <dt>使命</dt>
                    <dd>与伙伴共同成长,创造更美好的公司,以此带来更美好的未来。 </dd>
                    <dt>愿景</dt>
                    <dd>成为客户信赖的行业领军企业</dd>
                    <dt>价值观</dt>
                    <dd>感恩,诚信,进取,合作,创新</dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="in-product">
        <div class="index_title text-center">
            <h1>Product center</h1>
            <h2>产品中心</h2>
        </div>
        <div class="w1200">
            <div class="mt-tabpage" js-tab="2">
                <div class="mt-tabpage-title">
                    <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">电动工具碳膜板</a>
                    <a href="javascript:;" class="mt-tabpage-item">汽车电子碳膜板  </a>
                    <a href="javascript:;" class="mt-tabpage-item">柔性碳膜板</a>
                    <a href="javascript:;" class="mt-tabpage-item">PCBA</a>
                </div>
                <div class="mt-tabpage-count">
                    <ul class="mt-tabpage-cont__wrap">
                        <li class="mt-tabpage-item">
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                        </li>
                        <li class="mt-tabpage-item">
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                        </li>
                        <li class="mt-tabpage-item">
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                        </li>
                        <li class="mt-tabpage-item">
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                            <a href=""><img src="images/sj_14.jpg" width="100%">电动工具碳膜板</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="in-liucheng">
        <div class="w1200">
            <div class="in-liucheng-left">
                <div class="index_title text-left">
                    <h1>Manufacturing process</h1>
                    <h2>生产制造流程</h2>
                </div>
                <div id="lc1" class="lccontent">
                    <h3><span>&nbsp;&nbsp;</span>双面板流程(以"热风整平"表面处理为例)</h3>
                    <p>开料 → 钻孔 → 水平通孔(高分子导电膜)→ 电镀(VCP一次镀铜)→ 外层制作(干膜、蚀刻)→ 外层AOI检查(半成品检查)→ 防焊油墨 → 文字印刷 → 热风整平 → 成型(铣床、V-CUT、成品清洗)→ 电测(成品检查)→ FQC(外观检查)→ 包装→ 入库</p>
                </div>
                <div id="lc2" class="lccontent" style="display: none;">
                    <h3><span>&nbsp;&nbsp;</span>多层板流程</h3>
                    <p>开料 → 钻孔 → 水平通孔(高分子导电膜)→ 电镀(VCP一次镀铜)→ 外层制作(干膜、蚀刻)→ 外层AOI检查(半成品检查)→ 防焊油墨 → 文字印刷 → 热风整平 → 成型(铣床、V-CUT、成品清洗)→ 电测(成品检查)→ FQC(外观检查)→ 包装→ 入库</p>
                </div>
                <div id="lc3" class="lccontent" style="display: none;">
                    <h3><span>&nbsp;&nbsp;</span>碳膜板</h3>
                    <p>开料 → 钻孔 → 水平通孔(高分子导电膜)→ 电镀(VCP一次镀铜)→ 外层制作(干膜、蚀刻)→ 外层AOI检查(半成品检查)→ 防焊油墨 → 文字印刷 → 热风整平 → 成型(铣床、V-CUT、成品清洗)→ 电测(成品检查)→ FQC(外观检查)→ 包装→ 入库</p>
                </div>
            </div>
            <div class="in-liucheng-right">
                <a href="javascript:void(0);" class="on" onmouseover="$('.in-liucheng a').removeClass('on');$('.lccontent').css('display','none');$('#lc1').css('display','block');$(this).addClass('on');">双面板流程</a>
                <a href="javascript:void(0);" onmouseover="$('.in-liucheng a').removeClass('on');$('.lccontent').css('display','none');$('#lc2').css('display','block');$(this).addClass('on');">多层板流程</a>
                <a href="javascript:void(0);" onmouseover="$('.in-liucheng a').removeClass('on');$('.lccontent').css('display','none');$('#lc3').css('display','block');$(this).addClass('on');">碳膜板</a>
            </div>
        </div>
    </div>
    <div class="in-tese">
        <div class="index_title text-center">
            <h1>Enterprise characteristics</h1>
            <h2>企业特色</h2>
        </div>
        <div class="w1200">
            <div class="in-tese-title">
                <span>
                    <b>48小时</b>
                    常规PCB样品出货
                </span>
                <span>
                    <b>3天</b>
                    碳膜样品出货
                </span>
                <span>
                    <b>5天</b>
                    PCBA样品
                </span>
            </div>
        </div>
        <div class="w1200">
            <div class="in-tese-left">
                <img src="images/sj_20.png">
                <h5>24年专注研发生产</h5>
                <p>
                    公司碳膜类PCB产品技术工艺处于行业领先地位,<br>
                    突破碳膜寿命100万次和碳膜线性1%技术瓶颈。
                </p>
                <img src="images/sj_27.png"><br><br>
                <img src="images/sj_36.png">
                <h5>较强研发能力</h5>
                <p>拥有较强研发能力,能够协助客户开发新品。</p>
            </div>
            <div class="in-tese-right">
                <img src="images/sj_22.png">
                <h5>核心品牌技术</h5>
                <p>
                    能够承接SMT/DIP加工。<br>
                    &nbsp;
                </p>
                <img src="images/sj_29.png"><br><br>
                <img src="images/sj_38.png">
                <h5>卓越品质,按期交付</h5>
                <p>自有线路板厂配套,成本,质量,交期保证。</p>
            </div>
        </div>
    </div>
    <div class="in-shebei">
        <div class="index_title text-center">
            <h1>Production equipment</h1>
            <h2>生产设备</h2>
        </div>
        <div class="in-shebei-list">
           <ul>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
            <li><a href="javascript:;"><img src="images/sj_43.jpg" alt=""><span>丝印机</span></a></li>
           </ul>
        </div>
    </div>
    <div class="in-part">
        <div class="index_title text-center">
            <h1>Partners</h1>
            <h2>合作伙伴</h2>
        </div>
        <div class="w1200">
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
            <a href=""><img src="images/sj_47.jpg"></a>
        </div>
    </div>
    <div class="in-news">
        <div class="w1200">
            <div class="index_title text-left">
                <h1>News</h1>
                <h2>新闻</h2>
            </div>
            <div class="in-news-left">
                <dl>
                    <dt>
                        <span>24</span>
                        2019-09
                    </dt>
                    <dd>
                        <a href="">昆山十井电子科技有限公司与宝马中国达成战略合作关系</a>
                        <p>昆山十井电子科技有限公司与宝马中国达成战略合作关系</p>
                        <a href="">了解更多</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <span>24</span>
                        2019-09
                    </dt>
                    <dd>
                        <a href="">昆山十井电子科技有限公司与宝马中国达成战略合作关系</a>
                        <p>昆山十井电子科技有限公司与宝马中国达成战略合作关系</p>
                        <a href="">了解更多</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <span>24</span>
                        2019-09
                    </dt>
                    <dd>
                        <a href="">昆山十井电子科技有限公司与宝马中国达成战略合作关系</a>
                        <p>昆山十井电子科技有限公司与宝马中国达成战略合作关系</p>
                        <a href="">了解更多</a>
                    </dd>
                </dl>
            </div>
            <div class="in-news-right">
                <img src="images/img.jpg" width="598" height="397">
                <a href="">
                    昆山十井电子科技有限公司与宝马中国达成战略合作关系
                    <p>昆山十井电子科技有限公司与宝马中国达成战略合作关系</p>
                </a>
            </div>
        </div>
    </div>
    <footer>
        <div class="w1200">
            <div class="erweima">
                <img src="images/sj_53.jpg">
            </div>
            <div class="contact">
                <h2>联系我们</h2>
                <p>地址:江苏省昆山市淀山湖镇北苑路228号</p>
                <p><span>电话:0512-57829586</span> <span>服务热线:400-8888-888</span> <span>qq:888888888</span></p>
            </div>
            <div class="footmenu">
                <a href="">网站首页</a><a href="">发展历史</a>
                <a href="">关于我们</a><a href="">设备展示</a>
                <a href="">产品中心</a><a href="">合作伙伴</a>
                <a href="">新闻动态</a><a href="">联系我们</a>
            </div>
            <p class="copyright">
                <span>  昆山十井电子科技有限公司 版权所有 备案号:苏ICP备19888888号</span>
                <span><a href="">友情链接</a><a href="">友情链接</a><a href="">友情链接</a></span>
            </p>
        </div>
    </footer>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/mt-tabpage.js"></script>
    <script type="text/javascript">
    $(function () {
        $('[js-tab=2]').tab({
            mouse: 'over',   //切换方式:over,click
            autoPlay: false,  //播放方式:false,true
            curDisplay: 1,     //当前第一个打开
            changeMethod: 'vertical'  //切换选项:默认default,horizontal,vertical,opacity这4种方式
        });
        $('[js-tab=3]').tab({
            curDisplay: 2,
            changeMethod: 'horizontal'
        });
    });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 实用通用 实用 通用

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到