分享一个简单好看的科技公司官网模板-纯HTML+CSS
2024-05-26 09:21:34
分享一个简单好看的科技公司官网模板-纯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>12345678@qq.com</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:12345678@qq.com"> <i class="i-mail"></i><h4>给我们发邮件</h4><p class="cway-txt">12345678@qq.com</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}}];//创建markerfunction 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);}})()}}//创建InfoWindowfunction 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;}//创建一个Iconfunction 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
分享一个简单好看的科技公司官网模板-纯HTML+CSS相关推荐
- web设计网页规划与设计：企业电子网站设计——简单的电子产品公司官网模板(5页)HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--简单的电子产品公司官网模板html(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 ...
- 网络科技公司官网源码网站建设官网建站公司模板
模板介绍: (电脑+手机端)[2023新版升级]高端大气网络科技公司官网源码网站建设官网企业建站小程序开发企业官源码 网站源码下载PbootCMS内核开发的网站模板,该模板适用于网站建设.小程序建设 ...
- 62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
- 分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
- 多用途app软件业务介绍官网模板
介绍: 一款蓝色渐变风格的app应用软件介绍,IT软件科技公司官网HTML模板. 它适用于所有创意的科技公司网站. 如Saas登陆.软件登陆.创意代理.企业业务.创意工作室.搜索引擎优化业务和现代商务 ...
- 最新多用途的APP软件业务介绍官网模板源码
正文: 最新多用途的APP软件业务介绍官网模板源码,一款蓝色渐变风格的app应用软件介绍,IT软件科技公司官网HTML模板. 它适用于所有创意的科技公司网站. 如Saas登陆.软件登陆.创意代理.企业 ...
- 一个html写的app首页,如何快速开发一个简单好看的APP控制页面
原标题:如何快速开发一个简单好看的APP控制页面 导读 机智云开源框架为了让开发者快速开发APP,已将用户登录,设备发现,设备配网等功能做成了各个标准模块,仅保留控制页面让开发者自行开发设计,节省了开 ...
- 手机语音翻译怎么做？分享一个简单办法，快速实现中英文语音对话
翻译分为文字翻译和语音翻译,文字翻译使用手机浏览器直接搜索就能完成,但实现语音翻译还是比较困难的,随着科技的发展,语音翻译用手机也能轻松实现了,就算进行中英文语音实时对话也是非常简单的事,那么手机该如 ...
- php运行socket服务器,PHP_php简单socket服务器客户端代码实例，本篇文章分享一个简单的socket - phpStudy...
php简单socket服务器客户端代码实例 本篇文章分享一个简单的socket示例,用php.实现一个接收输入字符串,处理并返回这个字符串到客户端的TCP服务. 产生一个 socket 服务端 /*文 ...
最新文章
- R语言效用分析 ( 效能分析、Power analysis)确定样本量、假设检验与两类错误、pwr包进行效用分析 ( 效能分析、Power analysis)的常用函数列表
- string的find和find_first_of的区别
- Linux screen如何加载用户配置
- socket编程listen函数限制连接数的解决方案_网络编程——服务器篇
- 'React/RCTBridgeDelegate.h' file not found
- approach for doing things
- U-Boot源码目录分析(VScode工程创建及文件夹过滤)
- Lock和synchronized的选择
- Django：ORM模型类，字段选项，Meta内部类，常见问题处理
- thinkphp学习笔记8—命名空间
- Proxy SwitchyOmega 使用黑名单和白名单
- Git 命令 checkout、reset、revert、reflog 、merge 使用介绍
- 【开发经验】通过ffmpeg进行视频剪辑
- MIMO与Beamforming技术学习
- 【数据挖掘】搜狐公司数据挖掘工程师笔试题
- 标鸽知产商标自助注册流程
- UDP聊天室（代码）
- EPICS -- areaDetector URL驱动程序
- python 合并word_Python 合并多个 Word 文件的 4 种方法
- qwin10如何删除linux系统,win 10内置了一个Linux子系统，以后使用Linux，不用那么麻烦了...