將每一頁都需要的 header 區的內容獨立存成檔案 header.html
將每一頁都需要的 sidebar 區的內容獨立存成檔案 sidebar.html
將每一頁都需要的 footer 區的內容獨立存成檔案 footer.html
將 CSS 樣式設定的內容獨立存成檔案 layout.css
將 SCRIPT 程式獨立存成檔案 ctrlmenu.js
<script>
$(document).ready(function(){
//在指定位置載入指定檔案的內容
$('header').load('header.html');
$('footer').load('footer.html');
$('#sidebar').load('sidebar.html');
});
</script>
<!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"> <meta charset="UTF-8"> <title>TS Auto 車訊網</title> <!-- Google Web Font --> <link href="https://fonts.googleapis.com/css?family=Lobster|Righteous" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanstc.css"> <!-- Awesome fa font --> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- W3.CSS 框架套件 --> <link rel="stylesheet" href="css/w3.css"> <!-- jquery 函式庫 --> <script src="js/jquery-3.3.1.min.js"></script> <!-- 以下自行設計的 --> <link rel="stylesheet" href="css/layout.css"> <script src="js/loadfile.js"></script> <script src="js/ctrlmenu.js"></script> </head> <body> <!-- Sidebar ============================================================ --> <div id="sidebar"> <!-- load sidebar.html --> </div> <!-- Navigation Bars Start ============================================== --> <header> <!-- load header.html --> </header> <div id="main"></div> <footer class="w3-center"> <!-- load footer.html --> </footer> </body> </html>