第二节、封装 · 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'; ~~~