🎀 精彩專欄推薦👇🏻👇🏻👇🏻
✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
💂 作者首頁: 【首頁——🚀擷取更多優質源碼】 🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🦄 echarts大屏展示大資料平台可視化(150套) 】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】
🥇 關于作者: 曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲年度十大部落格之星。 十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站效果
- 五、🪓 代碼實作
- 🧱HTML結構代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🥧 美食網頁介紹、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐飲文化、等網站的設計與制作。
二、✍️網站描述
🍧美食主題網站 主要對各種美食進行展示，讓浏覽者清晰地了解到各種美食的詳細資訊，便于浏覽者進行選擇。該子產品的左側有個美食分類，使用者可以選擇自己喜歡的種類，當點選種類後，就會在右側出現該分類下的各種美食，使用者可以點選自己感興趣的食品，進而看到它的具體資訊。它的具體資訊包括配料、産地及它的一些功能，使使用者對該食品有着全面的認識。
👨🎓靜态網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計👩🎓,常用的網頁設計軟體有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟體寫出的前端Html5代碼都是一緻的，本網頁适合修改成為各種類型的産品展示網頁，比如美食、旅遊、攝影、電影、音樂等等多種主題，希望對大家有所幫助。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體(如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作)。
其中：
(1)📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
(2)📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
(3)📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等(個别網頁中運用到js代碼)。
四、🌐網站效果
五、🪓 代碼實作
🧱HTML結構代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>開始頁面</title>
</head>
<style>
html {
height: 100%;
}
body {
background: url(./images/bg.jpg) no-repeat;
background-size: cover;
background-position: bottom;
}
div{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: 60px;
color: #FAAA00;
text-align: center;
}
a {
color: #fff;
background-color: #FAAA00;
height: 40px;
text-decoration: none;
width: 300px;
display: block;
margin: 0 auto;
line-height: 40px;
font-size: 24px;
border-radius: 5px;
text-align: center;
}
</style>
<body>
<div>
<img src="./images/logo.jpg">
<h1></h1>
<a href="shouye.html">進入</a>
</div>
</body>
</html>