整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前話
Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網(wǎng)站模板，div加css布局，網(wǎng)頁資源分開存儲以便管理，網(wǎng)頁結(jié)構(gòu)清晰簡單，希望本篇能夠助力各位萌新
主題
《周末の食記》
美食能撫平一切的憂傷
簡介
文件結(jié)構(gòu)包含了css、fonts、images、js和html，運(yùn)用html5技術(shù)，包括nav標(biāo)簽、header標(biāo)簽和footer標(biāo)簽等，采用bootstrap進(jìn)行布局
圖摘
目錄
編碼
<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">揚(yáng)州炒飯</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">藍(lán)莓酸奶冰激凌</h3>
<p class="mb-5">觸動您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級的夏威夷果仁，入口絲滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>結(jié)語
如果人的一生總的能量是固定的話，那就節(jié)省開支，延長時(shí)間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態(tài)
用HTML怎么制作網(wǎng)頁呢?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì) ? ,常用的網(wǎng)頁設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的。
一、網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
二、網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
三、網(wǎng)站素材方面：計(jì)劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
四、網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件;
五、網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(個別網(wǎng)頁中運(yùn)用到j(luò)s代碼)。
篇文章我們說了初始化css的創(chuàng)建，本篇文章我們來說一下如何創(chuàng)建一個初始化html的基本模版以及初始化文件的創(chuàng)建。
我們在對一個網(wǎng)頁進(jìn)行切圖編碼之前，我們需要創(chuàng)建這么幾個目錄文件， 便于存放我們的代碼；
css文件目錄：該目錄的作用是用于存放我們的網(wǎng)頁css文件，一般我們分為2個文件，一個是用于存放我們上篇文章說到的初始化代碼的base.css，還有一個是用于存放我們自己編寫的網(wǎng)頁代碼的style.css文件；
images文件目錄：該目錄的作用是用于存放我們網(wǎng)頁的切圖文件，網(wǎng)頁中的背景圖片以及元素圖標(biāo)等都可以存放到此文件夾中；
js文件目錄：該目錄的作用是存放我們編寫的網(wǎng)頁javascript代碼（關(guān)于javascript代碼我們將在以后的文章中進(jìn)行詳解），js代碼的作用是實(shí)現(xiàn)網(wǎng)頁中的基本動態(tài)展示效果，比如選項(xiàng)卡切換，banner輪播圖切換等效果；
另外還有一個文件就是我們的網(wǎng)頁html文件，首頁我們一般命名為index.html，一般放于跟目錄下邊。標(biāo)準(zhǔn)的目錄文件就如下圖所示：
備注：如果你的電腦看不到.html這個后綴的話, 在文件夾左上角找到組織-文件夾和搜索選項(xiàng)；
然后點(diǎn)擊查看-找到隱藏已知文件類型的擴(kuò)展名-將前邊的對勾去掉即可；
文件創(chuàng)建完成之后我們就要創(chuàng)建標(biāo)準(zhǔn)的index.html的網(wǎng)頁模版，一個網(wǎng)頁模版一般是由主體html、頭部head、內(nèi)容body組成，其中head區(qū)域主要存放網(wǎng)頁標(biāo)題、關(guān)鍵詞、頁面描述以及css和js代碼的引用；而body區(qū)域主要存放我們以后對頁面的編碼內(nèi)容；
具體的標(biāo)準(zhǔn)模版顯示效果就如下圖所示：
好了，本篇文章就給大家說到這里，大家自己下來可以創(chuàng)建屬于自己的通用初始化文件模版，以后開發(fā)的時(shí)候直接復(fù)制使用即可。
每日金句：不要生氣要爭氣，不要看破要突破，不要嫉妒要欣賞，不要拖延要積極，不要心動要行動。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
