前話

Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網站模板，div加css布局，網頁資源分開存儲以便管理，網頁結構清晰簡單，希望本篇能夠助力各位萌新

主題

《周末の食記》

美食能撫平一切的憂傷

簡介

文件結構包含了css、fonts、images、js和html，運用html5技術，包括nav標簽、header標簽和footer標簽等，采用bootstrap進行布局

圖摘

目錄

編碼

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">揚州炒飯</h3>
        <p class="mb-5">一碗不一樣的炒飯，讓你難以拒絕.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">藍莓酸奶冰激凌</h3>
        <p class="mb-5">觸動您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級的夏威夷果仁，入口絲滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

結語

如果人的一生總的能量是固定的話，那就節省開支，延長時間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態

該從哪里開始呢？好久沒來，有點生疏，有點茫然，那就按常規套路來吧，首先對你們的駐足說聲3q，本次分享的是一款個人博客設計，主題為《周末's博客》，本來代碼算是早就寫好，但因為種種原因的耽擱，一直都未發布，算了，還是別編了，其實就是因為自己懶...

言歸正題，本篇設計只包含首頁和子頁，都是靜態頁面，這兩頁的重要性，你懂的，大多的時候，都在這兩頁上進行擴展的。下面看一下圖摘

腫么樣？如果你覺得還可以請繼續往下看，下面詳細介紹實現細節

1、該設計采用藍色為主色調，這個色調你可根據自己的喜好重置，重置方法：

2、人生，就像一盒巧克力，你永遠不知道下一塊是什么味道！這句話動態進入頁面，采用的是wow插件實現的效果，引用案例：

3、輪播圖 實現關鍵代碼

首頁的輪播圖采用superslide.2.1.js，該插件是基于jquery的，所以使用前需要先引用jquery，具體使用方法如下：

4、站內搜索 實現關鍵代碼

5、熱門推薦 實現關鍵代碼