藍色簡潔風格的生物醫療科技企業網站源碼下載



7 24 9



模板描述:藍色簡潔風格 生物醫療科技 企業網站,藍色簡潔風格的生物醫療科技企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link rel="stylesheet" href="images/css/reset.css">
<link rel="stylesheet" type="text/css" href="images/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="images/css/common.css">
<link rel="stylesheet" href="images/css/animate.css">
<link rel="stylesheet" href="images/css/magnific-popup.css">

2. 引入JS

<script src="images/js/jquery.min.js"></script>
<script src="images/js/wow.min.js"></script>
<script src="images/js/swiper.min.js"></script>
<script src="images/js/jscolor.js"></script>
<script src="images/js/common.js"></script>
<script type="text/javascript" src="images/js/popup.min.js"></script>
<script src="images/js/index.js"></script>

3. HTML代碼

    <!-- 頭部 -->
    <div class="header" id="head">
        <div class="header_con clearfix">
            <div class="logo fl">
                <a href="javascript:;">
                    <img src="images/logo.png" class="index_logo">
                </a>
            </div>
            <div class="nav fr nav_bar">
                <ul class="nav_pc clearfix">
                    <li class="active">
                        <a href="javascript:;">首頁</a>
                    </li>
                    <li>
                        <a href="javascript:;">公司介紹<i class="submenu_arrow"></i></a>
                        <div class="hid">
                            <ul class="clearfix">
                                <li><a href="javascript:;">二級二級二級二級二級二級二級二級二級二級</a></li>
                                <li><a href="javascript:;">二級</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;">產品展示</a>
                    </li>
                    <li>
                        <a href="javascript:;">客戶案例</a>
                    </li>
                    <li>
                        <a href="javascript:;">新聞資訊</a>
                    </li>
                    <li>
                        <a href="javascript:;">聯系我們</a>
                    </li>
                    <li>
                        <a class="a1" href="javascript:;">旺鋪</a>
                    </li>
                    <li>
                        <a href="javascript:;">English</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 手機版頭部 -->
    <div class="moblie_header ">
        <div class="container clearfix">
            <div class="snav_logo">
                <a href="javascript:;"><img src="images/logo.png"></a>
            </div>
            <div class="smenu">
                <a href="javascript:;" class="menu nav_but_box">
                    <img src="images/menu.png">
                </a>
            </div>
        </div>
    </div>
    <div class="wap_web nav-off">
        <div class="nav_margin"></div>
        <div class="nav_main" id="mobile-nav">
            <ul class="phone_menu">
                <li class="active">
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_index"></span></p>
                        <p>首頁</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_gs"></span></p>
                        <p>公司介紹</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_cp"></span></p>
                        <p>產品展示</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_al"></span></p>
                        <p>客戶案例</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_xw"></span></p>
                        <p>新聞資訊</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p><span class="icon_menu icon_lx"></span></p>
                        <p>聯系我們</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="wap_page">
          <!-- ====================以上為公共頭部 ======================-->
            <!-- 輪播圖 -->
            <div class="banner wow fadeIn">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href="javascript:;"><img src="images/banner1.jpg" width="100%" alt=""></a> </div>
                        <div class="swiper-slide"><a href="javascript:;"><img src="images/banner1.jpg" width="100%" alt=""></a> </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <!-- Initialize Swiper -->
            <!-- 免費取樣 -->
            <div class="section_block wow fadeInUp">
                <div class="container">
                    <form action=" " method="post" accept-charset="utf-8" class="freedemo_form">
                        <div class="block_title  wow zoomIn">
                            <div class="zh_tilte">免費索樣<span class="decorate"></span></div>
                        </div>
                        <div class="form_con clearfix">
                            <div class="input_group">
                                <input type="text" placeholder="單位名稱*">
                            </div>
                            <div class="input_group">
                                <input type="text" placeholder="姓名*">
                            </div>
                            <div class="input_group">
                                <input type="text" placeholder="聯系電話*">
                            </div>
                            <div class="input_group">
                                <input type="text" placeholder="收貨地址*">
                            </div>
                        </div>
                        <div class="area_ps">
                            <textarea name="" placeholder="如需要的尺寸、顏色、手寫、打印"></textarea>
                            <div class="colorpicker">
                                <span class="label">可選顏色:</span>
                                <div class="color_group">
                                    <div class="light_blue color_item active" data-color="#78d9f6"></div>
                                    <div class="pink color_item" data-color="#fa84f5"></div>
                                    <div class="self_color original_color color_item  self_color_box" data-color="無">
                                        <button class="color_pick jscolor {pickerPosition:'right',valueElement:'chosen-value', onFineChange:'setTextColor(this)'}">
                                        </button>
                                    </div>
                                    <input type="hidden" class="color_data" name="" value="">
                                </div>
                                <div class="nowcolor">當前選中顏色為:<span>#78d9f6</span></div>
                            </div>
                        </div>
                        <input type="submit" value="提交" class="btn_submit" name="">
                    </form>
                </div>
            </div>
            <!-- 提交表單后顯示調查問卷 -->
            <div class="index_form_questionnaire "> <!-- 顯示樣式為active -->
                <div class="index_form_questionnaire_con">
                    <div class="close_form"></div>
                    <!-- 調查問卷 -->
                    <form action="" method="post" class="form_questionnaire ">
                        <div class="form_tit ">免費拿樣</div>
                        <div class="question">
                            <p>1.目前是否在用腕帶:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>有</span></label>
                                <label><input type="radio" name=""><span>無</span></label>
                                <label><input type="radio" name=""><span>準備中</span></label>
                            </div>
                        </div>
                        <div class="question">
                            <p>2.您關注腕帶的哪種性能:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>柔軟</span></label>
                                <label><input type="radio" name=""><span>環保</span></label>
                                <label><input type="radio" name=""><span>品牌</span></label>
                            </div>
                        </div>
                        <div class="question">
                            <p>3.您所需腕帶的數量:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>5千</span></label>
                                <label><input type="radio" name=""><span>≥1萬</span> </label>
                                <label><input type="radio" name=""><span>≥10萬</span></label>
                            </div>
                        </div>
                        <div class="btn_submit_box ">
                            <input type="submit" value="確定" class="btn_submit" name="">
                        </div>
                    </form>
                </div>
            </div>
            <!-- 公司簡介 -->
            <div class="section_block ">
                <div class="container">
                    <div class="block_title wow zoomIn">
                        <div class="zh_tilte">公司簡介<span class="decorate"></span></div>
                        <div class="title_slogen">我們是一家專注于識別腕帶產品的企業</div>
                    </div>
                    <div class="company_profile">
                        <div class="left_text wow fadeInLeft">
                            <div class="title">
                                <div class="en_title">ABOUT US</div>
                                <div class="zh_title">公司簡介</div>
                            </div>
                            <div class="text_detail ">
                                <p>xxxxxxxxxxxxxxxxxxx成立于2012年初,是一家專注于一系列識別腕帶產品,集研發,設計與生產于一體的科技創新企業。</p>
                                <p>"康伴標識?"為用戶提供醫用條碼打印識別腕帶,手寫式識別腕帶,景區游樂場娛樂腕帶,RFID電子標簽腕帶,食品安全肉菜追溯標簽,空白標貼,電腦激光打碼,電子防盜腕帶等以及移動護理PDA條形碼掃描設備等產品。更為用戶提供景區游客識別管理方案、醫院移動護理信息系統構建及資產管理系統方案設計……</p>
                                <div><a href="javascript:;" class="btn_more">了解更多</a></div>
                            </div>
                        </div>
                        <div class="right_img wow fadeInRight">
                            <img src="images/company.jpg" width="100%" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 明星產品 -->
            <div class="section_block">
                <div class="container">
                    <div class="decorate_down"><a href="javascript:;"><img src="images/down.png" alt=""></a></div>
                    <div class="block_title  wow zoomIn">
                        <div class="zh_tilte">明星產品<span class="decorate"></span></div>
                        <div class="title_slogen"></div>
                    </div>
                    <div class="recommended_products wow fadeInUp">
                        <ul class="products_menu">
                            <li><a href="javascript:;">熱敏打印腕帶</a></li>
                            <li><a href="javascript:;">碳帶打印腕帶</a></li>
                            <li><a href="javascript:;">手寫腕帶</a></li>
                            <li><a href="javascript:;">個性化腕帶</a></li>
                            <li><a href="javascript:;">RFID腕帶</a></li>
                            <li><a href="javascript:;">打印機設備</a></li>
                            <li><a href="javascript:;">打印紙</a></li>
                            <li><a href="javascript:;">更多>></a></li>
                        </ul>
                        <div class="products_show grid">
                            <figure class="products_show_item effect-chico">
                                <img src="images/pro1.jpg" alt="">
                                <figcaption>
                                    <h2>超柔軟條碼打印腕帶</h2>
                                    <p>B80新生兒條碼打印腕帶<br>熱轉印打印/文本/條碼/二維碼</p>
                                    <a href="javscript:;" target="_blank">View more</a>
                                </figcaption>
                                <div class="spro_name">超柔軟條碼打印腕帶</div>
                            </figure>
                            <figure class="products_show_item effect-chico">
                                <img src="images/pro2.jpg" alt="">
                                <figcaption>
                                    <h2>超柔軟條碼打印腕帶</h2>
                                    <p>B80新生兒條碼打印腕帶<br>熱轉印打印/文本/條碼/二維碼</p>
                                    <a href="javscript:;" target="_blank">View more</a>
                                </figcaption>
                                <div class="spro_name">超柔軟條碼打印腕帶</div>
                            </figure>
                            <figure class="products_show_item effect-chico">
                                <img src="images/pro1.jpg" alt="">
                                <figcaption>
                                    <h2>超柔軟條碼打印腕帶</h2>
                                    <p>B80新生兒條碼打印腕帶<br>熱轉印打印/文本/條碼/二維碼</p>
                                    <a href="javscript:;" target="_blank">View more</a>
                                </figcaption>
                                <div class="spro_name">超柔軟條碼打印腕帶</div>
                            </figure>
                            <figure class="products_show_item effect-chico">
                                <img src="images/pro2.jpg" alt="">
                                <figcaption>
                                    <h2>超柔軟條碼打印腕帶</h2>
                                    <p>B80新生兒條碼打印腕帶<br>熱轉印打印/文本/條碼/二維碼</p>
                                    <a href="javscript:;" target="_blank">View more</a>
                                </figcaption>
                                <div class="spro_name">超柔軟條碼打印腕帶</div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 安全保障 -->
            <div class="section_block">
            <div class="section_block">
                <div class="container">
                    <div class="block_title wow zoomIn">
                        <div class="zh_tilte">安全保障<span class="decorate"></span></div>
                        <div class="title_slogen">品質生活的守護者,為健康保駕護航</div>
                    </div>
                    <div class="credentials wow fadeInUp">
                        <div class="credentials_swiper">
                            <div class="swiper-container">
                                <div class="swiper-wrapper gallery">
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                    <div class="swiper-slide">
                                      <a href="images/honor1.jpg"><img src="images/honor1.jpg" class="honor_img" alt="">
                                           <p class="honor_name">細胞毒性測試報告</p>
                                      </a>
                                    </div>
                                </div>
                              </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <!-- Initialize Swiper -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- 全國各地專家口碑力薦 -->
            <div class="section_block ">
                <div class="container">
                    <div class="block_title wow zoomIn">
                        <div class="zh_tilte">全國各地專家口碑力薦<span class="decorate"></span></div>
                        <div class="title_slogen">產品銷至全國各大城市,實力見證</div>
                    </div>
                    <div class="area_box wow fadeInUp">
                        <img src="images/area.jpg" width="100%" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!--================= 以下為公共底部 =======================-->
        <div class="footer wow fadeInUp">
            <div class="footer_top">
                <div class="container">
                    <div class="footer_top_con">
                        <div class="footer_top_item lxleft">
                            <div class="lxwm">
                                <div class="zh_title">聯系我們</div>
                                <div class="en_title">Contact Us</div>
                            </div>
                        </div>
                        <div class="footer_top_item ewmleft">
                            <p>關注</p>
                            <div class="erweima">
                                <img src="images/nopic.jpg" alt="">
                                <img src="images/nopic.jpg" alt="">
                                <img src="images/nopic.jpg" alt="">
                            </div>
                        </div>
                        <div class="footer_top_item right">
                            <div class="lxwm">
                                <div class="zh_title">xxxxxxxxxxxxxxxxxxx</div>
                                <div class="en_title">Guangzhou Kangban Medical Technology Co., Ltd.</div>
                            </div>
                            <div class="address_con">
                                <p>地址:廣州市番禺區大石會江石北</p>
                                <p>電話:xxxxxxxxxxxxx</p>
                                <p>手機:+xxxxxxxxxxxxxxxx +xxxxxxxxxxxxx</p>
                                <p>郵箱:[email protected]</p>
                                <p>旺鋪:<a href="xxxxxxxxxxxx">xxxxxxxxxxxxxxxxx</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_bottom">
                <div class="container">
                    <p>copyright?2019打印腕帶-腕帶之家-xxxxxxxxxxxxxxxxxxxxxxx.京ICP備******** 技術支持</p>
                </div>
            </div>
        </div>
        <!-- 手機版底部 -->
        <div class="phone_footer">
            <div class="container">
                <!-- 返回頂部 -->
                <div class="totop"><a href="javscript:;"><span>TOP</span> <img src="images/icon_totop.png" height="12px" alt=""></a> </div>
                <div class="phone_f_address">
                    <p>版權所有:xxxxxxxxxxxxxxxxxxxxxxx</p>
                    <p>聯系電話:xxxxxxxxxxxxx&nbsp;&nbsp;郵箱:[email protected]</p>
                </div>
            </div>
        </div>
    </div><!-- wap_web  結束 -->
    <div class="fixed_sfooter">
        <div class="sf_item">
            <a href="tel:xxxxxxxxxxxxxx">
                <span class="sfooter_icon icon_call"></span>
                <p>電話咨詢</p>
            </a>
        </div>
        <div class="sf_item">
            <a href="sms:xxxxxxxxxxx">
                <span class="sfooter_icon icon_message"></span>
                <p>信息咨詢</p>
            </a>
        </div>
        <div class="sf_item">
            <a href="javascript:;">
                <span class="sfooter_icon icon_map"></span>
                <p>在線地圖</p>
            </a>
        </div>
        <div class="sf_item">
            <a href="javascript:;">
                <span class="sfooter_icon icon_ly"></span>
                <p>在線留言</p>
            </a>
        </div>
        <div class="sf_item">
            <a href="javascript:;">
                <span class="sfooter_icon icon_qq"></span>
                <p>QQ客服</p>
            </a>
        </div>
    </div>
    <!-- 免費取樣側邊欄 -->
    <div class="fixed_left_side active">
        <div class="left_side_box">
            <div class="float_tab">
                <div class="float_tab_wrap">
                    <a href="javascript:;">
                        <span>免</span>
                        <span>費</span>
                        <span>拿</span>
                        <span>樣</span>
                        <span class="icon_shrink"><img src="images/icon_yjt.png" alt=""></span>
                    </a>
                </div>
            </div>
            <div class="float_pancle">
                <!-- 客服懸浮框 -->
                <div class="left_suspension">
                    <ul>
                        <li class="l_qy">
                            <span class="l_ico ico_qy"></span>
                        </li>
                        <li class="l_wx">
                            <span class="l_ico ico_wx"></span>
                            <div class="sidebox">
                                <div class="sidebox_wrap">
                                    <img src="images/nopic.jpg">
                                </div>
                            </div>
                        </li>
                        <li class="l_qq">
                            <a href="javascript:;" target="_blank">
                                <span class="l_ico ico_qq"></span>
                            </a>
                        </li>
                        <li class="l_bd">
                            <a href="javascript:;" target="_blank">
                                <span class="l_ico ico_bd"></span>
                            </a>
                        </li>
                        <li class="l_tel">
                            <span class="l_ico ico_tel"></span>
                            <div class="sidebox">
                                <div class="sidebox_wrap">
                                    <p><a href="tel:xxxxxxxxxxxx">xxxxxxxxxxxxxxxxxx</a></p>
                                </div>
                            </div>
                        </li>
                        <li class="l_top totop">
                            <a class="f-cb return-webtop" href="javascript:;">
                                <span class="l_ico ico_top"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 收縮按鈕 -->
                <div class="close_pancle icon_zjt">
                    <img src="images/icon_yjt.png" alt="">
                </div>
                <!-- 表單 -->
                <div class="form_box ">
                   <div class=" lclose_form"></div>
                    <form action="" class="free_demo ">
                        <div class="form_tit">免費拿樣</div>
                        <div class="input_group"><label>姓名</label><input type="text" name=""></div>
                        <div class="input_group"><label>電話</label><input type="text" name=""></div>
                        <textarea name="" placeholder="地址" class="address_box"></textarea>
                        <div class="num_box">
                            <p>需求數量:</p>
                            <div class="num_box_con">
                                <span class="o_btn" onclick="numDec()">-</span> <input type="text" id="quantity" value="1" /><span class="o_btn" onclick="numAdd()">+</span>
                            </div>
                        </div>
                        <div class="colorpicker">
                            <span class="label">可選顏色:</span>
                            <div class="color_group">
                                <div class="light_blue color_item active" data-color="#78d9f6"></div>
                                <div class="pink color_item" data-color="#fa84f5"></div>
                                <div class="self_color original_color color_item  self_color_box" data-color="無">
                                    <button class="color_pick jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}">
                                    </button>
                                </div>
                                <input type="hidden" class="color_data" name="" value="">
                            </div>
                            <div class="nowcolor">當前選中顏色為:<span>#78d9f6</span></div>
                        </div>
                        <div class="btn_submit_box ">
                            <input type="submit" value="提交" class="btn_submit" name="">
                        </div>
                    </form>
                    <!-- 調查問卷 -->
                    <form action="" method="post" class="form_questionnaire hide">
                        <div class="form_tit">免費拿樣</div>
                        <div class="question">
                            <p>1.目前是否在用腕帶:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>有</span></label>
                                <label><input type="radio" name=""><span>無</span></label>
                                <label><input type="radio" name=""><span>準備中</span></label>
                            </div>
                        </div>
                        <div class="question">
                            <p>2.您關注腕帶的哪種性能:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>柔軟</span></label>
                                <label><input type="radio" name=""><span>環保</span></label>
                                <label><input type="radio" name=""><span>品牌</span></label>
                            </div>
                        </div>
                        <div class="question">
                            <p>3.您所需腕帶的數量:</p>
                            <div class="radio_group">
                                <label><input type="radio" name=""><span>5千</span></label>
                                <label><input type="radio" name=""><span>≥1萬</span> </label>
                                <label><input type="radio" name=""><span>≥10萬</span></label>
                            </div>
                        </div>
                        <div class="btn_submit_box ">
                            <input type="submit" value="確定" class="btn_submit" name="">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 pc+wap 移動+電腦 手機+電腦 大氣 霸氣 寬屏 全屏 滿屏 醫藥 醫藥廠 醫藥公司 醫藥器械
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 快乐飞艇官网下载 会赚钱脾气还温和的星座 中国彩票最新开奖结果查询 微信足彩通 浙江快乐彩票十一选五开奖结果 建筑垃圾处理厂赚钱 87 88年做什么最赚钱 分分彩计划软件哪个好 澳洲幸运5开奖助手 广西11选5常规走势图 67彩彩票苹果 分分彩5星漏洞怎么搞 街机捕鱼游戏 广西快乐10分彩票控 朋友局河南麻将手机版 赚钱实战