web前端毕业设计论文_第1页
web前端毕业设计论文_第2页
web前端毕业设计论文_第3页
web前端毕业设计论文_第4页
web前端毕业设计论文_第5页
已阅读5页，还剩150页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

20152015版毕业论文题目：响应式企业网站设计与实现学生姓名：罗智刚学号：1202012132专业班级：B12计算机科学与技术2班指导教师：李莉企业导师：林志宏二级学院：电气与信息工程学院摘要在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们接受，并且融入我们的生活。在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。本论文主要围绕写意集团的HTML5响应式网站为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进行定义，布局基础布局；css对展示的HTML元素布局进行定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析实现中的难点和重点；关键词：HTML5;CSS3;响应式;javascript;网站美化;交互设计

abstract Inthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts. ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon. Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目录TOC\o"1-4"\h\z\uHYPERLINKcontent="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>

</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>

<liid="menu_li">

<ahref="about.html">关于写意</a>

<imgsrc="imgs/nav_bg.png"alt=""id="menu_btn"/>

<divclass="list_dragdown"style="display:none"id="menu">

<divclass="listtop"></div>

<ulclass="clear">

<li><ahref="fuli.html">企业文化</a></li>

<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>

<liclass="last"><ahref="contact.html">联系我们</a></li>

</ul>

<!--隐藏的导航栏-->

<divid="nav_btn"><imgsrc="imgs/nav.png"/>

<ulid="yc_nav">

<li><ahref="index.html">首页</a></li>

<li><ahref="about.html">关于写意</a></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><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="imglogoimg1colors"src="imgs/table-logo.png"alt=""/>

<imgclass="imglogoimg1"src="imgs/table-logo2.png"alt=""/>

<h5>写意数字</h5>

<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="imglogoimg2colors"src="imgs/table-evon.png"alt=""/>

<imgclass="imglogoimg2"src="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"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>

<!--旗下品牌结束-->

<!--服务项目-->

<

人人文库> 全部分类> 应用文书 > 工作计划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论