[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';
~~~
- 1.基本樣式
- 0.樣式初始化
- 1. 漸變色
- 2. hover問題
- 3. 陰影
- 4. 選擇器
- 5. border.畫邊線
- 6. 水平垂直居中
- 7.input 輸入框需要縮進
- 8.文字問題
- 2. 方法
- 1. 定位浮動和flex
- 1. 阮一峰
- 2. position
- 3. flex
- 2. bootstrap 3
- 3. sass語法
- 4.margin-top bug 解決方法
- 5. iconfont圖標
- 3. 動畫特效
- 特效總結
- 動畫
- css2d轉換
- 過渡
- 1. 入場從無到有
- 2. 兩面切換
- 3. 小三角及原理
- 4. 點擊圖片單獨顯示
- 5. 導航條吸頂
- 6. 進度條
- 7. animate效果 jquery
- 8.3D透視旋轉
- 4.grid布局
- 1.grid布局 網格居中對齊
- HTML
- 第一節、學習網站
- 第二節、封裝
- 第三節、快捷鍵使用