第二節、封裝 · HTML-CSS

[TOC] ## 內容封裝 ### HTML ~~~ <head> <script src="jquery-3.2.1.js"></script> <script src="index.js"></script> <link rel="stylesheet" href="index.css"> </head> <body> <div id="head"> <div> <div class="main" id="main"> </div> <div id="foot"> </div> </body> ~~~ ### mian里要加載的內容A~E 每個頁面只需寫div，不用再寫一個單獨的頁面 ~~~ <div class="A"></div> ~~~ ~~~ <div class="B"></div> ~~~ ~~~ <div class="C"></div> ~~~ ~~~ <div class="D"></div> ~~~ ~~~ <div class="E"></div> ~~~ * * * * * ### css ~~~ index.css @import 'A.css'; @import 'B.css'; @import 'C.css'; @import 'D.css'; @import 'E.css'; index的樣式內容 ~~~ * * * * * ### js ~~~ index.js $(function(){ const pages =["common-html/shouye.html","common-html/gongshi.html","common-html/ps.html","common-html/jinmeng.html","common-html/lianxi.html"]; $("#main").load(pages[0]); // console.log(1); $("#lianjie li").click(function(){ console.log($(this).index()); $(this).addClass("nav-one").siblings().removeClass("nav-one"); $("#main").load(pages[$(this).index()]); }) }) ~~~ ## 頭尾封裝 ### head ~~~ <div id="header"></div> ~~~ * header.css ~~~ 頭部樣式 ~~~ * foot ~~~ <div id="footer"></div> ~~~ * footer.css ~~~ 尾部樣式 ~~~ ### 內容 ~~~ <head> <link rel="stylesheet" href="A.css"> </head> <body> <div id="head"></div> <div class="A"></div> <div id="foot"></div> </body> ~~~ ### css.css ~~~ @import 'A.css'; ~~~