最近的CSDN的博客閱讀體驗非常的糟糕，恰好自己也一直想搭建一個屬于自己的網站，放下自己的技術心得情感體會，從零開始慢慢搭建項目磨練技術，以后也把自己新習得的技術放在里面增加自己的學習樂趣。

一，搭建基本的項目模板為項目創建一個文件夾及一些基本文件，為此用到HTML5 Boilerplate(H5BP)框架搭建，然后用Bootstrap快速搭建頁面。

刪除不必要的樣板文件

理解.htaccess文件

更新必要的樣板文件

更新站點圖標

我們用LESS創建自己的CSS文件所以刪除不必要的CSS文件，刪除CHANGELOG.md，CONTRIBUTING.md，doc文件及其內容。

理解.htaccess文件,這個文件內容不一定全部有用，這取決于站點需求和主機設置，不過這個文件主要用處是保證站點性能最優，所以認真對待它。

我們需要更新一些需要更新的文件，.humans.txt-記載貢獻者，H5BP,Bootstrap的還有其他的貢獻者。LICENSE.md-在H5BP許可之上更新其他的許可，比如Bootstrap之類重點庫的許可信息。README.md-更新這個文件，加上自己的項目說明。

最后用自己的項目圖標換下默認的圖標，apple-touch-icon-precomposed.png觸摸設備的站點圖標，為確保觸摸屏的最佳顯示務必要144px見方的。favicon.ico：32px見方的圖標文件。

加入Bootstrap庫到項目中

Bootstrap的全部font文件，但是隨著CDN的增加為網站緩存靜態資源，我們有時會被拒絕執行WEB字體文件所以我們額外添加一個.htaccess文件，這個文件有解決這個問題的代碼，我們需要的是即使網站根目錄下沒有.htaccess文件也不會出現字體問題，在font文件下創建.htaccess文件添加代碼如下：

<FilesMatch "\.(ttf|otf|eot|woff)$"><IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule> </FilesMatch>

加入Javascript文件，H5BP其中的Modernizr墊片是為了IE8支持HTLML5的分區section元素，在js目錄下創建bootstrap文件放入所有的js插件，當然為了更好的管理H5BP里有一個存放所有插件的文件以減少http的請求，加快站點加載速度，復制代碼到plugins.js中，比如Bootstrap中的大文件bootstrap.min.js的代碼到文件中并加上注釋

接下來復制全部的LESS文件，因為我們的前期主力是H5BP+Bootstrap+LESS所以css文件暫時不考慮，下面是完成了的模板結構

二，搭建HTML模板

<header role="banner"><nav role="navigation" class="navbar navbar-static-top navbar-default"><div class="container"><!-- 首部頭部 --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">Project name</a></div><!-- 首部導航 --><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="index.html">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul> </div></div></nav></header><main role="main"><h1>Main Heading</h1><p>Content specigic to this page goes here.</p></main><footer role="contentinfo"><p><small>Copyright &copy; Company Name</small></p></footer>

構建出主體的框架header頭部，main主體，footer腳部。同時編譯bootstrap.less文件到css文件里。這里我選擇的是WinLess軟件來編譯，這里的role為HTML5中的語義標簽

手機端：

二，完成基本的頁面布局

?對header，和footer進行布局，然后根據需求對main進行布局

完成了頭部導航區的布局，和footer的布局，至于main的布局我還沒有想好，當想好了再出一個設計圖，然后根據這個布局。還有項目圖標暫時就用Bootstrap的logo代替吧

尤其注意的是我這里的導航區是fixed的布局所以為了不影響main區域的顯示就要在main設置一個margin-top，所以css代碼為：

/* --------header----------*/ /*導航固定*/ header{ position: fixed; top: 0; left: 0; right: 0; z-index: 999; min-height: 60px; } /*------------------main--------------*/ main{margin-top: 60px; }

?

轉載于:https://www.cnblogs.com/404--NotFound/p/10145379.html

總結

以上是生活随笔為你收集整理的个人的博客搭建（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。