整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前话
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>结语
如果人的一生总的能量是固定的话，那就节省开支，延长时间，喜怒哀乐不溢于言表，不困于心智，保持乐观心态
.Thom Sander (演示|下载)
2.Wedding Website Template with jQuery Slider (演示|下载)
3.Folder (演示|下载)
4.Free Website Template with JustSlider (演示|下载)
5.Point (演示|下载)
6.Hatha Yoga (演示|下载)
7.Animated Template for Design Studio (演示|下载)
8.AppleGreen HTML5 and CSS3 Template (演示|下载)
9.Art School Template (演示|下载)
10.Fascination HTML5 and CSS3 Template (演示|下载)
11.HTML5 Charity Center Template (演示|下载)
12.Interio (演示|下载)
13.Real Estate Website (演示|下载)
14.Template for Exterior Design Project with jQuery Slider (演示|下载)
15.Template for Food Delivery Project (演示|下载)
16.Template for Law Business (演示|下载)
17.Template for Youth Organization (演示|下载)
18.Template with jQuery Gallery for Music Site (演示|下载)
19.Template with jQuery Slider for Car Project (演示|下载)
20.Template with jQuery Slider for Consulting Business (演示|下载)
篇文章我们说了初始化css的创建，本篇文章我们来说一下如何创建一个初始化html的基本模版以及初始化文件的创建。
我们在对一个网页进行切图编码之前，我们需要创建这么几个目录文件， 便于存放我们的代码；
css文件目录：该目录的作用是用于存放我们的网页css文件，一般我们分为2个文件，一个是用于存放我们上篇文章说到的初始化代码的base.css，还有一个是用于存放我们自己编写的网页代码的style.css文件；
images文件目录：该目录的作用是用于存放我们网页的切图文件，网页中的背景图片以及元素图标等都可以存放到此文件夹中；
js文件目录：该目录的作用是存放我们编写的网页javascript代码（关于javascript代码我们将在以后的文章中进行详解），js代码的作用是实现网页中的基本动态展示效果，比如选项卡切换，banner轮播图切换等效果；
另外还有一个文件就是我们的网页html文件，首页我们一般命名为index.html，一般放于跟目录下边。标准的目录文件就如下图所示：
备注：如果你的电脑看不到.html这个后缀的话, 在文件夹左上角找到组织-文件夹和搜索选项；
然后点击查看-找到隐藏已知文件类型的扩展名-将前边的对勾去掉即可；
文件创建完成之后我们就要创建标准的index.html的网页模版，一个网页模版一般是由主体html、头部head、内容body组成，其中head区域主要存放网页标题、关键词、页面描述以及css和js代码的引用；而body区域主要存放我们以后对页面的编码内容；
具体的标准模版显示效果就如下图所示：
好了，本篇文章就给大家说到这里，大家自己下来可以创建属于自己的通用初始化文件模版，以后开发的时候直接复制使用即可。
每日金句：不要生气要争气，不要看破要突破，不要嫉妒要欣赏，不要拖延要积极，不要心动要行动。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
