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

提交評論