前话

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、热门推荐 实现关键代码