整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前話
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小時內與您取得聯系。
