web前端毕业设计论文响应式企业网站设计与实现

摘要2015HTML5HTML5HTML减少开发成本。HTML5HTMLHTMLJavascriptjQuery种问题。HTML5关键词：HTML5;CSS3;响应式;javascript;网站美化;交互设计abstractInthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasbeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofinthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,use Javascript or jQuery to achieve the appropriate effects andinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon.Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目 录第一章 绪论 1本课题研究的背景和目的 1国内外HTML5响应式企业网站建设的状况 1本章小结 2第二章前端开发及相关技术 3HTML5前端开发环境 3HTML5前端开发工具 3HTML5前端开发相关技术 3javascript简介 3javascript基本特点 4css简介 4jQuery 5本章小结 5第三章前端布局分析与设计 6前端总体开发流程与设计 6分层开发 6代码编写 6内部测试与后续优化 6前端UI设计 7模块分布 7颜色配置 7css元素 8交互设计与UI 9网站结构布局与设计 9网站首页结构 9主题鲜明，富有特色 10网站前台页面设计 103.5.1 首页 103.5.2 其余子页面 103.7 本章小结 10第四章主要功能的实现 11界面设计 11具体设计文档 11前台新闻文摘显示 11网站装饰风格 11网站的链接结构 11可视化设计 11具体实现技术 12css在“写意集团响应式企业官网”中的应用实例 12本章小结 13第五章 总结 73致谢 73参考文献 75响应式企业网站设计与实现第一章 绪论本课题研究的背景和目的术的飞速生长，手机的上网率高于传统PC，而在手机端上，传统网站又难以做HTML5互去优化与用户沟通的过程。PC进行访问，体验空间层面上带来的开放性。CSS3与传统官网相比，响应式网站不外乎也是企业介绍，新闻发布，产品介绍一类等。为何还要花时间精力和人力去建立和维护网站呢？是正如上面所说：内容更加多姿多彩，板块，内容更加丰富，而且能够相应不同屏幕大小，在这个用手机多过PC的时代，能更好更快地将第一手信息送到用户手上。这些都促成了各个企业组织新的信息化建设，构建专业，易于维护和管理的网站。3PScss3；javascriptjQuery。这些都是开发中最基本的技能。前端开发HTML，cssjavascript国内外HTML512015，80AppHTML5。这意味着大部分AppFacebookTwitter(数据来源：国际科技媒体ReadWriteWeb，2015)21000H542%17,358,480uv;27%是测试题，最高49,940,339uv;15%是社交互动游戏，最高2,892,047uv;551,195uvh5n391FlashAFlash1HTML5

响应式企业网站设计与实现420CPM40H5用微信提供的模板，也可以自行定制。H5内外的几个社交平台。目前支持H5分享的平台：国内的微信、微博，国外有Facebook、Twitter、LinkedIn，当然每个平台分享的形式略有差异。各大主流H5HTML5H5现，H5H5案。所以各大企业官网转型做响应式也是势在必得的过程。本章小结本章阐述了开发企业响应式官网的研究背景和意义。介绍了国内外HTML5要性。2响应式企业网站设计与实现第二章 前端开发及相关技术HTML5HTML5HTML，HTML5的第五次重大修APIWebStorm。HTML5WebStormWebStormjetbrainsJavaScript“WebHTML5IntelliJIDEAIntelliJIDEAIE8下排版不乱，IE9整个网站的详细开发过程在后面将逐步具体介绍。PhotoshopAdobePhotoshop,简称“PS”,AdobeSystemsPhotoshopps视频、出版等各方面都有涉及。IEtesterIETesterWebBrowserWindowsVistaXPIE5.5IE6IE7IE8IE9IE10IE11JavaScriptIE5.5IE6IE7IE8IE9IE览器，用于观察兼容性。HTML5javascriptJavascript是一种直译式脚本语言。是一种动态类型、弱类型、基于原型的3响应式企业网站设计与实现语言，内置支持类型，具有自己独特的垃圾回收等机制，他的解释器被称为JavascriptjavascriptV8C++Javascript的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，HTML它的出现，起初只是进行简单的信息和用户之间的一种实时的，动态的，可CGIHTMLjavascriptHTML5，javascriptHTML5webAPPjavascriptjavascript（1) 基于对象的语言javascript简单性javascript没做严格的声明要求,而且javascriptJava使其设计简单紧凑安全性javascript动态交互。从而有效地防止数据的丢失。而且动态性java scriptWeb对应的事件程序响应。css标准通用标记语言的一个应用准通用标记语言的一个子集饰的，可以有效地对各个标签的样式进行统一的修改。CSS的全名中，Cascading有“层叠”的意思，也就是说在同一个web页面中可以同时存在多个样式表，但这些样式表中的样式，会根据他们所在的位置拥有不同的优先级优先级越高的就会在最终显示出来样式表插入方法分为3种：(1) 内联式样式表；(2)嵌入式样式表；(3)外部式样式表；CSSHTML，HTML，HTML，它只是一种辅助修饰页面的“工具”，除了可以扩展HTML4响应式企业网站设计与实现图片的使用率，方便管理样式表样式，设置公用样式，样式分类设置调用。CSSHTML，CSSCSS人群，有较强的易读性。jQueryJQueryprototypeJavascriptjs库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,OperaIE6/7/8jQueryHTML（标记语言下的一个应用events交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也jQueryhtmlhtmlhtmljsidjQueryjavascriptwriteless,domore(写得更少,做得更多)。jQuery20061JohnResigbarcampJavaScriptDaveMethvin，jQueryjavascript1000055jQuery。jQueryMITjQueryDOMAjaxAPI本章小结时讲述了相关的前端开发语言，比如：Javascript，css，Jquery后面的开发中对这些技术有深刻的理解5响应式企业网站设计与实现第三章前端布局分析与设计前端总体开发流程与设计WebJavascript，所以前端工程师不仅要掌握IEtext，googledebug，还要具有一定的沟通能力，协调美工设计与后台开发人员，还要掌握对象的编程思想，等等。分层开发根据项目内容的不同，划分出不同的功能模块，分步完成，以便合理地安排开发时间，在有限的时间内，有条理地完成模块和需要功能，减少时间的浪费，降低开发成本，提高开发效率。整个分层开发大致分为总体结构搭建，模块制作，页面设置制作，底层JS修复，代码优化。代码编写当总规划和设计图初稿完成后，就可以进入代码编写阶段，进行前期的HTMLjavascript多的时间对产品进行修改，优化和完善。确定了流程后，还需要对产品原型进行分析，研究，把复用性高的部分划分出来，重点标记，在以后的代码编写过程中，封装成一个复用组件，方便调用。并且根据二三级页面的设计布局，搭建统一的大致框架。（分页，字体样式等）w3c能等各方面的修改。HTMLCSS内部测试与后续优化前端内部测试，主要是观察页面与设计图的差异，优化页面细节样式，及时发现问题并且进行修改。并且利用IEtext查看页面的兼容性，当所有细节与兼容问题修改完毕后，就要对制作文件进行代码优化，尽可能的压缩文件大小和减少外部http的链接请求数，优化访问速度。该流程是参照公司开发流程制定出来的，以经过很长时间的磨合跟改进，6响应式企业网站设计与实现尽管虽然不是很完美，但是很适合我们现在开发这个项目的需求，优点也是很明显的，能更好的应对高强度，高质量的开发需求，代码更加容易控制和修改优化，充分利用时间，提高了开发侠侣前端UI模块分布UIUserInterface（用户界面）的简称。UIUI定位和特点。所以UI设计师设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。图3-1为写意集团响应式企业官网首页：图3-1 写意集团响应式企业官网首屏着陆页首页的logo还设计了一个动画，整个着陆页使用了一张满屏大图。颜色配置产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是000000redcolor:#FF0000color:#F00背景色大量六百，同时背景色要与文字的排列对比强烈一些。首页的顶端使用，满屏的图片下面用大量六百这两个部分过度的很自然。在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。73-2

响应式企业网站设计与实现图3-2网站首页导航字体颜色变化cssCSS块状元素(block)：CSS块状元素非常“霸道”， 总是另起一行开始，可对其设置高度宽度，行高等等，常用的有：div p table h1 ul dl 等等。CSS内联元素(inline):CSS内联元素和其它内联元素可以同时都在一行上；高度，行高以及顶底 边 距 不 可 改 变 ； 常 用 的 有 ：a strong font img input span small label等等CSS行内块状元素（inline-block）:Display:inline-block，该样式可将元素改为行内块状元素，将元素对象呈递为内联元素对象，但是元素对象的内容作为块对象元素呈递。旁边的内联对象元素会被呈递在同一行内，允许空格，即可以让元素同时拥有块状元素设置宽高行高等特性，同时也具有行内元素的同一行内显示。但对于这个属性不是所有浏览器都识别，兼容性较差，而且会留下默认的外边距，而且不能通过margin：0样式去掉，解决方法是利用浮动float来解决。CSS盒模型:网页设计中常听的属性名：内容 (content)、填充(padding)、边(border)、边界(margin)，CSS盒子模式都具备这些属性。（箱子日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。CSSCSS模型。内边距paddingpadding:10px5px15px;上右左下padding:10px15px;上右下左<divstyle="width:100px;padding:020px;">无标题文档</div>这个40pxmargin：围绕在元素边框的空白区域是margin题。最常用的就是div居中:margin:0auto;<divstyle=“width:200px;text-align:center;”><divstyle=“width:100px;”>无标题文档</div></div>这个属性是无法居中的，如图所示3-3所示：8响应式企业网站设计与实现交互设计与UI

3-3盒子模型务目标，获得愉快的用户体验。UIUI,UI视觉设计，更多是界面的外观静态设计。所以这种情况下，交互设计尤为重要，既不能失去UI设计的特性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术网站结构布局与设计网站首页结构50%～80%，20%。写意集团响应式企业官网网站主要用来进行公司信息发布，公司资源展示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。制作前台页面模块，包括主页及各个子页面，建立各个页面之间的相关链接，。整体网站遵循写意集团响应式企业官网网站的设计思路，拥有完善9响应式企业网站设计与实现的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。主题鲜明，富有特色在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。整个首页大量运用动画以及目前常用的简单却用户体验好的效果，要做下一定的印象。对于一些LOGOlogologo网站前台页面设计写意集团响应式企业官网主要包括：首页，关于写意，企业文化，新闻中心，人才招聘，联系我们等9个子页面。制作过程如下：首页Photoshop1920px，高度自动排列，Webstorm61920，1920宽度的时候，对其进行自适应满屏，并且因为要实现一个“滚一屏”效果，CSS文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO，版权。导航条又包含首页，关于写意，企业文化，新闻中心，人才招聘，联系我们等。其余子页面子页面的设计风格基本一致，导航栏跟随浏览器滚动，始终贴在浏览器窗口上方，下面是满屏幕宽度的banner图，下方便是各大模块内容的显示；制作过程中采用的制作方法和调用的模块内容跟上一个差不多3.7 本章小结UI10

响应式企业网站设计与实现界面设计字体：微软雅黑；行距：150%。联系我们。首页网站上中部：banner图片。网站底部：网站/版面制作；版权信息。其中网站的导航条会一路跟随屏幕滚动具体设计文档内容和功能设计这个企业网站主要实现企业信息展示，公告展示等功能。先明确各板块提供的主要功能：首页功能板块：旗下品牌（默认灰色，当鼠标移上去有一个变彩色的过程，起聚焦）；服务项目（默认灰色，当鼠标移上去有一个变彩色的过程，起聚焦）；服务领域（响应式九宫格，当鼠标移上去，图片会以中心点向外放大企业荣耀（静态数据，显示企业参与的项目）合作商家（logo版权（版权信息）子页面功能如子页面标题所示；前台新闻文摘显示网站装饰风格cssjavascript灵动。网站的链接结构校园网站的主要链接关系如下：首页，关于写意，企业文化，新闻中心，人才招聘，联系我们等其中关于写意，企业文化，新闻中心，有一个Javascript效果，整合在一个按钮上，用一个下拉方式展示可视化设计网站可视化设计的主要目的是提供给用户一个关于网站的信息展示方Web建立页面模型。11响应式企业网站设计与实现具体实现技术csscssCSS.serviceArea_mainulli:hoveraimg{transform:scale3d(1.1,1.1,1);-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);-o-transform:scale3d(1.1,1.1,1);-ms-transform:scale3d(1.1,1.1,1);position:relative;}.serviceArea_mainulli:hover.s_Area_gaip{transform-style:preserve-3d;}.serviceArea_mainulliaimg{transition:1s;top:0;left:0;z-index:9;width:100%;vertical-align:top;}CSSDIV，transform:scale3d(1.1,1.1,1);为控制图-webkit-，-moz-，-o-，-ms-前缀的样式，目的是transition:1s;改样式用于设定动画的过渡时间，如1.1倍；JavascriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具HTML脚本语言（Java）WebWebHTMLHTML[17]。JavaScript的出现使得信息和用户之间不仅只是一种显示和浏览的关[18]HTMLJavaScript用户的喜爱。它是众多脚本语言中较为优秀的一种，与WWW现了网络计算和网络计算机的蓝图。12响应式企业网站设计与实现Javascript的varoverTop=document.getElementById('top');overTop.onclick=function(){varoldScroll=getSt();tweenFn(-oldScroll);}functiongetSt(){returndocument.documentElement.scrollTop||document.body.scrollTop;}//滚动效果functiontweenFn(change,fn){varstart=getSt();varchange=change;vart=0;varendT=30;vartimer=setInterval(function(){t++;if(t>endT){clearInterval(timer);}else{varl=Tween.Cubic.easeIn(t,start,change,endT)document.documentElement.scrollTop=l;document.body.scrollTop=l;}},10);}toptween.js动画过程.由于首页内容偏长，故设计这一按钮，让用户能返回顶部进行浏览和操作。本章小结本章具体介绍了网站前端的实现，在动画效果的实现中给出了具体的代CSSjavascriptjavascriptIE8，IE913响应式企业网站设计与实现第五章部分项目源码首页HTML<headlang="en"><metacharset="UTF-8"><title>首页</title><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/style.css"/><linkrel="stylesheet"href="css/media.css"/><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/tween.js"></script><scriptsrc="js/scrollTopJQ.js"></script></head><body><!--容器层--><!--banner开始--><divid="banner"><divclass="logo"><imgsrc="imgs/logo-02.png"alt=""/><pclass="banner_tit">领先的数字展示方案提供商</p></div><divid="tab_box"><imgclass="img"src="imgs/index_banner.jpg"id="img"/><!--用来撑开高度的img--><divclass="view"id="view"><imgsrc="imgs/index_banner.jpg"alt=""style="opacity:1;filter:alpha(opacity=100)"/><imgsrc="imgs/index_banner2.jpg"alt=""/><imgsrc="imgs/index_banner.jpg"alt=""/><imgsrc="imgs/index_banner.jpg"alt=""/></div><ulclass="tab_btnclear"id="tab_btn"><liclass="btn_selecet"></li><li></li><li></li><liclass="last"></li></ul>14响应式企业网站设计与实现</div><aclass="to_bottom"id="to_bottom"><imgsrc="imgs/to_bottom.jpg"alt=""/></a></div><!--banner结束--><!--首页导航--><divclass="nav_mainclear"id="nav_main"><divclass="zy_navclear"><ulclass="nav_left"><li><ahref="index.html"class="nav_select">首页</a></li>id="menu_btn"/>

<liid="menu_li"><ahref="about.html">关于写意</a><imgsrc="imgs/nav_bg.png"alt=""<divclass="list_dragdown"style="display:none"id="menu"></a></li>

<divclass="listtop"></div><ulclass="clear"><li><ahref="fuli.html">企业文化<liclass="bordernone"><ahref="new.html">新闻中心</a></li></ul><divclass="listbottom"></div></div></li><li><ahref="http://6./">写意数字</a></li><li><ahref="http://3./">意凡设计</a></li><li><ahref="http://4./">BIM</a></li><li><ahref="###">写意展示</a></li><li><ahref="###">银河魔方</a></li><li><ahref="###">写意传播</a></li><li><ahref="recruitment.html">人才招聘</a></li><li class="last"><ahref="contact.html">联系我们</a></li></ul>15<!--隐藏的导航栏-->

响应式企业网站设计与实现<divid="nav_btn"><imgsrc="imgs/nav.png"/><ulid="yc_nav"><li><ahref="index.html">首页</a></li><li><ahref="about.html">关于写意</a></li><li><a写意数字</a></li><li><a意凡设计</a></li><li><ahref="http://4./"><li><ahref="">写意展示</a></li><li><ahref="">银河魔方</a></li><li><ahref="">写意传播</a></li><li><ahref="recruitment.html">人才招聘</a></li>

<li><ahref="contact.html">联系我们</a></li></ul></div><divclass="toprf"><imgsrc="imgs/goTop.png"alt=""id="top"/></div></div></div><!--首页导航结束--><!--b_detail<divclass="wrap"id="nav_bu"><divclass="gbrands"id="thegbrands"><divclass="gbrandTopclear"><divclass="title"><divclass="hrleft"></div><H6>旗下品牌</H6><p>GROUP'SBRANDS</p><divclass="hrright"></div></div></div><divclass="gbrands_mainclear"id="gbrands"><divclass="gbranditem"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg1src="imgs/table-logo.png"alt=""/><imgclass="imglogosrc="imgs/table-logo2.png"alt=""/><h5>写意数字</h5>16服务</p>

响应式企业网站设计与实现<p>为设计领域提供效果图、动画多媒体及三维互动业务<imgstyle="vertical-align:top"src="imgs/g_brands1.jpg"alt=""/></div><divclass="gbranditemgbranlast"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg2src="imgs/table-evon.png"alt=""/><imgclass="imglogosrc="imgs/table-evon2.png"alt=""/><h5>意凡设计</h5><p>室内创意设计及后期施工，为品牌解决全套室内装修</p><imgstyle="vertical-align:top"src="imgs/g_brands2.jpg"alt=""/></div><divclass="gbranditemclearMargin"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg3colors"src="imgs/table-bim.png"alt=""/><imgclass="imglogoimg3"src="imgs/table-bim2.png"alt=""/>

<h5>写意BIM</h5><p>建筑信息模型在建筑领域的操作应用及推广</p><imgstyle="vertical-align:top"src="imgs/g_brands3.jpg"alt=""/></div><divclass="gbranditemgbranlast"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>意展展示</h5><p>提供策划、设计及施工三环一体化解决方案</p><imgstyle="vertical-align:top"src="imgs/g_brands4.jpg"alt=""/></div><divclass="gbranditem"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>银河魔方</h5><p>影视制作、广告拍摄、影视项目策划</p><imgstyle="vertical-align:top"17响应式企业网站设计与实现src="imgs/g_brands5.jpg"alt=""/></div><divclass="gbranditemclearMarginR"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>写意传播</h5><p>企业品牌定位与策划、VI设计、整合营销服务</p><imgstyle="vertical-align:top"src="imgs/g_brands6.jpg"alt=""/></div></div></div><!--旗下品牌结束--><!--服务项目--><divclass="serviceitem"id="serviceitem1"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服务项目</H6><p>SERVICEITEMS</p><divclass="hrright"></div></div></div><ulclass="sitem_mainclear"id="serviceitem"><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item1.jpg"alt=""/><imgsrc="imgs/s_item11.jpg"class="img1"alt=""/>

<h4>效果图</h4><p>规划设计、公共建筑、商业建筑、居住建筑、景观设计、室内设计、灯光改造、手绘表现</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left">18响应式企业网站设计与实现<divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item2.jpg"alt=""/><imgsrc="imgs/s_item22.jpg"class="img1"alt=""/>案动画、设计方案演示</p>

<h4>多媒体动画</h4><p>企业宣传片、商业地产宣传片、设计方</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item3.jpg"alt=""/><imgsrc="imgs/s_item33.jpg"class="img1"alt=""/>

<h4>三维互动</h4>19家居三维互动系统</p>

响应式企业网站设计与实现<p>房产三维互动系统、工业三维互动系统、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item4.jpg"alt=""/><imgsrc="imgs/s_item44.jpg"class="img1"alt=""/>家居动画、医疗动画

<h4>产品动画说明书</h4><p>CG摄影、电子产品动画、工业机械动画、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div>20<divclass="sitem_con"><span>

响应式企业网站设计与实现class="img1"alt=""/>物馆、主题展馆

<imgsrc="imgs/s_item5.jpg"alt=""/><imgsrc="imgs/s_item55.jpg"<h4>展览展示</h4><p>线上展馆<br/>实体展馆：企业展馆、科技馆、文化馆、博</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item6.jpg"alt=""/><imgsrc="imgs/s_item66.jpg"class="img1"alt="">项目</div>

<h4>意凡设计</h4><p>商业空间、酒店/会所、办公空间、地产</p></span><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div>21响应式企业网站设计与实现</a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item7.jpg"alt=""/><imgsrc="imgs/s_item77.jpg"class="img1"alt=""/>

<h4>BIM</h4><p>BIM项目制作：信息化模型构建、碰撞检测&净高控制、管线综合、机电设备族库制作<br/>BIMBIMBIM</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item8.jpg"alt=""/><imgsrc="imgs/s_item88.jpg"class="img1"alt="">

<h4>影视广告</h4><p>企业专题片、纪录片、地产影视片微电影拍摄影视广告、TVC22制作</p></span></div>

响应式企业网站设计与实现电视剧/网剧制作、剧本创作评估拍摄艺人导演联络、影视发行<divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li></ul></div><!--服务项目结束--><!--服务领域--><divclass="serviceitem"id="serviceitem2"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服务领域</H6><p>SERVICEAREA</p><divclass="hrright"></div></div></div><divclass="serviceArea_main"id="s_item"><ulclass="row"><li><ahref="###"><divclass="s_Area_gai"><p>建筑设计领域</p></div><imgsrc="imgs/s_area1.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>城市地产领域</p></div><imgsrc="imgs/s_area2.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>影视广告领域</p></div><imgsrc="imgs/s_area3.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>医疗通信领域</p></div><imgsrc="imgs/s_area4.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>23响应式企业网站设计与实现物流港口领域</p></div><imgsrc="imgs/s_area5.jpg"alt=""/></a></li><liclass="lastlastt"><ahref="###"><divclass="s_Area_gai"><p>军事能源领域</p></div><imgsrc="imgs/s_area6.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>政府企业领域</p></div><imgsrc="imgs/s_area7.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>工业产品领域</p></div><imgsrc="imgs/s_area8.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>旅游开发领域</p></div><imgsrc="imgs/s_area9.jpg"alt=""/></a></li></ul></div></div><!--服务领域结束--><divid="serviceitem3"><!--企业荣誉--><divclass="serviceitem"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>企业荣誉</H6><p>ENTERPRISEHONOR</p><divclass="hrright"></div></div></div><divclass="honour_mainclear"><imgclass="h_img1"src="imgs/hlogo1.jpg"alt=""/>alt=""/>alt=""/>alt=""/>alt=""/>

<imgclass="h_img2"src="imgs/hlogo2.jpg"<imgclass="h_img3"src="imgs/hlogo3.jpg"<imgclass="h_img4"src="imgs/hlogo4.jpg"<imgclass="h_img5"src="imgs/hlogo5.jpg"<imgclass="h_img6clearMarginR"src="imgs/hlogo6.jpg"alt=""/></div>24响应式企业网站设计与实现</div><!--企业荣耀结束-->banner--><divclass="foot_banner"><imgsrc="imgs/banner2.jpg"alt=""/></div><!--第二张banner结束--></div><!--合作商家--><divclass="cooperation" id="serviceitem4"><divclass="cooperation_title"><H6><spanclass="c_left">-</span>合作商家<spanclass="c_right">-</span></H6></div><divclass="cooperation_main"><imgsrc="imgs/logo_pic.jpg"alt=""/></div></div><!--合作商家结束--></div><!--脚部信息--><divclass="footer_mainclear"><divclass="wrap"><divclass="footer_topclear"><divclass="footer_leftlf"><dl><dt>写意集团</dt><dd><ahref="###">关于写意</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">联系我们</a></dd></dl><dl><dt>写意数字</dt><dd><ahref="###">效果图</a></dd><dd><ahref="###">动画多媒体</a></dd><dd><ahref="###">三维互动</a></dd><dd><ahref="###">产品动画说明书</a></dd><dd><ahref="###">行业方案</a></dd><dd><ahref="###">关于我们</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">联系我们</a></dd>25</dl><dl><dt>意凡设计</dt>

响应式企业网站设计与实现费alt=""/>

<dd><ahref="###">关于我们</a></dd><dd><ahref="###">设计团队</a></dd><dd><ahref="###">项目案例</a></dd><dd><ahref="###">联系我们</a></dd></dl><dl><dt>写意BIM</dt><dd><ahref="###">概述</a></dd><dd><ahref="###">团队介绍</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">案例介绍</a></dd></dl><dl><dt>意展展示</dt><dd><ahref="###">关于意展</a></dd><dd><ahref="###">展馆工程</a></dd><dd><ahref="###">线上展馆体验</a></dd><dd><ahref="###">技术与创意</a></dd><dd><ahref="###">服务流程</a></dd><dd><ahref="###">人才招聘</a></dd></dl></div><divclass="footer_rightrf"><ahref="###"><imgsrc="imgs/info.jpg"alt=""/></a><imgclass="tel"src="imgs/tel.jpg"alt=""/><divclass="clear"></div><divclass="times">周一至周日9:00-18:00(仅收市话<div><imgclass="er"src="imgs/er.jpg"alt=""/><imgclass="weibo"src="imgs/weibo.jpg"</div></div></div><divclass="footer_bottom"><p>Copyright©1998-2015写意集团版权所有</p></div></div></div>26响应式企业网站设计与实现<!--脚部信息结束--></body><scripttype="text/javascript"src="js/main.js"></script><script>$.fn.extend({mousewheel:function(Fn){if(window.navigator.userAgent.indexOf("Firefox")>-1){$(this).get(0).addEventListener("DOMMouseScroll",wheel,false)}else{$(this).get(0).onmousewheel=wheel;}functionwheel(e){vardown=false;if(e.detail){down=e.detail>0;}else{down=e.wheelDelta<0;}//Fn(down,e)Fn.call($(this).get(0),down,e)//Fn.apply(obj,[down])if($(window).width()>1280)if(e.preventDefault){e.preventDefault();};returnfalse;}}}})$(window).on("load",function(){varindex=0;varmovebol=false;arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];$("#to_bottom").on("click",function ()if(movebol){return};27movebol=true;

响应式企业网站设计与实现$(window).sTopFn(arr[2],function ()index=2;movebol=false;});})setTimeout(function ()movebol=true;$(window).sTopFn(0,function ()movebol=false;})},30)$(window).mousewheel(function (down){if($(window).width()<1280)if(movebol){return};arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];movebol=true;if(down){index++;if(index>7){index=7;}}else{index--;if(index<0){index=0;};}$(window).sTopFn(arr[index],function ()movebol=false;//alert(movebol);})var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})28响应式企业网站设计与实现$("#nav_bu").css({"padding-top":"0"})}})window.onscroll=function (){var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})$("#nav_bu").css({"padding-top":"0"})}varoTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;varscrollTop=oTop;for(vari=0;i<arr.length;i++){if(scrollTop>=parseInt(arr[i])){index=i;};};//console.log(scrollTop);}})functionbanner(obj,dra){varview=document.getElementById(obj);varimg=view.getElementsByTagName('img');vartabBtn=document.getElementById(dra);varli=tabBtn.getElementsByTagName('li');varindex=0;varbol=false;for(vari=0;i<li.length;i++){vartemp=img[0];varold=li[0];li[i].index=i;li[i].onclick=function(){if(bol){return;}old.className="";29响应式企业网站设计与实现index=this.index;this.className="btn_selecet";if(temp==img[index]){return};opacityFn(0.02,2,img[index],temp);old=li[index];temp=img[index];}};//渐隐渐现functionopacityFn(num,numIe,obj,dra){bol=true;varo=0;varvarotemp=1;varotempIe=100;vartimer=setInterval(function(){o+=num;oIe+=numIe;otemp-=num;otempIe-=numIe;if(o>1||otemp<0){o=1;otemp=0;clearInterval(timer);bol=false;}obj.style.opacity=o;obj.style.filter="alpha(opacity="+oIe+")";dra.style.opacity=otemp;dra.style.filter="alpha(opacity="+otempIe+")";},30)}}banner('view','tab_btn');$sitem=$("#s_item").find("li");$sitem.mouseenter(function(){})30响应式企业网站设计与实现$(".gbranditem").hover(function (){$(this).find(".img1:eq(1)").fadeOut(100)$(this).find(".colors").fadeIn();},function (){$(this).find(".colors").fadeOut(100);$(this).find(".img1:eq(1)").fadeIn()})var$menu=$("#menu");$("#menu_li").hover(function (){$menu.show();},function (){$menu.hide();})</script>首页CSS.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}#wrap{width:1366px;margin:0auto;overflow:hidden;}.nav_main{width:82.72%;margin:0auto;}.nav_left{width:87.34%;31响应式企业网站设计与实现}.nav_lefta{color:#626262;float:left;font-size:14px;padding:39px45px39px0;}.nav_left.nav_select{color:#d6000f;}.top{padding-top:27px;width:7.25%;vertical-align:middle;}.topimg{cursor:pointer;width:100%;}.nav_dragdown{position:relative;background:url("../imgs/nav_bg.jpg")no-repeat60pxcenter;}.list_dragdown{top:70px;left:26px;text-align:center;position:absolute;border:1pxsolidborder-width:1px1px01px;}.listtop{margin-top:-6px;width:76px;height:6px;background:url("../imgs/list_top.jpg")no-repeat;}.listbottom{background:url("../imgs/list_bottom.png")no-repeat;position:absolute;width:76px;height:2px;bottom:-2px;}32响应式企业网站设计与实现.list_dragdownli{color:#626262;padding:10px0;margin:012px;border-bottom:1pxsolid#e5e5e5;}.list_dragdownborder:none;}@charset"utf-8";/*CSSDocument*//*@font-face{font-family:'FZLTCXHJW';src:url('../font/FZLTCXHJW.TTF');font-weight:normal;font-style:normal;}*/img{border:none;}body{font-size:12px;}/*首页*/.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}.wrap{33响应式企业网站