太極圖項目
1.主體思想
2.遇到問題和如何解決
3.在哪里查資料
4.有哪些代碼沒有想到
畫圖步驟：
1.利用border-radius畫一個圓
2.建立新的空div模塊用于給八卦圖添加顏色
3.利用相對定位和絕對定位將空的div元素一左一右放入圓中
4.更改background color外厂，overflow = hidden清除浮動（即圓外部分），將圓分為黑白兩個半圓
5.在中線部分上下分別加上兩個四分之一大小的圓交惯，調(diào)整顏色次泽，使得陰陽魚成型
6.同第五步席爽，再分別加上第五步中圓的四分之一大小的圓啊片，八卦圖成型
加動畫步驟：
1.加入css屬性animation,定義關(guān)鍵幀x，即執(zhí)行一次要多久
2.定義keyframes x紫谷，即動畫的效果（從0度旋轉(zhuǎn)到360度）
@keyframes x {
/* 動畫從0度旋轉(zhuǎn)到360度 */
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
3.在animation中加入linear屬性使得動畫為線性，infinite使得動畫重復(fù)播放
animation: x 25s linear infinite;
4.使用css box shadow生成器給圖案加上陰影效果
box-shadow: 2px 0px 4px 2px rgba(0, 0, 0, 0.75);
5.flex布局修改位置
tips：
1.id可以是中文
2.div+div+tab 快速打出兩組div
3.選擇器中只需要選中第一次出現(xiàn)的元素標(biāo)簽（以div為例）
div:first-child{ }
第2次出現(xiàn)的
div:nth-child(2){ }
4.[xx=xx]可查找所有滿足條件的元素笤昨，如ID可寫為id=xx;但一般id寫為#id要更方便
*則代表所有
5.box-sizing:border-box 更改盒模型
指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說捺僻，對元素指定寬度和高度包括了 padding 和 border 。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度匕坯。
6.可以通過css選擇器加邊框樣式來確定元素大小和位置(border調(diào)試法)
7.在建立第三個圓時應(yīng)該先令其位移50%拔稳，再回退元素本身寬度的一半才能保證其中心在圓的中線上
8.一般將包裹其他元素和容器的元素id命名為wrapper。如xx-wrapper
9.設(shè)置height=100vh可以使得用戶可視范圍（高度）
10.在wrapper中垂直居中
div{
display: flex;
justify-content: center;
align-items: center;
}
11.@media (max-width: 500px){}使頁面適應(yīng)移動端巴比。只需要修改固定像素值屬性即可
