模板描述：蓝色简洁风格 健康管理医疗 企业网站，蓝色简洁风格的健康管理医疗企业网站源码下载html模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="Public/css/font.css" /> <link rel="stylesheet" type="text/css" href="Public/css/base.css" /> <link rel="stylesheet" type="text/css" href="Public/css/index.css" /> <link rel="stylesheet" type="text/css" href="Public/css/indexAnimate.css" />
2. 引入JS
<script src="Public/js/jquery-1.11.0.min.js"></script> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <script src="Public/js/jquery.easing.min.js"></script> <script src="Public/js/jquery.nicescroll.min.js"></script> <script src="Public/js/jquery.mousewheel.js"></script> <script src="Public/js/base.js"></script> <script src="Public/js/index.js"></script>
3. HTML代码
<!-- header -->
<div class="header">
<a href="#"><img class="logo1" src="Public/images/logo.jpg" /></a>
<img class="navBtn" src="Public/images/navBtn.png" />
<div class="container">
<ul class="nav">
<a href="#"><li class="on">首页</li></a>
<a href="#"><li >优势</li></a>
<a href="#"><li >服务</li></a>
<a href="#"><li >品牌</li></a>
<a href="#"><li >动态</li></a>
<a href="#"><li >合作</li></a>
<a href="#"><li >联系</li></a>
</ul>
</div>
</div>
<!-- header over-->
<div class="stance"></div>
<!-- list -->
<div class="list">
<div class="container">
<div class="left">
<span class="redTitle">Hi,are you ready?</span>
<p class="title">准备好开始了吗?<br />那就与我们取得联系吧</p>
<p class="info">有一个品牌项目想和我们谈谈吗?您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话，让我们听到你的声音!</p>
<div class="footTitle">
<span class="titleB">beilissima </span>
<span>贝丽丝玛健康管理中心</span>
</div>
<p class="info">地 址：天津市南开区城厢中路758号盛津园9-2 </p>
<p class="info">E-mail：bellissima2011.com </p>
<p class="info"> </p>
<p class="info">客户服务电话</p>
<p class="info">400 804 6884</p>
</div>
<div class="right">
<p class="title">填写您的项目信息</p>
<p class="line"><input type="text" class="inputText" id="listName" value="您的姓名" /></p>
<p class="line"><input type="text" class="inputText" id="listCompany" value="公司名称" /></p>
<p class="line"><input type="text" class="inputText" id="listEmail" value="您的电话" /></p>
<p class="line"><input type="text" class="inputText" id="listTitle" value="项目主题" /></p>
<p class="line"><textarea class="textArea" id="listInfo">告诉我们您的项目基本信息</textarea></p>
<p class="line"><input type="button" class="inputBtn" value="立即提交" /></p>
</div>
</div>
<img id="listCloseBtn" src="Public/images/closeIcon.png" />
</div>
<!-- list over -->
<!-- banner -->
<div class="banner">
<div class="contents">
<a href="#">
<div class="content" style="background-image:url(Public/images/banner.jpg)">
<div class="contentInfo"></div>
</div>
</a>
<a href="#">
<div class="content" style="background-image:url(Public/images/banner.jpg)">
<div class="contentInfo"></div>
</div>
</a>
</div>
<img class="bannerBtn leftBtn" onclick="bannerBtnClick('-')" src="Public/images/index/bannerLeft.png" />
<img class="bannerBtn rightBtn" onclick="bannerBtnClick('+')" src="Public/images/index/bannerRight.png" />
<img class="bannerBg" src="Public/images/index/bannerBg.jpg" />
</div>
<!-- banner over -->
<!-- about -->
<div class="about">
<div class="container">
<p class="mainTitle">ABOUT BELLISSIMA</p>
<div class="mainSub"></div>
<span class="mainInfo">关于贝利丝玛</span>
<div class="content">
<p class="title">传承民族智慧 专注亚健康调理</p>
<p class="info">2011年，贝丽丝玛在天津成立，多年来致力于帮助国人远离亚健康的困扰，秉承中医民族治未病千年文化，以创建全亚洲健康调理第一品牌为目标，不断开拓创新，奋力前行。</p>
<div class="contentMun">
<div class="child">
<p class="mun"><span>20</span>W+</p>
<p>超过20W次服务经验</p>
</div>
<div class="child">
<p class="mun"><span>7</span>+</p>
<p>7年专业经历</p>
</div>
<div class="child">
<p class="mun">TOP<span>01</span></p>
<p>励志打造第一健康调理品牌</p>
</div>
</div>
<a href="#">
<div class="linkBtn">
<span>了解更多信息</span>
</div></a>
</div>
</div>
</div>
<!-- about over -->
<div class="xss">
<div class="about">
<div class="container Tisz">
<p class="mainTitle Tis"><img src="Public/images/top01.png"></p>
<span class="mainInfo" >亚洲医疗健康第一品牌</span>
</br>
<span class="mainInfo" style="border-bottom:2px solid #0d6898">Health The First Brand In Asia</span>
<div class="content">
<p class="title" ></p>
<p class="info">中国健康调理与医美结合开启美业届行业新纪元，解决亿万人亚健康困扰，创新与科技的不断融合，打造全亚洲健康第一品牌。</p>
<a href="#">
<div class="linkBtn">
<span>了解更多信息</span>
</div></a>
</div>
</div>
</div>
<div class="says">
<img width="100%" src="Public/images/by.jpg"/>
</div>
<div class="about" style="background:#086696">
<div class="container wn">
<p class="mainTitle">贝丽丝玛五大共享</p>
<div class="mainSub"></div>
<span class="mainInfo">BELLISSIMA FIVE SHARING</span>
<img width="100%" src="Public/images/ziyuan.jpg"/>
</div>
</div>
<div class="about sv">
<div class="container">
<p class="mainTitle">OUR FIGUIE</p>
<div class="mainSub"></div>
<span class="mainInfo">品牌形象</span>
<div class="child">
<div class="childTitle">
<b>BI</b>
<p class="titleCh">行为识别</p>
<p class="titleEn">Behavior Identity</p>
</div>
</div>
<div class="child">
<div class="childTitle">
<b>VI</b>
<p class="titleCh">视觉识别</p>
<p class="titleEn">Visual Identity</p>
</div>
</div>
<div class="child">
<div class="childTitle">
<b>SI</b>
<p class="titleCh">店铺形象设计</p>
<p class="titleEn">Space Identity</p>
</div>
</div>
</div>
</div>
</div>
<!-- work -->
<div class="work mks">
<p class="mainTitle">NEW VIDEO</p>
<div class="mainSub"></div>
<span class="mainInfo">品牌视频</span>
<!--<video id="my-video" class="video-js" controls preload="auto" width="100%" height="400" poster="m.png" data-setup="{}">
<source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
</video>
-->
</div>
<!-- work over -->
<!-- customer -->
<div class="customer mks">
<div class="container">
<p class="mainTitle">OUR PARTNER</p>
<div class="mainSub"></div>
<span class="mainInfo">我们的伙伴</span>
<div class="contents">
<div class="contentss">
<div class="content">
<a href="#"><img src="Public/images/baidu.png" /></a>
<a href="#"><img src="Public/images/360.png" /></a>
<a href="#"><img src="Public/images/bilibili.png" /></a>
<a href="#"><img src="Public/images/cctv.png" /></a>
<a href="#"><img src="Public/images/56.png" /></a>
<a href="#"><img src="Public/images/tudou.png" /></a>
<a href="#"><img src="Public/images/pptv.png" /></a>
<a href="#"><img src="Public/images/youku.png" /></a>
<a href="#"><img src="Public/images/leshi.png" /></a>
<a href="#"><img src="Public/images/iqiyi.png" /></a>
</div>
<div class="content">
<a href="#"><img src="Public/images/baidu.png" /></a>
<a href="#"><img src="Public/images/360.png" /></a>
<a href="#"><img src="Public/images/bilibili.png" /></a>
<a href="#"><img src="Public/images/cctv.png" /></a>
<a href="#"><img src="Public/images/56.png" /></a>
<a href="#"><img src="Public/images/tudou.png" /></a>
<a href="#"><img src="Public/images/pptv.png" /></a>
<a href="#"><img src="Public/images/youku.png" /></a>
<a href="#"><img src="Public/images/leshi.png" /></a>
<a href="#"><img src="Public/images/iqiyi.png" /></a>
</div>
</div>
</div>
<img class="customerBtn leftBtn" onclick="customerBtnClick('-')" src="Public/images/index/customerLeft.png" />
<img class="customerBtn rightBtn" onclick="customerBtnClick('+')" src="Public/images/index/customerRight.png" />
<a href="#">
<div class="linkBtn">
<span>查看更多合作伙伴</span>
</div></a>
</div>
</div>
<!-- customer over -->
<!-- say -->
<div class="say mks" style="background-image:url('Public/images/index/say.jpg')">
<div class="container">
<div class="sub su1"></div>
<p class="title1">贝丽丝玛价值观</p>
<p class="title">感恩 承诺 坚持 激情</p>
<p class="title tits">创新 责任 团队 合作</p>
</div>
</div>
<div class="new_say about mks">
<div class="container">
<div class="col-lg-4">
<img src="Public/images/senver.png"/>
</div>
<div class="col-lg-8">
<div class="tit">
<p class="textd title">7年之后还有<span style="color:#086696">n</span>个七年</p>
<p class="textd title tis" style="padding-bottom: 5px;">Seven years keep walking</p>
<p class="textnr info">2011年，贝丽丝玛首家门店问世，自此开启医美界新纪元，重新定义美丽与健康新界限，贝丽丝玛健康管理产业直营连锁事业盛大开启。从2011年至今，贝丽丝玛从一家直营店扩展到遍布全国各地，从一线运营部门到内职部门，全部做到统一化、规范化、系统化管理运营模式。</p>
<a href="#"><div class="linkBtn" style="margin:0"><span >查看更多合作伙伴</span></div></a>
</div>
</div>
</div>
</div>
<div class="say mks" style="background-image:url('Public/images/index/pai.jpg')">
<div class="container">
<p class="title1 titts"><img src="Public/images/index/pai01.png"/></p>
</div>
</div>
<!-- say over -->
<!-- service -->
<div class="service ">
<div class="container">
<p class="mainTitle">OUR FIGUIE</p>
<div class="mainSub"></div>
<span class="mainInfo">品牌形象</span>
<div class="content">
<div class="child">
<div class="childTitle">
<p class="titleEn">Behavior Identity</p>
<p class="titleCh">行为识别</p>
</div>
<div class="childContent">
<ul>
<li>行为准则</li>
<li>行为仪式</li>
<li>行为风俗</li>
<li>行为禁忌</li>
<li>行为识别</li>
</ul>
<ul>
<li>服务行为</li>
<li>管理行为</li>
<li>营销行为</li>
<li>传播行为</li>
<li>公关行为</li>
</ul>
</div>
</div>
<div class="child">
<div class="childTitle">
<p class="titleEn">Visual Identity</p>
<p class="titleCh">视觉行为</p>
</div>
<div class="childContent">
<ul>
<li>办公用品</li>
<li>产品包装</li>
<li>旗帜规划</li>
<li>公共关系</li>
<li> </li>
</ul>
<ul>
<li>服装服饰</li>
<li>运输工具</li>
<li>媒体广告</li>
<li>电子应用</li>
</ul>
</div>
</div>
<div class="child">
<div class="childTitle">
<p class="titleEn">Space Identity</p>
<p class="titleCh">店铺形象设计</p>
</div>
<div class="childContent">
<ul>
<li>办公招牌</li>
<li>店内空间</li>
<li>天花地板</li>
<li>照明系统</li>
<li> </li>
</ul>
<ul>
<li>配电系统</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- service over -->
<!-- news -->
<div class="news">
<div class="container">
<!-- left -->
<div class="left mks">
<p class="newsTitle">FIVE SHARING</p>
<p class="newsInfo">五大共享</p>
<div class="content">
<div class="quan" id="quan1">
<p class="titleEn"></p>
<p class="titleCh">教育共享</p>
</div>
<div class="quan" id="quan5">
<p class="titleEn"></p>
<p class="titleCh">财富共享</p>
</div>
<div class="quan" id="quan2">
<p class="titleEn"></p>
<p class="titleCh">系统共享</p>
</div>
<div class="quan" id="quan3">
<p class="titleEn"></p>
<p class="titleCh">品项共享</p>
</div>
<div class="quan" id="quan4">
<p class="titleEn"></p>
<p class="titleCh">人员共享</p>
</div>
</div>
</div>
<!-- left over -->
<!-- right -->
<div class="right">
<p class="newsTitle">BELLISSIMA News</p>
<p class="newsInfo">贝丽丝玛动态</p>
<div class="content">
<a href="Home/News/detail/news_id/566.html">
<div class="child">
<div class="childTime">
<p class="timeMonth">December</p>
<p class="timeDay">29</p>
</div>
<div class="childInfo">
<p class="title"> 血液干净身体才会健康，舌苔反应血液健康问题</p>
<p class="info">现在的人对健康比较关注了，但是，没有具体症状出现并且感到痛苦之前，很多人根本就意识不到自己有问题。从血液被污染到产生疾病往往经过很长一段时间。但是在这段时间里不是毫无预兆的...</p>
</div>
</div></a>
<a href="Home/News/detail/news_id/565.html">
<div class="child">
<div class="childTime">
<p class="timeMonth">November</p>
<p class="timeDay">28</p>
</div>
<div class="childInfo">
<p class="title">气血充足的人是什么样子的，反之呢？</p>
<p class="info">气血充盈的人，手一年四季都是温暖的，红润的，指腹饱满，肉多有弹性。气血充盈的人，半月形应该是除了小指都有大拇指上，半月形应占指甲面积的1/4~1/5，其它食指、中指、无名指应不超过1/5...</p>
</div>
</div></a>
<div class="child">
<div class="no"></div>
<div class="childInfo">
<a href="news.html">
<div class="moreBtn">
<span>更多信息</span>
</div></a>
</div>
</div>
</div>
</div>
<!-- right over -->
</div>
</div>
<!-- news over -->
<div class="xss">
<div class="about">
<div class="container Tisz">
<p class="mainTitle Tis"><img src="Public/images/60.jpg"></p>
<span class="mainInfo" style="font-weight:500;font-size:24px;" >超过60家合作伙伴共同支持</span>
<div class="content new_news">
<a href="#"><img src="Public/images/baidu.png" /></a>
<a href="#"><img src="Public/images/360.png" /></a>
<a href="#"><img src="Public/images/bilibili.png" /></a>
<a href="#"><img src="Public/images/cctv.png" /></a>
<a href="#"><img src="Public/images/tudou.png" /></a>
<a href="#"><img src="Public/images/pptv.png" /></a>
<a href="#"><img src="Public/images/youku.png" /></a>
<a href="#"><img src="Public/images/leshi.png" /></a>
<a href="#"><img src="Public/images/iqiyi.png" /></a>
</div>
<a href="#">
<div class="linkBtn">
<span>了解更多信息</span>
</div></a>
</div>
</div>
</div>
<!-- contact -->
<div class="contact">
<div class="container">
<p class="mainTitle">Are you interested in ?</p>
<p class="title">感兴趣吗？</p>
<div class="mainSub"></div>
<p class="info">有关我们服务的更多信息,请联系</p>
<p class="info">156 205 12538 朱女士/155 222 46684 杜女士</p>
</div>
</div>
<!-- contact over -->
<!-- footerNav -->
<div class="footerNav">
<div class="container">
<div class="right">
<p class="title">与我们<span>合作</span></p>
<p class="info">与贝丽丝玛合作，您会收获一个专业、“狼性”、团结的团队。我们已客户至上，同时也相互挑战，力求呈现最好的健康调理尊享服务。</p>
<p class="callTitle">客户服务热线：</p>
<p class="callMun">400 804 6884</p>
</div>
<div class="left">
<ul>
<li class="title">优 势</li>
<a href=""><li>品牌优势</li></a>
<a href=""><li>管理优势</li></a>
<a href=""><li>营销优势</li></a>
<a href=""><li>品项优势</li></a>
<a href=""><li>媒体优势</li></a>
</ul>
<ul>
<li class="title">服 务</li>
<a href=""><li>健康项目</li></a>
<a href=""><li>健康产品</li></a>
</ul>
<ul>
<li class="title">品 牌</li>
<a href=""><li>品牌简介</li></a>
<a href=""><li>品牌视频</li></a>
<a href=""><li>品牌历程</li></a>
<a href=""><li>团队风采</li></a>
<a href=""><li>品牌文化</li></a>
</ul>
<ul>
<li class="title">动 态</li>
<a href=""><li>企业资讯</li></a>
<a href=""><li>优惠活动</li></a>
</ul>
<ul>
<li class="title">合 作</li>
<a href=""><li>招聘信息</li></a>
<a href=""><li>加盟信息</li></a>
</ul>
<ul>
<li class="title">联 系</li>
<a href=""><li>联系方式</li></a>
<a href=""><li>位置地图</li></a>
<a href=""><li>留言板</li></a>
</ul>
</div>
</div>
</div>
<!-- footerNav over -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="left">
<div class="title">
<span class="titleB">Bellissima</span>
<span>贝丽丝玛健康管理中心</span>
</div>
<p class="titleEn">Copyright 2001-2018 All Rights Reserved Redwind design co.,ltd.</p>
<p class="info">Add：天津市南开区城厢中路758号盛金云9-2 <span> P.C：510650 </span></p>
<p class="info"><span>Tel：400-804-6884 </span> <span>E-mail：Bellissima2011.com </span><span><a href="#" target="_blank">津ICP备</a></span></p>
</div>
<div class="right">
<p class="title">关注我们：</p>
<a href="#" target="_blank">
<div class="child">
<img src="Public/images/weiboIcon.png" title=" 品牌官方微博" />
</div></a>
<div class="child" id="footChildCode">
<div class="childCode">
<img src="Public/upload/site/1432290251.jpg" />
</div>
<img src="Public/images/weixinIcon.png" title=" 品牌官方微信" />
</div>
<a href="#" target="_blank">
<div class="child no" id="BizQQWPA">
<img src="Public/images/qqIcon.png" border="0" title="品牌设计在线咨询" />
</div></a>
</div>
</div>
</div>
<!-- footer over -->
<!-- fixed -->
<!-- fixed over -->
<!-- js -->
<!-- js over -->
