分享一个简单好看的科技公司官网模板-纯HTML+CSS
首页：
首页的HTML源码部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高端炫酷IT网络建站公司网站模板</title>
<meta name="description" content="网站描述" />
<meta name="keywords" content="关键词" />
<meta name="author" content="order by" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" type="text/css" href="style/css/style_2_common.css" />
<link rel="stylesheet" type="text/css" href="style/css/style_2_portal_index.css" />
<script src="style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="style/js/common.js" type="text/javascript"></script>
<script src="style/js/pace.js" type="text/javascript"></script>
<link href="style/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="nv_portal" class="pg_index">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div id="toptb" class="cl" style="display:none;"> </div>
<div id="hd" style="background:#FFF; height:60px; border-bottom:1px solid #E6E6E6; ">
<div class="clear"></div>
<div id="week_nav">
<div class="wk_navwp">
<div class="wk_lonav">
<div class="wk_logo">
<h2><a href="index.html" title=""><img src="style/images/logo.png" alt="" border="0" /></a></h2>
</div>
<div class="wk_inav">
<ul class="nav">
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html" >关于我们</a></li>
<li><a href="news.html" >新闻资讯</a></li>
<li><a href="case.html" >项目案例</a></li>
<li><a href="wenti.html" >常见问题</a></li>
<li><a href="contact.html" >联系我们</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="mu" class="cl">
<div class="wp"> </div>
</div>
<script src="style/js/week_nav.js" type="text/javascript"></script>
<div id="wp" class="wp">
<script src="style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="style/js/jquery.fullpage.min.js" type="text/javascript"></script>
<script src="style/js/scoll.js" type="text/javascript"></script>
<script src="style/js/addons.js" type="text/javascript"></script>
<script src="style/js/case.js" type="text/javascript"></script>
<script src="style/js/tab.lib.js" type="text/javascript"></script>
<script type="text/javascript">
PTM(document).ready(function(){
PTM(".wk_about").tab({
tabId:"#wk_about_menu",tabTag:"a",conId:"#wk_about_div",conTag:"div.wk_aaa",act:"mouseover",effact: "scrollx",dft:0
});
});
</script>
</div>
<div class="clear"></div>
<div class="wk_index_main">
<!--page1-->
<div class="section page1">
<div class="wk_slide-wrap">
<ul>
<li id="wk_s1" class="wk_selected">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner13"><img src="style/images/banner13.png" alt="" /></div>
<div class="wk_banner12"><img src="style/images/banner12.png" alt="" /></div>
<div class="wk_banner14"><img src="style/images/banner14.png" alt="" /></div>
</div>
</li>
<li id="wk_s2">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner22"><img src="style/images/banner22.png" alt="" /></div>
<div class="wk_banner23"><img src="style/images/banner23.png" alt="" /></div>
<div class="wk_banner24"><a href="#" target="_blank">了解更多</a></div>
</div>
</li>
<li id="wk_s3">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner32"><img src="style/images/banner32.png" alt="" /></div>
<div class="wk_banner33"><img src="style/images/banner33.png" alt="" /></div>
</div>
</li>
</ul>
</div>
<div class="wk_arrow"><a href="#service"><img src="style/images/ico3.png" /></a></div>
<div class="wk_slide-nav-wrap">
<div id="wk_slide-nav">
<ul>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container active" data-index="0"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">高端定制开发</div>
</a></li>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container" data-index="1"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">互联网整合营销</div>
</a></li>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container" data-index="2"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">响应式网站</div>
</a></li>
<li class="wk_nav-line"> </li>
</ul>
</div>
</div>
</div>
<!--page2-->
<div class="section page2">
<div class="wk_fwxm">
<ul>
<li class="wk_li1">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>高端网站设计制作</h2>
<p>DESIGN CUSTOM</p>
<div class="wk_fwxm_des">团队凭借多年的行业经验为企业量身定制，让您的企业在残酷的网络竞争中脱颖而出，立于不败之地。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li2">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>网络运营与推广</h2>
<p>NETWORK OPERATIONS</p>
<div class="wk_fwxm_des">专注于高品质网络品牌运营推广服务，在网络中树立企业品牌形象，提高搜索关键词转换率，以及多终端广告展现！</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li3">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>HTML5响应式网站开发</h2>
<p>RESPONSIVE WEBSITE</p>
<div class="wk_fwxm_des">HTML5+CSS3设计制作的同时兼容手机和IPAD等触屏设备分辨率，达到最优访问效果，网站数据同步各终端。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li4">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>移动端手机网站与APP</h2>
<p>MOBILE WEBSITE</p>
<div class="wk_fwxm_des">专注移动端手机网站设计、微网站、手机APP定制开发，创造有活力的品牌网站，在移动互联网市场中取得先机。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
</ul>
</div>
</div>
<!--page3-->
<div class="section page3">
<div class="case">
<h2><img src="style/images/case_title.png" alt="" /></h2>
<h2 class="wk_h2"><img src="style/images/case_title1.png" alt="" /></h2>
<div class="wk_btndiv"> <a class="abtn aleft" href="javascript:void(0);"></a> <a class="abtn aright" href="javascript:void(0);"></a> </div>
<div class="wk_scrollcontainer">
<ul>
<li>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="Jackery app">
<div class="wk_case_img"><img src="uploads/1-1F31G05F1913-lp.jpg" width="275" height="190" alt="Jackery app"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="为律生活打造在线法律服务平">
<div class="wk_case_img"><img src="uploads/1-1F31G05524557-lp.jpg" width="275" height="190" alt="为律生活打造在线法律服务平"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="优品汇手机助手">
<div class="wk_case_img"><img src="uploads/1-1F31G054451A-lp.jpg" width="275" height="190" alt="优品汇手机助手"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="我开始健身pad端app">
<div class="wk_case_img"><img src="uploads/1-1F31G054123I-lp.jpg" width="275" height="190" alt="我开始健身pad端app"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="四维图新 - 趣逛地图">
<div class="wk_case_img"><img src="uploads/1-1F31G05244325-lp.jpg" width="275" height="190" alt="四维图新 - 趣逛地图"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="硅谷明星教育团队米豆教育">
<div class="wk_case_img"><img src="uploads/1-1F31G05144R2-lp.jpg" width="275" height="190" alt="硅谷明星教育团队米豆教育"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="携手正量网开创工程建设电商">
<div class="wk_case_img"><img src="uploads/1-1F31G05040124-lp.jpg" width="275" height="190" alt="携手正量网开创工程建设电商"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="vivo Xplay5双曲面屏">
<div class="wk_case_img"><img src="uploads/1-1F3161T2144V-lp.jpg" width="275" height="190" alt="vivo Xplay5双曲面屏"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
</li>
<li>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="零担速配APP案例">
<div class="wk_case_img"><img src="uploads/1-1F3161T0133Y-lp.jpg" width="275" height="190" alt="零担速配APP案例"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
</li>
</ul>
<!--首页-案例-内部调用代码设置位置-->
</div>
</div>
<script type="text/javascript">
PTM(function(){
PTM(".case").Xslider({
unitdisplayed:1,
numtoMove:1,
speed:500,
scrollobjSize:Math.ceil(PTM(".uldiv").find("li").length*1)
})
})
</script>
</div>
<!--page4-->
<div class="section page4">
<div class="wk_about">
<h2><img src="style/images/about_title.png" alt="" /></h2>
<h2 class="wk_h2"><img src="style/images/about_title1.png" alt=""/></h2>
<div class="wk_about_menu" id="wk_about_menu"><a class="active">简介</a><a>动态</a><a>历程</a></div>
<div class="wk_about_div" id="wk_about_div">
<div class="wk_about_main wk_aaa">
<div class="wk_about_left"><img src="style/images/about_img.png" alt="" /></div>
<div class="wk_about_right">
<div class="wk_about_top"> <a><img src="style/images/about_ico1.png" alt="" /></a> <a><img src="style/images/about_ico2.png" alt="" /></a> <a><img src="style/images/about_ico3.png" alt="" /></a> <a style="margin-right:0;"><img src="style/images/about_ico4.png" alt="" /></a>
<div class="clear"></div>
</div>
<div class="wk_about_des"> 自成立以来，一直专注于互联网品牌建设，我们团队的成员曾务于国内优秀广告公司及互联网公司业务类型涉及WEB视觉、交互设计、移动终端用户体验等质量和信誉是我们存在的基石。我们注重客户提出的每个要求，充分考虑每一个细节，积极的做好服务，努力开拓更好的视野。我们永远不会因为我们曾经的成绩而满足。在所有新老客户面前，我们都很乐意虚心、朴实的跟您接触，更深入的了解您的企业，以便为您提供更优质的服务！ 我们的服务宗旨:持续为客户创造最优质的服务 感...
</div>
</div>
</div>
<div class="wk_news_list wk_aaa">
<ul>
<li >
<dl>
<dt>2017-03-17</dt>
</dl>
<h4><a href="newsshow.html" title="放任是最大的不信任，人一旦" target="_blank">放任是最大的不信任，人一旦</a></h4>
<div class="wk_news_des">才建设是组织发展的重要环节，有人说现代企业间的竞争就是人才的竞争，可见人才培养的重要性。但现实中很多主管领导认为人才培养工作只是人力资源...</div>
<div class="wk_news_more"><a href="newsshow.html" title="阅读更多" target="_blank"></a></div>
</li>
<li >
<dl>
<dt>2017-03-17</dt>
</dl>
<h4><a href="newsshow.html" title="从问题中做分析，产品才能准" target="_blank">从问题中做分析，产品才能准</a></h4>
<div class="wk_news_des">是到底要解决什么问题(没问题存在的需求都是伪需求)? 这个问题是不是特别严重?有没有详细的场景描述(XXX时，特别讨厌做XXX，要是XXX就好了)? 有多少用户...</div>
<div class="wk_news_more"><a href="newsshow.html" title="阅读更多" target="_blank"></a></div>
</li>
<li >
<dl>
<dt>2017-03-17</dt>
</dl>
<h4><a href="newsshow.html" title="互联网时代下，做营销更多是" target="_blank">互联网时代下，做营销更多是</a></h4>
<div class="wk_news_des">一个有故事的人似乎会更有吸引力，起码别人都有点兴趣去了解他背后的故事是什么。同样，一个有故事的企业，也会被某种吸引力笼罩，做起生意来更加...</div>
<div class="wk_news_more"><a href="newsshow.html" title="阅读更多" target="_blank"></a></div>
</li>
<li >
<dl>
<dt>2017-03-16</dt>
</dl>
<h4><a href="newsshow.html" title="没格局的努力都是在浪费时间" target="_blank">没格局的努力都是在浪费时间</a></h4>
<div class="wk_news_des">我们都知道：有用的社交一定是势均力敌的，处于同等段位的人，才能平等地对话；小菜鸟跟大咖本来就不是一国的，很多时候你以为的热络也只不过是你...</div>
<div class="wk_news_more"><a href="newsshow.html" title="阅读更多" target="_blank"></a></div>
</li>
</ul>
<!--首页-新闻动态-内部调用代码设置位置-->
</div>
<div class="wk_history wk_aaa">
<div class="wk_blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a>
<div class="wk_pcont" id="ISL_Cont_11">
<div class="ScrCont">
<div id="List1_1">
<div id="List1_1">
<div class="wk_fzlc_s">
<h4>2009年11月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img1.jpg"></dt>
<dd>2009年，三个热爱设计工作的年轻人成立了周末网页设计工作室...</dd>
</dl>
</div>
<div class="wk_fzlc_b">
<h4>2009年5月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img2.jpg"></dt>
<dd>经过近两年来不断的创新探索和稳定发展,逐渐积累了丰富的客户资源，至今已服务客户300余家
...</dd>
</dl>
</div>
<div class="wk_fzlc_s">
<h4>2010年7月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img3.jpg"></dt>
<dd>随着人员和客户资源的不断增加，逐步以公司的模式进行运营...</dd>
</dl>
</div>
<div class="wk_fzlc_b">
<h4>2012年12月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img4.jpg"></dt>
<dd>服务客户已超过600余家，公司产品研发力度持续增强，手机网站和PC客户端、移动互联网...</dd>
</dl>
</div>
<div class="wk_fzlc_s">
<h4>2013年10月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img5.jpg"></dt>
<dd>公司更名为技术有限公司，并与众多知名企业进行合作...</dd>
</dl>
</div>
<div class="wk_fzlc_b">
<h4>2014年5月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img6.jpg"></dt>
<dd>与上海某某软件公司合并，打造集网站、APP与软件开发为一体的综合型科技产业公司...</dd>
</dl>
</div>
<div class="wk_fzlc_s">
<h4>2015年2月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img7.jpg"></dt>
<dd>与铭艺影视传媒公司合作，共同为客户提供互联网影视传媒服务...</dd>
</dl>
</div>
<div class="wk_fzlc_b">
<h4>2015年10月</h4>
<div class="wk_his_ico"></div>
<dl>
<dt><img src="style/images/history_img8.jpg"></dt>
<dd>致力于互联网+服务，打造品牌设计建设与网络推广营销综合服务新模式，更好的为客户提供全方位的互联网服务...</dd>
</dl>
</div>
</div>
<!--首页-发展历程-内部调用代码设置位置-->
</div>
<div id="List2_1"></div>
</div>
</div>
<a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div>
<div class="c"></div>
</div>
</div>
</div>
</div>
<!--page5-->
<div class="section page5">
<div class="wk_service">
<h2><img src="style/images/service_title.png" alt="" /></h2>
<h2 class="wk_h2"><img src="style/images/service_title1.png" alt="" /></h2>
<div class="wk_service_xian"></div>
<div class="wk_service_main">
<ul>
<li> <img src="style/images/service_img1.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img2.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img3.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img4.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img5.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img6.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img7.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img8.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img9.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img10.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img11.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img12.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img13.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img14.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
<li> <img src="style/images/service_img15.png" alt="" /> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </li>
</ul>
<!--首页-合作客户-内部调用代码设置位置-->
</div>
</div>
</div>
<!--page6-->
<div class="section page6">
<div class="wk_contact">
<div class="wk_contact_left"><img src="style/images/contact_img.png" alt="" /></div>
<div class="wk_contact_left1"><img src="style/images/contact_img1.png" alt="" /></div>
<div class="wk_contact_right">
<h2><img src="style/images/contact_title.png" alt="" /></h2>
<ul class="wk_cont_div">
<li class="wk_serve-ico-kf">业务咨询：<span class="wk_cont_a"><img src="style/images/cont_a.png" /></span><a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank">12345678 【点击咨询】</a></li>
<li class="wk_serve-ico-kf">技术服务：<span class="wk_cont_a"><img src="style/images/cont_a.png" /></span><a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank">12345678 【点击咨询】</a></li>
<li><span class="wk_cont_c"></span>[email protected]</li>
<li><span class="wk_cont_d"></span>江苏省南京市玄武区玄武湖</li>
</ul>
</div>
</div>
</div>
<!--index_footer-->
<div class="section fp-auto-height">
<div class="wk_footer_side">
<div class="wk_footer">Copyright © 2017 17sucai.com <a title="baidu" href="#" target="_blank">技术支持：</a> 备案号：<a href="http://www.miitbeian.gov.cn/" target="_blank" title="苏ICP12345678">苏ICP12345678</a> <br />
友情链接：<a href='http://www.17sucai.com/' target='_blank'>网页特效</a> <a href='http://www.17sucai.com/' target='_blank'>中文模板</a> <a href='http://www.17sucai.com/' target='_blank'>织梦模板</a> <a href='http://www.17sucai.com/' target='_blank'>discuz模板</a> <a href='http://www.17sucai.com/' target='_blank'>手机网站模板</a> <a href='http://www.17sucai.com/' target='_blank'>网站模板</a> <a href='http://www.17sucai.com/' target='_blank'>网站源码</a> <a href='#' target='_blank'>图标下载</a> <a href='#' target='_blank'>仿站</a> </div>
</div>
</div>
</div>
<script src="style/js/banner.js" type="text/javascript"></script>
<div class="clear"></div>
<div class="wp"><!--[diy=diy1]-->
<div id="diy1" class="area"></div>
<!--[/diy]--></div>
<div class="clear"></div>
<div id="wp" class="wp"> </div>
<div id="wk_ft" style="display:none; ">
<div id="ft" class="wp cl" style="border:0;"> </div>
</div>
<ul id="scbar_type_menu" class="p_pop" style="display: none;">
</ul>
<link href="style/css/service.css" rel="stylesheet" type="text/css" />
<div class="main-im">
<div id="open_im" class="open-im"> </div>
<div class="im_main" id="im_main">
<div id="close_im" class="close-im"><a href="javascript:void(0);" title="点击关闭"> </a></div>
<a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank" class="im-qq qq-a" title="在线QQ客服">
<div class="qq-container"></div>
<div class="qq-hover-c"><img class="img-qq" src="style/images/qq.png"></div>
<span>QQ在线咨询</span> </a>
<div class="im-tel">
<dt>售前咨询热线</dt>
<dt class="tel-num">4008-888-888</dt>
<dt>售后服务热线</dt>
<dt class="tel-num">158-8888-8888</dt>
</div>
<div class="im-footer" style="position:relative">
<div class="weixing-container">
<div class="weixing-show">
<div class="weixing-txt">微信扫一扫<br>
关注我们<br>
获取更多精彩风格</div>
<img class="weixing-ma" src="style/images/weixin.jpg">
<div class="weixing-sanjiao"></div>
<div class="weixing-sanjiao-big"></div>
</div>
</div>
<div class="go-top"><a href="#" title="返回顶部"></a> </div>
<div style="clear:both"></div>
</div>
</div>
</div>
<script type="text/javascript">
PTM(document).ready(function(){
PTM('#close_im').bind('click',function(){
PTM('#main-im').css("height","0");
PTM('#im_main').hide();
PTM('#open_im').show();
});
PTM('#open_im').bind('click',function(e){
PTM('#main-im').css("height","272");
PTM('#im_main').show();
PTM(this).hide();
});
PTM(".weixing-container").bind('mouseenter',function(){
PTM('.weixing-show').show();
})
PTM(".weixing-container").bind('mouseleave',function(){
PTM('.weixing-show').hide();
});
});
</script>
<script src="style/js/home.js" type="text/javascript"></script>
<div id="scrolltop"> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span> </div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<div id="discuz_tips" style="display:none;"></div>
<script src="style/js/discuz_tips.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>
关于我们：
新闻资讯
项目案例
常见问题
联系我们
部分HTML源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联系我们_高端炫酷IT网络建站公司网站模板</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" type="text/css" href="style/css/style_2_common.css" />
<link rel="stylesheet" type="text/css" href="style/css/style_2_portal_list.css" />
<script src="style/js/common.js" type="text/javascript"></script>
<script src="style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="style/js/pace.js" type="text/javascript"></script>
<link href="style/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<body id="nv_portal" class="pg_list pg_list_1 pg_list_6">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div id="toptb" class="cl" style="display:none;"> </div>
<div id="hd" style="background:#FFF; height:60px; border-bottom:1px solid #E6E6E6; ">
<div class="clear"></div>
<div id="week_nav">
<div class="wk_navwp">
<div class="wk_lonav">
<div class="wk_logo">
<h2><a href="index.html" title=""><img src="style/images/logo.png" alt="" border="0" /></a></h2>
</div>
<div class="wk_inav">
<ul class="nav">
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html" >关于我们</a></li>
<li><a href="news.html" >新闻资讯</a></li>
<li><a href="case.html" >项目案例</a></li>
<li><a href="wenti.html" >常见问题</a></li>
<li><a href="contact.html" >联系我们</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="mu" class="cl">
<div class="wp"> </div>
</div>
<script src="style/js/week_nav.js" type="text/javascript"></script>
<div id="wp" class="wp">
<style id="diy_style" type="text/css">
#frameyd1cLA { border:0px !important;margin:0px !important;}#portal_block_18 { border:0px !important;margin:0px !important;}#portal_block_18 .dxb_bc { margin:0px !important;}#framep2n1bg { border:0px !important;margin:0px !important;}#portal_block_19 { border:0px !important;margin:0px !important;}#portal_block_19 .dxb_bc { margin:0px !important;}#frameHCV83Y { border:0px !important;margin:0px !important;}#portal_block_20 { border:0px !important;margin:0px !important;}#portal_block_20 .dxb_bc { margin:0px !important;}#framelo3Fmy { border:0px !important;margin:0px !important;}#portal_block_21 { border:0px !important;margin:0px !important;}#portal_block_21 .dxb_bc { margin:0px !important;}
</style>
<link href="style/css/about.css" rel="stylesheet" type="text/css" />
</div>
<div class="wk_list_box wk_list_box3"> </div>
<div class="clear"></div>
<div class="week_contact">
<div class="week_container">
<ul class="contact-ways">
<li> <a href="tel:400-500-8899"> <i class="i-phone"></i>
<h4>给我们打电话</h4>
<p class="cway-txt">4008-888-888</p>
</a> </li>
<li> <a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes"> <i class="i-qq"></i>
<h4>QQ在线联系</h4>
<p class="cway-txt">4008-888-888</p>
</a> </li>
<li> <a href="Mailto:[email protected]"> <i class="i-mail"></i>
<h4>给我们发邮件</h4>
<p class="cway-txt">[email protected]</p>
</a> </li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="week_weixin">
<div class="week_container">
<h3>关注微信</h3>
<p>扫一扫二维码，关注我们的微信公众号</p>
<p class="week_weixin-p"><img src="style/images/weixin.jpg" /></p>
</div>
</div>
<div class="clear"></div>
<div class="week_map">
<div id="allmap">
<div style="width:100%;height:520px;" id="dituContent"></div>
</div>
<div class="mark-info">
<h4>江苏省南京市玄武区玄武湖</h4>
<p>Mobile：158-8888-8888</p>
</div>
</div>
<div class="clear"></div>
<div id="wp" class="wp">
<div class="wp"><!--[diy=diy1]-->
<div id="diy1" class="area"></div>
<!--[/diy]--></div>
<!--[diy=listcontenttop]-->
<div id="listcontenttop" class="area"></div>
<!--[/diy]-->
<div class="clear"></div>
<!--[diy=diycontentbottom]-->
<div id="diycontentbottom" class="area"></div>
<!--[/diy]-->
<div class="wp mtn">
<!--[diy=diy3]-->
<div id="diy3" class="area"></div>
<!--[/diy]-->
</div>
</div>
<div id="wk_ft">
<div class="section fp-auto-height">
<div class="wk_footer_side">
<div class="wk_footer">Copyright © 2017 17sucai.com <a title="baidu" href="#" target="_blank">技术支持：</a> 备案号：<a href="http://www.miitbeian.gov.cn/" target="_blank" title="苏ICP12345678">苏ICP12345678</a> <br />
友情链接：<a href='http://www.17sucai.com/' target='_blank'>网页特效</a> <a href='http://www.17sucai.com/' target='_blank'>中文模板</a> <a href='http://www.17sucai.com/' target='_blank'>织梦模板</a> <a href='http://www.17sucai.com/' target='_blank'>discuz模板</a> <a href='http://www.17sucai.com/' target='_blank'>手机网站模板</a> <a href='http://www.17sucai.com/' target='_blank'>网站模板</a> <a href='http://www.17sucai.com/' target='_blank'>网站源码</a> <a href='#' target='_blank'>图标下载</a> <a href='#' target='_blank'>仿站</a> </div>
</div>
</div>
</div>
</div>
<ul id="scbar_type_menu" class="p_pop" style="display: none;">
</ul>
<link href="style/css/service.css" rel="stylesheet" type="text/css" />
<div class="main-im">
<div id="open_im" class="open-im"> </div>
<div class="im_main" id="im_main">
<div id="close_im" class="close-im"><a href="javascript:void(0);" title="点击关闭"> </a></div>
<a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank" class="im-qq qq-a" title="在线QQ客服">
<div class="qq-container"></div>
<div class="qq-hover-c"><img class="img-qq" src="style/images/qq.png"></div>
<span>QQ在线咨询</span> </a>
<div class="im-tel">
<dt>售前咨询热线</dt>
<dt class="tel-num">4008-888-888</dt>
<dt>售后服务热线</dt>
<dt class="tel-num">158-8888-8888</dt>
</div>
<div class="im-footer" style="position:relative">
<div class="weixing-container">
<div class="weixing-show">
<div class="weixing-txt">微信扫一扫<br>
关注我们<br>
获取更多精彩风格</div>
<img class="weixing-ma" src="style/images/weixin.jpg">
<div class="weixing-sanjiao"></div>
<div class="weixing-sanjiao-big"></div>
</div>
</div>
<div class="go-top"><a href="#" title="返回顶部"></a> </div>
<div style="clear:both"></div>
</div>
</div>
</div>
<script type="text/javascript">
PTM(document).ready(function(){
PTM('#close_im').bind('click',function(){
PTM('#main-im').css("height","0");
PTM('#im_main').hide();
PTM('#open_im').show();
});
PTM('#open_im').bind('click',function(e){
PTM('#main-im').css("height","272");
PTM('#im_main').show();
PTM(this).hide();
});
PTM(".weixing-container").bind('mouseenter',function(){
PTM('.weixing-show').show();
})
PTM(".weixing-container").bind('mouseleave',function(){
PTM('.weixing-show').hide();
});
});
</script>
<script src="style/js/home.js" type="text/javascript"></script>
<div id="scrolltop"> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span> </div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<div id="discuz_tips" style="display:none;"></div>
<script src="style/js/discuz_tips.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(118.811012,32.080156);//定义一个中心点坐标
map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
}
//标注点数组
var markerArr = [{title:"南京市某某网络科技有限公司",content:"江苏省南京市玄武区玄武湖",point:"118.811012|32.080156",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//创建和初始化地图
</script>
</body>
</html>
完整项目：https://download.csdn.net/download/Highning0007/87609558