當前位置:山西快乐十分前三走势 > 論文寶庫 > 信息科技類 > 信息技術 > 正文

山西快乐十分玩法与奖金:個人網站的前端設計

山西快乐十分前三走势 www.fyiul.com 來源:UC論文網2019-04-22 09:48

摘要:

  摘要個人網站是指因特網上一塊固定的面向全世界發布消息的地方,個人網站由域名、程序和網站空間構成,通常包括主頁和其他具有超鏈接文件的頁面。人們可以通過網站來發布自己想要公開的資訊,或者利用網站來提供相關的網絡服務。網站設計的好壞直接影響著網站的性能,本文針對個人博客網站設計談了自己的體會?!  竟丶省扛鋈送?,HTML5,CSS3,Javascript  作者:殷禮琨  隨著互聯網的發展,網絡...

  摘要個人網站是指因特網上一塊固定的面向全世界發布消息的地方,個人網站由域名、程序和網站空間構成,通常包括主頁和其他具有超鏈接文件的頁面。人們可以通過網站來發布自己想要公開的資訊,或者利用網站來提供相關的網絡服務。網站設計的好壞直接影響著網站的性能,本文針對個人博客網站設計談了自己的體會。


  【關鍵詞】個人網站,HTML5,CSS3,Javascript


  作者:殷禮琨


  隨著互聯網的發展,網絡上的網站數量越來越多。個人網站的數量也與日俱增。一個好的網站不僅要保證有著良好的性能,同時頁面的前端設計也得非常的優秀。一個良好的前端設計往往包含了合理的配色,清晰的頁面結構,流暢的動畫。隨著個人網站的發展,也催生出來很多優秀的博客程序,比如:《WordPress》、《Typecho》等等。那么應如何設計個人網站的前端呢?


  1設計語言


  1.1HTML5


  HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟完成標準制定。目標是替換1999年所制定的HTML4.01和XHTML1.0標準,以及能在互聯網應用迅速發展的時候,使網絡標準達到匹配當代的網絡需求。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對于需要插件的豐富性網絡應用服務,例如:AdobeFlash、MicrosoftSilverlight與OracleJavaFX的需求,并且提供更多能有效加強網絡應用的標準集。


  1.2CSS3


  層疊樣式表(CSS),又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表,一種用來為結構化文檔添加樣式的計算機語言,由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支持。


  CSS3分成了不同類別,稱為“modules”。而每一個“modules”都有于CSS2中額外增加的功能,以及向后兼容。CSS3早于1999年已開始制訂。直到2011年6月7日,CSS3ColorModule終于發布為W3CRecommendation。CSS3里增加了不少功能,如:“border-radius”、“text-shadow”等。


  1.3JavaScript


  一種高級編程語言,通過解釋執行,是一門動態類型,面向對象的直譯語言。它已經由ECMA通過ECMAScript實現語言的標準化。它被世界上的絕大多數網站所使用,也被世界主流瀏覽器支持。JavaScript是一門基于原型、函數先行的語言,是一門多范式的語言,它支持面向對象編程,命令式編程,以及函數式編程。它提供語法來操控文本,數組,日期以及正則表達式等,不支持I/O,比如網絡,存儲和圖形等,但這些都可以由它的宿主環境提供支持。隨著最新的HTML5和CSS3語言標準的推行它還可用于游戲、桌面和移動應用程序的開發和在服務器端網絡環境運行。


  2開發工具


  SublimeText是一套跨平臺的文本編輯器,支持基于Python的插件。SublimeText是專有軟件,可通過包擴充本身的功能。大多數的包使用自由?件授權發布,并由社區建置維護。SublimeText支持眾多編程語言,并支持語法上色。


  MozillaFirefox,中文俗稱火狐,是一個自由及開源的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發。Firefox支持Windows、OSX及Linux,其移動版支持Android及FirefoxOS,這些版本的Firefox使用Gecko來排版網頁,Gecko是一個運行當前與預期之網頁標準的排版引擎,而在2015年發布的FirefoxforiOS則非使用Gecko。


  3網站前端設計


  3.1站點架構


  首先確認了整體頁面是由左右兩個DIV組成,并提供一個按鈕,可以按下后隱藏左邊的DIV以達到只顯示右邊的DIV的正文的目的。為left和right兩標簽加上內容,并美化其頁面。


  3.2頁面設計


  作品頁面主要用于存放一些作品的demo,所以設計成了幾個div以格子的形式排列,并在上面能夠顯示作品的預覽。整體的頁面框架依舊沿用首頁,以達到站點整體風格的統一和css的最佳化利用,并減少開發過程。


  3.3加入動畫,添加特效


  例如顯示懸浮到容器上的陰影漸變的效果如下:


  給容器設置box-shadow屬性,值為2px2px20px#909090;再給這個容器設置hover版本的css,設置為box-shadow:2px2px70px#707070;給容器設置transition屬性,值為2s;


  使用html默認支持hover屬性來切換兩套寫好的css3陰影代碼來實現陰影效果的切換,再使用transition屬性設置動畫的播放時間以達到更美觀的效果。


  3.4其他效果


  例如使用了highlight.js,用于給生成的代碼塊添加高亮和排版效果。


  hljs.initHighlightingOnLoad();


  4總結


  總之,要使整個網站有個性化的體驗,不僅要頁面內容豐富,動畫流暢,還需要有相關特效,讓整體效果簡潔大方美觀,讓人有耳目一新的感覺。

核心期刊推薦


發表類型: 論文發表 論文投稿
標題: *
姓名: *
手機: * (填寫數值)
Email:
QQ: * (填寫數值)
文章:
要求: